bootstrap知識點總結-1

bootstrap
主要分爲四個部分：
 (1)全局CSS樣式
容器、按鈕、圖片、文本、背景、浮動、排版、柵格系統、表格、表單
 (2)組件
  Glyphicons、下拉菜單、按鈕組、導航、導航條、路徑導航、分頁、標籤、徽章、巨幕、頁頭、縮略圖、警告框、進度條、媒體對象、列表組、面板、具有響應式特性的嵌入內容、Well
 (3)js插件
  過渡、模態框、下拉菜單、滾動監聽、標籤頁、工具提示、彈出框、警告框、按鈕、Collapse、Carousel、Affix
 (4)定製

nav:
navbar navbar-inverse navbar-fixed-top navbar-header
btn:
.btn-default .btn-danger .btn-info .btn-primary .btn-success .btn-warning .btn-lg .btn-sm .btn-xs .btn-block .btn-link
img:
.img-responsive:響應式圖片max-width:100%; display:block;

.img-circle:圖片顯示爲圓形
.img-rounded:圓角圖片
.img-thumnail:縮略圖片（會添加圖片邊框）
text:
.text-primary
.text-danger
.text-info
.text-success
.text-warning
.text-left 文本左對齊
.text-right 文本右對齊
.text-center 文本居中對齊
.text-justify 文本調整對齊(兩端對齊)
.text-lowercase文本中每個單詞都小寫
.text-uppercase文本中每個單詞都大寫
.text-capitalize文本中每個單詞首字母大寫


.bg-primary
.bg-danger
.bg-info
.bg-success
.bg-warning
.caret 插入符號(向下的小三角)，可以使用文本顏色控制三角的顏色
塊級元素:
.pull-left 讓區塊元素向左浮動(自動變爲行內塊)   float:left   
.pull-right 讓區塊元素向右浮動(自動變爲行內塊)   float:right 
.center-block 讓區塊元素在父元素中水平居中   margin-left/right: auto;
.clearfix clear: both
.show  display: auto;
.hide  display: none;
.sr-only  Screen Reader Only 僅屏幕閱讀器可見
全局CSS樣式——與代碼相關的標籤
<code></code> 以粉色底粉色字突出顯示一段代碼
<kbd></kbd> 以黑底白字突出顯示一個鍵盤擊鍵操作
<pre></pre> 以灰底灰框原始格式顯示一段代碼
.pre-scrollable聲明pre元素可以豎直方向上顯現滾動條
<var></var> 以斜體形式顯示一個代碼中的變量名
<samp></samp> 以特殊字體顯示一段代碼的輸出結果


.h1~.h6
<small></small>用在h1~h6內部，顯示一個副標題
.small
.lead 把文字顯示爲導讀效果
<blockquote></blockquote>
.blockquote-reverse
<footer></footer>


<ul><li></li></ul>
<ol><li></li></ol>
.list-unstyled去除列表項前的圓點/數字
.list-inline 將所有的li顯示在一行中並添加填充


<dl>
<dt></dt> Definition Title/Type
<dd></dd> Definition Detail/Description
</dl>
.dl-horizontal定義列表水平顯示


柵格系統：
<div class="container/container-fluid">
<div class="row">
<div class="col"></div>
<div class="col"></div>
</div>
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>


使用此佈局方式，應注意：
 (1).row必須放在.container/.container-fluid內部
 (2)一個.row默認會分爲12個等寬的列
 (3)一個.row中只能放置用於佈局的.col-lg-*  .col-md-*  .col-sm-*  .col-xs-*列：
 (4).col-lg-*設置只對lg的屏幕有效
.col-md-*設置只對md/lg的屏幕有效
.col-sm-*設置對sm/md/lg的屏幕有效
.col-xs-*設置對xs/sm/md/lg的屏幕都有效
 (5)若某中屏幕下某個元素無需顯示，可以使用
.hidden-lg  .hidden-md   .hidden-sm   .hidden-xs
全局CSS樣式——表格
 .table
 .table-bordered表格帶外框
 .table-condensed 表格中的單元格變緊湊
 .table-striped 表格中的數據行隔行變色
 .table-hover 表格中的數據行懸停變色
 .table-responsive用於<table>的父元素！當表格一行中的內容顯示不下時，會顯示橫向的滾動條。


 .active 用於tr/td，背景色變爲“激活色”(淺灰色)
 .success 用於tr/td，背景色變爲“成功色”(色)
 .danger 用於tr/td，背景色變爲“危險色”(色)
 .warning 用於tr/td，背景色變爲“警告色”(色)
 .info 用於tr/td，背景色變爲“提示色”(色)
全局CSS樣式——表單
.form-group  用於input和label的共同父元素  margin-bottom: 15px;
.form-group-lg  大號的輸入框
.form-group-sm小號的輸入框
.checkbox 用於<input type="checkbox">的父容器(div)上！對其中的label文字作了設定
.checkbox-inline
.radio 用於<input type="radio">的父容器(div)上！對其
中的label文字作了設定
.radio-inline
.form-inline  用於form元素，實現輸入域處於一行內


<form class="[] | form-horizontal | form-inline">
 <div class="form-group  has-error|has-success|has-warning">
<label class="control-label col-*-*" for=""></label>
<input class="form-control">
<p class="help-block">用戶名已被佔用</p>
 </div>
</form>
Bootstrap組件(Component)——字體圖標
 提示：Bootstrap官方借用了Glyphicon Halflings提供的字體圖標文件，無需使用圖片就可以文字的形式顯示出260+圖標——可以任意的放大縮小、或者字體顏色。


Bootstrap組件——下拉菜單
 注意！下拉菜單必需至少三級結構：
 <div id="父級容器">
<button>觸發元素</button>
<div>目標元素</div>
 </div>


5.Bootstrap組件——按鈕組
 有兩種按鈕組：
.btn-group 水平放置的多個按鈕
.btn-group-vertical豎直放置的多個按鈕
 每一種按鈕組又可以聲明大小號：
.btn-group-lg
.btn-group-sm
.btn-group-xs  
.btn-group.btn-group-justified  對於使用a實現的按鈕組可以實現佔滿一整行的效果。
6.Bootstrap組件——輸入框組
 <div class="input-group">
<span class="input-group-addon">請輸入：</span>
<input class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">搜索</button>
</span>
 </div>