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>

?

轉載于:https://www.cnblogs.com/daheblog/p/6198351.html

總結

以上是生活随笔為你收集整理的Bootstrap的全局css样式部分的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。