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" 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%;">
      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>