Bootstrap学习js插件篇之下拉菜单

2024-04-27 14:32:06

字体：大中小

来源：转载

供稿：网友

案例

通过此插件可以为几乎所有东西添加下拉菜单，包括导航条、标签页、胶囊式按钮。

用于导航条

导航条分为四个部分。第一部分导航头，第二部分导航列，第三部分form查询表单，第四部分导航列。

[javascript]view plaincopy

<navclass="navbarnavbar-default"role="navigation"><divclass="navbar-header"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#myCollapse"><spanclass="sr-only">Togglenavigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="#">Brand</a></div><divclass="collapsenavbar-collapse"id="myCollapse"><ulclass="navnavbar-nav"><liclass="active"><ahref="#">Link</a></li><li><ahref="#">Link</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">Dropdown<bclass="caret"></b></a><ulclass="dropdown-menu"><li><ahref="#">Action</a></li><li><ahref="#">Anotheraction</a></li><li><ahref="#">Somethingelsehere</a></li><liclass="divider"></li><li><ahref="#">Separatedlink</a></li><liclass="divider"></li><li><ahref="#">Onemoreseparatedlink</a></li></ul></li></ul><formclass="navbar-formnavbar-left"role="search"><divclass="form-group"><inputtype="text"class="form-control"placeholder="Search"></div><buttontype="submit"class="btnbtn-default">Submit</button></form><ulclass="navnavbar-navnavbar-right"><li><ahref="#">Link</a></li><liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">Dropdown<bclass="caret"></b></a><ulclass="dropdown-menu"><li><ahref="#">Action</a></li><li><ahref="#">Anotheraction</a></li><li><ahref="#">Somethingelsehere</a></li><liclass="divider"></li><li><ahref="#">Separatedlink</a></li></ul></li></ul></div>lt;/nav>

效果就是

用法一--通过data属性

通过向链接或按钮添加data-toggle="dropdown"可以打开或关闭下拉菜单。

      <li class="dropdown">        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>        <ul class="dropdown-menu">          <li><a href="#">Action</a></li>          <li><a href="#">Another action</a></li>          <li><a href="#">Something else here</a></li>          <li class="divider"></li>          <li><a href="#">Separated link</a></li>          <li class="divider"></li>          <li><a href="#">One more separated link</a></li>        </ul

上一篇：CnBlogs自定义博客样式

下一篇：自学HTML5第二节（标签篇---新增标签详解）

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注