Bootstrap模块 – 沙莱县菜单
1、.dropdown 掌控模块为沙莱县
2、.dropdown-menu-right 替代 .pull-right右翻转
3、divider 镶入
<!DOCTYPE html>
<html lang=“zh-cn”>
<html>
<title>Bootstrap试验</title>
<head>
<meta charset=“gdk”>
<link href=“bootstrap.css” rel=“stylesheet”>
</head>
<body>
<div class=“dropdown”>
<button class=“btn btn-default dropdown-toggle” data-toggle=“dropdown”>按钮
<span class=“caret”></span>
</button>
<ul class=“dropdown-menu”>
<li><a href=“https://www.baidu.com”>百度</li>
<li><a href=“google.com”>谷歌</li>
</ul>
</div>
<script src=“jquery.min.js”></script>
<script src=“bootstrap.min.js”></script>
</body>
</html>
Data-toggle=”dropdown” 为绑定事件
在input前加个$<div class=“input-group”>
<span class=“input-group-addon”>$<span>
<input type=“text” class=“form-control:”>
</div>
form-control：百分百宽度
Bootstrap模块 – 导航1、以一个带有class .nav的无序列表开始
2、.nav-tabs 代表可切换的导航
3、.nav-pills代表胶囊导航
4、.nav-justified使导航垂直
<ul class=“nav nav-tabs”>
<li class=“active”><a href=“www.baidu.com”>百度</a></li>
<li><a href=“google.com”>谷歌</a></li>
<li><a href=“cxgzs.xyz”>失效</a></li>
</ul>
Bootstrap模块 – 分页1、.pagination在父元素中添加表示分页
2、.page放置在翻页区域
3、.previous把链接向左翻转，.next把链接向右翻转
<div class=“pagination”>
<ul>
<li><a href=“#”>Prev</a></li>
<li class=“active”>
<a href=“#”>1</a>
</li>
<li><a href=“#”>2</a></li>
<li><a href=“#”>3</a></li>
<li><a href=“#”>4</a></li>
<li><a href=“#”>Next</a></li>
</ul>
</div>
Bootstrap模块 – 进度条1、progress表示进度条
2、通过状态类修改进度条的颜色
3、.progress-bar-striped使得进度条渐变
Bootstrap模块 – 列表1、.list-group代表表组
2、.badge代表状态组
3、.active代表选中状态
<ul class=“list-group”>
<li class=“list-group-item active”>
这是一个列表
<span class=“badge”>
14
</span>
</li>
<li class=“list-group-item disable”>
这是一个列表
<span class=“badge”>
14
</span>
</li>
<li class=“list-group-item”>这是一个列表<span class=“badge”>
14
</span>
</li>
</ul>
Bootstrap模块 – 面板1、.panel代表面板
2、.panel-body代表面板内容
3、.panel-footer代表面板的注脚
<div class=“panel panel-danger”>
<div class=“panel-heading”>
弹出层
</div>
<div class=“panel-body”>
这是面板的具体内容
</div>
<div class=“panel-footer”>
脚注
</div>
</div>
