(一)Bootstrap 字体图标
已经整理成为HTML文件存在G盘,名为Bootstrap字体图标。
(二)Bootstrap 下拉菜单
class .dropdown 下拉菜单
具体用法:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="js/jquery/jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownmenu" data-toggle="dropdown">主题<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu"><li>java</li> <li>C#</li> <li>C++</li> <li>C</li> </ul></div></body></html>
class .pull-right 向右对齐下拉菜单
class .dropdown-header 向下拉菜单的标签区域添加标签
例子:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="js/jquery/jquery-3.3.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" id="dropdownmenu" data-toggle="dropdown">主题<span class="caret"></span></button>
<ul class="dropdown-menu pull-right" role="menu">
<li class="dropdown-header">下拉菜单标签1</li>
<li><a herf="#">java</a></li>
<li><a herf="#">C#</a></li>
<li class="dropdown-header">下拉菜单标签2</li>
<li><a herf="#">C++</a></li>
<li><a herf="#">C</a></li>
</ul>
</div>
</body>
</html>
(三)Bootstrap 按钮组
class .btn-group 按钮组
class .btn-toolbar 把几组按钮组结合成为一个更复杂的组件
class .btn-group-lg/sm/xs 按钮组的大小
class .btn-group-vertical 按钮组垂直摆放
可以在一个按钮组内嵌套另一个按钮组,即,在一个 .btn-group 内嵌套另一个 .btn-group 。当想让下拉菜单与一系列按钮组合使用时,就会用到这个。