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">&times;</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 .）