下拉菜单组件
使用bootstrap 下拉菜单组件,需要引入jquery 与 bootstrap文件夹下js目录下的 bootstrap.js。
<script src="jq/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.js"></script>
下拉菜单,都是包含在.dropdown 的容器里。
data-toggle 的值也为dropdown,菜单项的类名为dropdown-menu。其中,divider 为分割线。
主要代码:
<body>
<!-- 下拉菜单 -->
<ul class="nav navbar-nav">
<li><a href="#">菜单一</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toogle" data-toggle="dropdown">
菜单二<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>子菜单一</li>
<li class="divider"></li>
<li>子菜单二</li>
</ul>
</li>
<li><a href="#">菜单三</a></li>
</ul>
</body>
按钮组件
需要放在 .btn-group 里。【按钮组,还有一个类 .btn-group-justified 可使按钮组件横向满屏】
其中,button 可以 换成 a
<body>
<!-- 按钮组 -->
<div class="btn-group">
<button class="btn btn-default">首页</button>
<button class="btn btn-info">分类</button>
<button class="btn btn-success">喜欢</button>
</div>
<div class="btn-group">
<a class="btn btn-default">首页</a>
<a class="btn btn-info">分类</a>
<a class="btn btn-success">喜欢</a>
</div>
</body>
按钮工具栏
<!-- 按钮工具栏 -->
<div class="btn-toolbar">
<div class="btn-group">
<button class="btn btn-default">首页</button>
<button class="btn btn-info">分类</button>
<button class="btn btn-success">喜欢</button>
</div>
<div class="btn-group">
<button class="btn btn-default">首页</button>
<button class="btn btn-info">分类</button>
</div>
<div class="btn-group">
<button class="btn btn-success">喜欢</button>
</div>
</div>
按钮式下拉菜单
<!-- 按钮下拉菜单 -->
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
首页 <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">书1</a></li>
<li><a href="#">书2</a></li>
</ul>
</div>