bootstrap组件学习
转自http://v3.bootcss.com/components/
bootstrap组件学习
矢量图标的用法<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
可同button结合使用
alert 组件中所包含的图标是用来表示这是一条错误消息的。
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>下拉菜单
在父元素中设置dropdown或者dropup类属性（其他可将父元素的position设置为relative的都可），将父元素的position设置为relative，这样下拉列表即可通过设置position为absolute，同父元素进行绝对定位。
下拉触发按钮设置data-toggle='dropdown'属性，插件会根据此属性查找触发按钮，并添加相关监听事件。
下拉列表设置dropdown-menu类属性，插件会搜寻触发按钮的父元素内的所有dropdown-menu，并同器触发事件管理。
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>.dropdown-menu-left
.dropdown-menu-right
.dropdown-header列表标题
<li role="separator" class="divider"></li>分割线
按钮组
.btn-toolbar按钮组的组
.btn-group按钮组
.btn-group-vertical垂直排列按钮组
.btn-group-justified两端对齐按钮组
.btn-group-(lg|sm|xs)按钮组大小
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>按钮组也可以实现下拉菜单，同原下拉菜单的实现一样。
输入框组
.input-group里面增加元素
.input-group-addon，span文字或者input内容，可以使用此属性。
.input-group-btn，button使用此属性，因为有以下不兼容性问题，比如input-group-addon的内边距会导致显示问题。
使用.input-group-btn可实现按钮下拉菜单功能。
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div> 导航
.nav
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>.nav-tabs为标签式
.nav-pills为胶囊式
.nav-stacked为垂直堆叠式
.nav-justified为两端对齐式
导航条
.navbar
.navbar-default默认导航条颜色
.navbar-inverse反色导航条
导航内容<ul class="nav navbar-nav"></ul>
品牌图标<div class="navbar-header"></div>
表单<form class="navbar-form"></form>
按钮<button class="navbar-btn"></button>
文字<p class=".navbar-text"></p>
非导航连接<a class="navbar-link"></a>
.navbar-left和.navbar-right用于对齐
.navbar-fixed-(top|bottom)让导航条固定在顶部或底部
路径导航（breadcrumb）
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
分页、翻页
在<nav>元素中使用ul显示分页信息，ul使用pagination类属性
ul使用.pager，显示翻页样式
<nav>
<ul class="pager">
<li class="previous"><a href="#">Previous</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
</nav>
标签、徽章
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<span class="badge">
警告
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>可关闭的警告
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>警告框中的连接.alert-link
进度条
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div>
</div>.progress-bar-success
.progress-bar-info
.progress-bar-warning
.progress-bar-danger
.progress-bar-striped
.active动态的
还有媒体对象（.media .media-list .media-left .media-object .media-heading .media-body）
列表组（.list-group .list-group-item .list-group-item-(success|info|warning|danger) .list-group-item-heading .list-group-item-text）
面板（.panel .panel-(success|info|warning|danger) .panel-heading .panel-title .panel-body .）
