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>