Bootstrap的全局css樣式部分

Bootstrap的柵格系統：

 

1.

爲了合適的排列與內補，行（row）寫在.container或者.container-fluid中；

在手機上（超小屏幕<768px）:老是水平排列的， .container最大寬度自動，類前綴是.col-xs-，最大列寬（column）自動；

在平板上（小屏幕>=768px） :開始是堆疊，當大於闕值是爲水平排列；.container最大寬度750px；類前綴是.col-sm-；最大列寬62px；

在桌面顯示器上（中等屏幕>=992xp）:開始是堆疊，當大於闕值是爲水平排列；.container最大寬度970px；類前綴是.col-md-；最大列寬81px；

在大桌面顯示器（大屏幕>=1200px）:開始是堆疊，當大於闕值是爲水平排列；.container最大寬度1170px；類前綴是.col-lg-；最大列寬97px；

 

示例：

<div class="row">

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div>

  <div class="col-md-1">.col-md-1</div></div><div class="row">

  <div class="col-md-8">.col-md-8</div>

  <div class="col-md-4">.col-md-4</div></div><div class="row">

  <div class="col-md-4">.col-md-4</div>

  <div class="col-md-4">.col-md-4</div>

  <div class="col-md-4">.col-md-4</div></div><div class="row">

  <div class="col-md-6">.col-md-6</div>

  <div class="col-md-6">.col-md-6</div></div>

當大屏幕時：

 

 

 

當小屏幕時：

 

 

 

 

 

2.

流式佈局：將最外面的包裹div類名.container修改成.container-fluid；就能將固定的柵格佈局轉換爲100%寬度佈局；

 

3.

使用.col-xs-和.col-md-；能夠針對超小屏幕與中等屏幕設備不讓列堆疊在一塊兒；

 

4.

列偏移：

使用類名.col-md-offset-*能夠將列向右偏移，經過*選擇器爲當前的元素增長了左邊距（margin）；

 

示例：

<div class="row">

  <div class="col-md-4">.col-md-4</div>

  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div></div><div class="row">

  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>

  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div></div><div class="row">

  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div></div>

 

 

 

 

 

 

5.列排序：

使用類名.col-md-push-*和.col-md-pull-* 改變列（column）的順序；

 

示例：

<div class="row">

  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>

  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div></div>

 

 

 

 

排版：

1.

除了正常的標題標籤h1--h6；還有類名.h1--.h6；樣式與標題標籤一致；

 

2.

Bootstrap將全局font-size設置爲14px，line-height設置爲1.428；p標籤還設置了10px的底部外邊距（margin）；能夠添加類名.lead讓段落突出顯示；額外插入的文本使用標籤<ins>;帶下劃線使用<u>標籤；小號文本使用small標籤，也可添加類名.small代替small標籤；

 

3.

使用類名.text-left與.text-center與.text-right與.text-justify與.text-nowrap將文字從新對齊；

示例：

<p class="text-left">Left aligned text.</p>

<p class="text-center">Center aligned text.</p>

<p class="text-right">Right aligned text.</p>

<p class="text-justify">Justified text.</p>

<p class="text-nowrap">No wrap text.</p>

 

 

 

 

 

使用類名.text-lowercase與.text-uppercase與.text-capotalize改變文本的大小寫；

 

 

示例：

<p class="text-lowercase">Lowercased text.</p>

<p class="text-uppercase">Uppercased text.</p>

<p class="text-capitalize">Capitalized text.</p>

 

 

 

 

4.

縮略語：使用標籤abbr能夠設置把鼠標懸停在縮略語上顯示完整內容；須要爲abbr設置title屬性；首字母縮略語：添加類名.initialism ，可讓font-size變得稍微小一些；

 

5.

列表：添加類名.dl-horizontal可讓標題與描述排列在一行；

 

示例：

<dl class="dl-horizontal">

  <dt>...</dt>

  <dd>...</dd>

</dl>

 

 

 

 

 

表格：

爲表格標籤添加類名.table能夠爲其賦予基本的樣式，例如少許的padding和水平方向的分割線；

1.

經過添加類名.table-striped能夠給tbody標籤以內的每行添加斑馬條紋樣式；可是這個功能不支持ie8；

示例：

<table class="table table-striped">
    <thead>
    <tr>
        <th>表一</th>
        <th>表二</th>
        <th>表三</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>內容1</td>
        <td>內容一</td>
        <td>內容一</td>
    </tr>
    <tr>
        <td>內容二</td>
        <td>內容二</td>
        <td>內容二</td>
    </tr>
    <tr>
        <td>內容三</td>
        <td>內容三</td>
        <td>內容三</td>
    </tr>
    </tbody>

</table>

 

 

 

 

 

 

添加類名.table-bordered能夠給表格和其中的每一個單元格添加邊框；

 

示例：

 

 

 

添加類名.table-hover可讓每一行對鼠標懸停狀態作出響應；

添加類名.table-condensed可讓表格更加緊湊，單元格中的內部padding均會減半；

 

2.狀態類

經過添加類名爲行或單元格添加顏色；

.active：鼠標懸停在行或單元格上時所設置的顏色；

.success：標示成功或積極的動做；

.info：標示普通的提示信息或動做；

.warning;標示警告或須要用戶注意；

.danger；標示危險或潛在的帶來負面影響的動做；

 

3.響應式表格；

將表格.table元素包裹在.table-responsive元素內，便可建立響應式表格，會在小屏幕上（小於768px）水平滾動，當屏幕大於768px寬度時，水平滾動條消失；

 

 

表單：

1.全部設置了.form-control類的input，textarea和select元素都將有默認屬性寬爲100%;

將lable元素和前面提到的控件包裹在.form-ground中能夠得到最好的排列；

示例：

<form role="form">

  <div class="form-group">

    <label for="exampleInputEmail1">Email address</label>

    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">

  </div>

  <div class="form-group">

    <label for="exampleInputPassword1">Password</label>

    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">

  </div>

  <div class="form-group">

    <label for="exampleInputFile">File input</label>

    <input type="file" id="exampleInputFile">

    <p class="help-block">Example block-level help text here.</p>

  </div>

  <div class="checkbox">

    <label>

      <input type="checkbox"> Check me out

    </label>

  </div>

  <button type="submit" class="btn btn-default">Submit</button></form>

 

 

 

 

內聯表單：

爲form元素添加.form-inline類可使其內容左對齊而且表現爲inline-block級別的控件，可是隻適用於（viewport）至少在768px寬度時（寬度在小會使表單摺疊）；

須要手動設置寬度：在內聯表單將輸入框和單選/多選框控件默認寬度設置爲width：auto，所以，多個控件能夠排列在同一行。根據需求可能須要一些額外的定製優化組件；

必定要添加lable標籤：若是不加屏幕閱讀器將沒法識別，對於內聯表單，可經過lable設置

.sr-only類隱藏；

 

示例：

<form class="form-inline" role="form">

  <div class="form-group">

    <label class="sr-only" for="exampleInputEmail2">Email address</label>

    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">

  </div>

  <div class="form-group">

    <div class="input-group">

      <div class="input-group-addon">@</div>

      <input class="form-control" type="email" placeholder="Enter email">

    </div>

  </div>

  <div class="form-group">

    <label class="sr-only" for="exampleInputPassword2">Password</label>

    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">

  </div>

  <div class="checkbox">

    <label>

      <input type="checkbox"> Remember me

    </label>

  </div>

  <button type="submit" class="btn btn-default">Sign in</button></form>

 

 

 

 

水平列表的表單：

爲表單添加類名.form-horizontal，；

 

示例：

<form class="form-horizontal" role="form">

  <div class="form-group">

    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>

    <div class="col-sm-10">

      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">

    </div>

  </div>

  <div class="form-group">

    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>

    <div class="col-sm-10">

      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <div class="checkbox">

        <label>

          <input type="checkbox"> Remember me

        </label>

      </div>

    </div>

  </div>

  <div class="form-group">

    <div class="col-sm-offset-2 col-sm-10">

      <button type="submit" class="btn btn-default">Sign in</button>

    </div>

  </div></form>

 

 

 

 

若是須要在表單中將一行純文本和label元素放置於同一行，爲p元素添加.form-control-staticl類；

 

爲輸入框輸入disabled屬性能夠防止用戶輸入，並能對外觀作一些修改，使其更直觀；

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

 

被禁用的fieldset：

爲fieldset設置disabled屬性，能夠禁用包含的全部控件；（可是a標籤的鏈接功能不受影響）；

<form role="form">

  <fieldset disabled>

    <div class="form-group">

      <label for="disabledTextInput">Disabled input</label>

      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">

    </div>

    <div class="form-group">

      <label for="disabledSelect">Disabled select menu</label>

      <select id="disabledSelect" class="form-control">

        <option>Disabled select</option>

      </select>

    </div>

    <div class="checkbox">

      <label>

        <input type="checkbox"> Can't check this

      </label>

    </div>

    <button type="submit" class="btn btn-primary">Submit</button>

  </fieldset></form>

 

 

 

爲輸入框設置readonly屬性能夠禁止用戶輸入，而且輸入框的樣式也是禁用狀態；

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

 

控制尺寸：

經過.input-lg相似的類能夠爲控件設置高度，經過.col-lg-*相似的類能夠爲控件設置寬度；

<input class="form-control input-lg" type="text" placeholder=".input-lg">

<input class="form-control" type="text" placeholder="Default input">

<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select><select class="form-control">...</select>

<select class="form-control input-sm">...</select>

 

 

 

 

調整列（column）尺寸：

用柵格系統中的列包裹輸入框或其任何父元素，都能設置寬度；

 

<div class="row">

  <div class="col-xs-2">

    <input type="text" class="form-control" placeholder=".col-xs-2">

  </div>

  <div class="col-xs-3">

    <input type="text" class="form-control" placeholder=".col-xs-3">

  </div>

  <div class="col-xs-4">

    <input type="text" class="form-control" placeholder=".col-xs-4">

  </div>

</div>

 

 

 

 

 

 

 

按鈕：

 

<!-- Standard button -->

<button type="button" class="btn btn-default">Default</button>

 

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->

<button type="button" class="btn btn-primary">Primary</button>

 

<!-- Indicates a successful or positive action -->

<button type="button" class="btn btn-success">Success</button>

 

<!-- Contextual button for informational alert messages -->

<button type="button" class="btn btn-info">Info</button>

 

<!-- Indicates caution should be taken with this action -->

<button type="button" class="btn btn-warning">Warning</button>

 

<!-- Indicates a dangerous or potentially negative action -->

<button type="button" class="btn btn-danger">Danger</button>

 

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->

<button type="button" class="btn btn-link">Link</button>

 

 

 

 

 

咱們能夠同過類名：.btn-lg，.btn-sm或.btn-xs得到不一樣尺寸的按鈕；

 

 

 

禁用狀態

經過爲按鈕的背景設置 opacity 屬性就能夠呈現出沒法點擊的效果。

 

button 元素

爲 <button> 元素添加 disabled 屬性，使其表現出禁用狀態。

 

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>

<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Ps:當ie9及更低版本中按鈕會是灰色並帶有陰影，目前沒法解決；

 

圖片：

響應式圖片：

添加類名.img-responsive可讓圖片支持響應式佈局；

Ps：

在 Internet Explorer 8-10 中，設置爲 .img-responsive 的 SVG 圖像顯示出的尺寸不勻稱。爲了解決這個問題，在出問題的地方添加 width: 100% \9; 便可。Bootstrap 並無自動爲全部圖像元素設置這一屬性，由於這會致使其餘圖像格式出現錯亂。

 

改變圖片形狀：

 

<img src="..." alt="..." class="img-rounded">

<img src="..." alt="..." class="img-circle">

<img src="..." alt="..." class="img-thumbnail">

 

 

 

 

 

 

快速浮動：

向左浮動或向右浮動須要添加類名pull-left或pull-right

<div class="pull-left">...</div>

<div class="pull-right">...</div>