标签：
下拉菜单，按钮组，搜索框，导航，列表组，分页，标签徽记，缩略图，面板，进度条
1. 下拉菜单
按钮和下拉选择都包裹在<div class=" dropdown"></div>中
按钮必须添加 data-toggle="dropdown" 触发器
放置下拉选项的无序列表需要添加 .dropdown-menu 类
添加一个空洞 <li class="divider"></li> 标签来分割列表项
<head>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css" rel="stylesheet">
</head>
<body style="margin:50px">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
下拉菜单
<span class="caret"></span> //向下箭头
</button>
<ul class="dropdown-menu">
<li><a href="#">新闻</a></li>
<li class="divider"></li> //分割列表线
<li><a href="#">娱乐</a></li>
<li class="divider"></li>
<li><a href="#">时事</a></li>
<li class="divider"></li>
<li><a href="#">军事</a></li>
</ul>
</div>
</body>
2. 按钮组
<div class="btn-group"> //默认水平按钮组
<button type="button" class="btn btn-defaul">顶</button>
<button type="button" class="btn btn-defaul">中立</button>
<button type="button" class="btn btn-defaul">踩</button>
</div>
<div class="btn-group-vertical"> //垂直方向按钮组
<button class="btn btn-defaul">顶</button>
<button class="btn btn-defaul">中立</button>
<button class="btn btn-defaul">踩</button>
</div>
<div class="btn-group btn-group-justified"> //拉伸100%宽度，水平按钮组，只适用于 a 标签
<a class="btn btn-defaul">顶</a>
<a class="btn btn-defaul">中立</a>
<a class="btn btn-defaul">踩</a>
</div>
<div class="btn-group"> //嵌套按钮组
<button type="button" class="btn btn-defaul">顶</button>
<button type="button" class="btn btn-defaul">踩</button>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">新闻</a></li>
<li class="divider"></li>
<li><a href="#">时事</a></li>
<li class="divider"></li>
<li><a href="#">体育</a></li>
</ul>
</div>
</div>
3.input控件组
带按钮的搜索框
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
Search
</button>
</span>
</div>
带下拉的搜索框
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索">
<span class="input-group-btn">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">新闻</a></li>
<li class="divider"></li>
<li><a href="#">时事</a></li>
<li class="divider"></li>
<li><a href="#">体育</a></li>
</ul>
</div>
</span>
</div>
不带按钮的搜索框
<div class="input-group">
<input type="text" class="form-control" placeholder="搜索">
<span class="input-group-addon">
输入完后回车
</span>
</div>
4.导航
胶囊导航水平方向
<ul class="nav nav-pills">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">简介</a></li>
<li><a href="#">详情</a></li>
</ul>
垂直方向
<ul class="nav nav-pills nav-stacked"></ul>
面包屑导航
<ol class="breadcrumb">
<li><a href="#">首页</a></li>
<li><a href="#">资料库</a></li>
<li class="active">数据</li>
</ol>
头部导航
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">网站Logo</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">链接</a></li>
<li><a href="#">链接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
下拉菜单
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">新闻</a></li>
<li><a href="#">时事</a></li>
<li><a href="#">娱乐</a></li>
<li class="divider"></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">其他</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">链接</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">下拉菜单<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">新闻</a></li>
<li><a href="#">时事</a></li>
<li><a href="#">娱乐</a></li>
<li class="divider"></li>
<li><a href="#">其他</a></li>
<li class="divider"></li>
<li><a href="#">其他</a></li>
</ul>
</li>
</ul>
</div>
</nav>
5.列表组
<ul class="list-group">
<li class="list-group-item"><a href="">新闻</a></li>
<li class="list-group-item"><a href="">时事</a></li>
<li class="list-group-item"><a href="">娱乐</a></li>
<li class="list-group-item"><a href="">其他</a></li>
</ul>
制作新闻页面
<div class="list-group">
<a href="#" class="list-group-item active">
<h4>习大大会见中国国民党主席朱立伦</h4>
<p>据新华社北京4日电 中共中央总书记习大大4日上午在北京会见了朱立伦主席率领的中国国民党大陆访问团。</p>
</a>
<a href="#" class="list-group-item ">
<h4>习大大会见中国国民党主席朱立伦</h4>
<p>习大大对朱立伦率团来大陆访问表示欢迎。习大大强调，两岸关系和平发展成果来之不易，经验弥足珍贵。概括地说，就是要坚持走两岸关系和平发展道路，坚 持“九二共识”、反对“台独”的政治基础，坚持开展两岸协商谈判、推进各领域交流合作，坚持为两岸民众谋福祉</p>
</a>
<a href="#" class="list-group-item ">
<h4>习大大会见中国国民党主席朱立伦</h4>
<p>朱立伦表示，两岸和平发展已取得很多成果，希望在“九二共识”基础上，两岸在区域和平、环保、经济整合等方面携手合作，让两岸关系发展成果更多惠及基层民 众、中小企业和青年群体，持续推动两岸关系和平发展。</p>
</a>
</div>
为列表组添加徽章
<ul class="list-group">
<li class="list-group-item">
<span class="badge">30</span>
<a href="">中国队金牌</a>
</li>
<li class="list-group-item">
<span class="badge">30</span>
<a href="">中国队金牌</a>
</li>
<li class="list-group-item">
<span class="badge">30</span>
<a href="">中国队金牌</a>
</li>
</ul>
6.分页
<ul class="pagination">
<li class="disabled"><a href="#">«</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="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
<ul class="pagination pagination-lg"> 大号
<ul class="pagination pagination-sm"> 小号
上下页
<ul class="page">
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
</ul>
7.标签
<span class="label label-default">默认</span>
<span class="label label-primary">主要</span>
<span class="label label-success">成功</span>
<span class="label label-info">消息</span>
<span class="label label-warning">警告</span>
<span class="label label-danger">危险操作</span>
徽章
<button class="btn btn-primary" type="button">
未读消息
<span class="badge">5</span>
</button>
8.缩略图
配合栅格系统构建带链接的缩略图，且支持响应
<div class="row">
<div class="col-xs-2">
<a href="#" class="thumbnail"> //添加边框样式并调节图片距离
<img src="xx.png" >
</a>
</div>
<div class="col-xs-2">
<a href="#" class="thumbnail">
<img src="xx.png" >
</a>
</div>
<div class="col-xs-2">
<a href="#" class="thumbnail">
<img src="xx.png" >
</a>
</div>
</div>
追加内容
<div class="row">
<div class="col-xs-2">
<div class="thumbnail">
<img src="xx.png" >
<div class="caption">
<p>图片看不见？</p>
<p>
<a href="" class="btn btn-primary">查看详情</a>
</p>
</div>
</div>
</div>
</div>
9.面板
<div class="panel panel-default">
<div class="panel-heading">面板页头</div>
<div class="panel-body">面板主体</div>
<div class="panel-footer">面板页脚</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">面板页头</div>
<div class="panel-body">面板主体</div>
<div class="panel-footer">面板页脚</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">面板页头</div>
<div class="panel-body">面板主体</div>
<div class="panel-footer">面板页脚</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">面板页头</div>
<div class="panel-body">面板主体</div>
<div class="panel-footer">面板页脚</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">面板页头</div>
<div class="panel-body">面板主体</div>
<div class="panel-footer">面板页脚</div>
</div>
10.进度条
<div class="progress">
<div class="progress-bar progress-bar-success" style="width:40%"></div> //另有其他4种颜色，进度条依靠服务端
</div>
<div class="progress progress-striped"> //带条纹
<div class="progress-bar progress-bar-info" style="width:40%"></div>
</div>
<div class="progress progress-striped active"> //动态 条纹
<div class="progress-bar progress-bar-warning" style="width:40%"></div>
</div>
标签：
原文地址：http://www.cnblogs.com/zhangchen2015/p/4478116.html
