Bootstrap学习笔记之组件（二）

组件

一、Glyphicons 字体图标
务必在图标和文本之间添加一个空格
<span class="glyphicon glyphicon-search"></span> 搜索

二、下拉菜单
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<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>

标题
<li class="dropdown-header">header</li>

分割线
<li class="divider">divider</li>

禁用
<li class="disabled"><a href="#">Something else here</a></li>

三、按钮组
基本  .btn-group > .btn
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button"
4000
class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>

多个按钮组组成工具栏，之间隔以小空格  .btn-toolbar > .btn-group > .btn
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">...</div>
<div class="btn-group">...</div>
<div class="btn-group">...</div>
</div>

尺寸
<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

嵌套
想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</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" role="menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>

垂直排列
<div class="btn-group-vertical">
...
</div>

两端对齐，占满父元素宽度
注意：必须将每个按钮包裹进一个按钮组中
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>

四、按钮式下拉菜单
单按钮下拉菜单    文字与下拉箭头在一起
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

分裂式按钮下拉菜单    文字与下拉箭头间隔以一条竖线
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

向上弹出式菜单
给父元素添加 .dropup 类
<div class="btn-group dropup">
...
</div>

五、输入框组
在文本输入框 <input> 两边加上文字或按钮
注意：只支持文本输入框 <input>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>

作为额外元素的多选框和单选框
<div class="input-group">
<span class="input-group-addon">    //此时是.input-group-addon
<input type="checkbox">    //将文字换成checkbox或radio
</span>
<input type="text" class="form-control">
</div>

作为额外元素的按钮
<div class="input-group">
<span class="input-group-btn">    //注意此时是.input-group-btn
<button class="btn btn-default" type="button">Go!</button>    //此处换成button
</span>
<input type="text" class="form-control">
</div>

作为额外元素的(分裂式)按钮下拉菜单
<div class="input-group">
<div class="input-group-btn">    //发现按钮统一为.input-group-btn，可换div包裹
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control">
</div>

六、导航
标签页
注意 .nav-tabs 类依赖 .nav 基类。
<ul class="nav nav-tabs" role="tablist">
<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-stacked 类
<ul class="nav nav-pills nav-stacked" role="tablist">
...
</ul>

两端对齐的标签页，占满父元素宽度
<ul class="nav nav-pills nav-justified" role="tablist">
...
</ul>

禁用的链接
给禁用的项添加.disabled
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>

带下拉菜单的(胶囊式)标签页
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
...
</ul>
</li>

七、导航条
<nav class="navbar navbar-default" role="navigation">    //为了增强可访问性，务必给每个导航条加上 role="navigation" 属性。
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">    //button为移动端（窄屏）右边出现的按钮
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>    //按钮上横杠数（3条）
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>    //可将a标签内容替换为<img alt="Brand" src="...">，以图片代之
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">    //导航栏
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">    //带下拉菜单的导航项
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">    //下拉项
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">    //检索表单项
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">    //靠右的导航栏
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

表单
为输入框添加 label 标签，否则屏幕阅读器将会遇到问题，可添加类sr-only隐藏label内容

按钮
对于不包含在 <form> 中的 <button> 元素，加上 .navbar-btn 后，可以让它在导航条里垂直居中。
<button type="button" class="btn btn-default navbar-btn">Sign in</button>

非导航的链接
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
//.navbar-text保证有正确的行距和颜色 .navbar-right靠右排列 .navbar-link让链接有正确的默认颜色和反色设置

固定在顶部  .navbar-fixed-top
注意：此时导航条会遮住页面上部分内容（导航条默认高度为50px），需要设置
body { padding-top: 70px; }
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
...
</nav>

固定在底部  .navbar-fixed-bottom
注意：此时导航条会遮住页面上部分内容（导航条默认高度为50px），需要设置
body { padding-bottom: 70px; }

静止在顶部
<nav class="navbar navbar-default navbar-static-top" role="navigation">    //推荐这种方法，不用设置内边距，注意此时.navbar-collapse左右padding为0，默认的为15px，即如果有靠右的导航栏项目，则顶边
<div class="container">
...
</div>
</nav>

反色的导航条，即黑色，默认是白色  .navbar-inverse
<nav class="navbar navbar-inverse" role="navigation">
...
</nav>

八、路径导航  .breadcrumb
各路径间的分隔符已经自动通过 CSS 的 :before 和 content 属性添加了。
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>

九、分页
<nav>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><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>
</nav>
可以将 active 或 disabled 状态应用于 <span> 标签，即替换 <a> 标签，这样就可以让其保持需要的样式并移除点击功能
<nav>
<ul class="pagination">
<li class="disabled"><span>«</span></li>
<li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
...
</ul>
</nav>

尺寸
<nav><ul class="pagination pagination-lg">...</ul></nav>    //large
<nav><ul class="pagination">...</ul></nav>                  //default
<nav><ul class="pagination pagination-sm">...</ul></nav>    //small

翻页，以两个按钮来实现上一页&下一页功能
<nav>
<ul class="pager">    //默认两个按钮是居中对齐
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>

<nav>
<ul class="pager">                                          //两端对齐
<li class="previous"><a href="#">← Older</a></li>    //左浮动
<li class="next"><a href="#">Newer →</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>

十一、徽章
可以很醒目的展示新的或未读的信息条目。
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>

十二、巨幕
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

十三、页头  .page-header
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>

十四、缩略图
结合栅格系统控制宽度，展示带链接的图片
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">    //.thumbnail
<img data-src="holder.js/100%x180" alt="...">
</a>
</div>
...
</div>

可以把任何类型的 HTML 内容，例如标题、段落或按钮，加入缩略图组件内。
<div class="row">
<div class="col-xs-6 col-md-3">
<div class="thumbnail">
<a href="#">
<img src="bootstrap/img/glyphicons-halflings.png" alt="...">
</a>
<div class="caption">    //自定义部分.caption
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>

十五、警告框
<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">    //需添加.alert-dismissible
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>    //参考辅助类中关闭按钮，注意button添加data-dismiss="alert"以保证所有设备上的行为正确
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

警告框中的链接  .alert-link
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>

十六、进度条
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">

c433
60%
</div>
</div>

进度数值较低时：
建议为进度标签添加一个 min-width: 20px; 属性。

多种颜色
默认深蓝色，.progress-bar-success 绿  .progress-bar-info 浅蓝  .progress-bar-warning 黄  .progress-bar-danger 红

条纹效果
.progress-bar-striped

动画效果
.progress-bar-striped & .active

堆叠效果
多个.progress-bar置于同一个.progress中
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>

十七、媒体对象
允许在一个内容块的左边或右边展示一个多媒体内容（图像、视频、音频）（就像博客评论或 Twitter 消息等）。
<div class="media">    //媒体对象
<a class="media-left media-middle" href="#">    //左边的多媒体  位置.media-middle .media-bottom
<img src="..." alt="...">
</a>
<div class="media-body">    //右边的内容
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>

媒体对象列表
<ul class="media-list">
<li class="media">
<a class="media-left" href="#">
<img src="..." alt="...">
</a>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>

十八、列表组
<ul class="list-group">
<li class="list-group-item"><span class="badge">14</span>Cras justo odio</li>    //徽章排版时自动置于右边
<li class="list-group-item"><span class="badge">14</span>Dapibus ac facilisis in</li>
<li class="list-group-item"><span class="badge">14</span>Morbi leo risus</li>
<li class="list-group-item"><span class="badge">14</span>Porta ac consectetur ac</li>
<li class="list-group-item"><span class="badge">14</span>Vestibulum at eros</li>
</ul>

链接
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

情境类
.list-group-item-success  .list-group-item-info  .list-group-item-warning  .list-group-item-danger

定制内容
列表组中的每个元素都可以是任何 HTML 内容
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>

十九、面板
<div class="panel panel-info">   //.panel-info .etc可带有情景效果
<div class="panel-heading">Panel heading without title</div>    //.panel-heading 标题
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>    //.panel-footer 脚注，不会从情景中继承颜色效果
</div>

二十、Well
把 Well 用在元素上，能有嵌入（inset）的的简单效果。
<div class="well">...</div>
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>