Bootstrap 下拉菜单.pdfVIP

Bootstrap 下拉菜单 创建下拉菜单的标记如下： 每个下拉菜单应该有两个重要的元素： a 元素和 ul 元素。 ul 元素默认是隐藏的，⽽a 元素⽤于切换下拉菜单。 a 元素有两个必要的 data-*属 ： data-toggle和 data-target。 data-toggle属 告诉Bootstrap在每次点击时激活链接元素上的下拉效果。 data-target属 ⽤于在单击链接时阻⽌页⾯重定向。 在这⾥不必提供href属 ，因为它将被忽略。这个链接元素应该包含⼀些锚⽂本 （例 如“Dropdown”）和向下箭头图标 （使⽤插⼊符类⽣成）。 ⼀旦链接和图标正确放置，你可以创建⼀个ul列表，⽤于表⽰下拉菜单中的链接列 表。 这个 ul 元素应该有类dropdown-menu 例⼦ !DOCTYPE html html lang=en head link rel=stylesheet hre =/bootstrap/3.2.0/css/bootst link rel=stylesheet hre =/bootstrap/3.2.0/css/bootst script src=https://ajax ./ajax/libs/jquery/1.11.1/jquery . script src=/bootstrap/3.2.0/js/bootstra /head body style=margin:30px div class=dropdown a data-toggle=dropdown data-target=# hre =http://www .Dropdown /a ul class=dropdown-menu lia hre =#Link 1/a/li lia hre =#Link 2/a/li lia hre =#Link 3/a/li lia hre =#Link 4/a/li /ul /div /body /html 有两种不同的⽅式使⽤Bootstrap的JavaScript插件。 第⼀种⽅法根本不需要JavaScript。你只需要依据⼀些推荐的HTML标记来使⽤它们。 另⼀个⽅法需要⼀些JavaScript知识来初始化和⾃定义插件。 使⽤JavaScript 的下拉菜单 Bootstrap中的下拉插件也可以使⽤JavaScript。 要通过jQuer 触发下拉插件，你需要使⽤dropdown()⽅法： $().dropdown(toggle); !DOCTYPE html html lang=en head script type=text/javascript src=http://code.jquery .com/jquery-1.10.1.min.js/script link rel=stylesheet hre =/bootstrap/3.2.0/css/bootst link rel=stylesheet hre =/bootstrap/3.2.0/css/bootst script src=https://ajax ./ajax/libs/jquery/1.11.1/jquery . script src=/bootstrap/3.2.0/js/bootstra script type=text/javascript $(document).ready( unction(){ $(.myDropdownHandle).dropdown(toggle); }); /script /head body style=margin:30px div class=dropdown id=myDropdown a class=myDropdownHandle data-toggle=dropdown data-ta Dropdown span class=caret/span /a ul class=dropdown-menu lia hre =#Link 1/a/li lia hre =#Link 2/a/li lia hre =#