全局CSS樣式
一、概覽
需要將頁面設置爲 HTML5 文檔類型
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
在移動設備瀏覽器上，通過爲視口（viewport）設置 meta 屬性爲 user-scalable=no 可以禁用其縮放（zooming）功能。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
.container 類用於固定寬度並支持響應式佈局的容器。
<div class="container">
...
</div>
.container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器。
<div class="container-fluid">
...
</div>
二、柵格系統
.container 最大寬度 None （自動） 750px 970px 1170px
類前綴 .col-xs- .col-sm- .col-md- .col-lg-
移動設備和桌面屏幕
.col-xs-12 .col-md-8 .col-xs-6 .col-md-4
手機、平板、桌面
.col-xs-12 .col-sm-6 .col-md-8 .col-xs-6 .col-md-4
列偏移
.col-md-4 .col-md-4 .col-md-offset-4
三、排版
在標題內還可以包含 <small> 標籤或賦予 .small 類的元素，可以用來標記副標題。
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
通過添加 .lead 類可以讓段落突出顯示。
<p class="lead">...</p>
高亮文本
You can use the mark tag to <mark>highlight</mark> text.
被刪除的文本
<del>This line of text is meant to be treated as deleted text.</del>
等同於
無用文本
<s>This line of text is meant to be treated as no longer accurate.</s>
插入文本
<ins>This line of text is meant to be treated as an addition to the document.</ins>
等同於
帶下劃線的文本
<u>This line of text will render as underlined</u>
着重
<strong>rendered as bold text</strong>
斜體
<em>rendered as italicized text</em>
對齊
<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>
改變大小寫
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p> //首字母大寫
縮略語
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr> //.initialism讓字體變得更小
地址
<address>
<strong>Twitter, Inc.</strong><br> //需要<br>換行
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>
引用
<blockquote class="blockquote-reverse"> //默認是靠左對其，加上.blockquote-reverse後靠右
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer> //添加引用出處
</blockquote>
無樣式列表
<ul class="list-unstyled">
<li>...</li>
</ul>
內聯列表，將所有元素放置於同一行。
<ul class="list-inline">
<li>...</li>
</ul>
水平排列的描述
<dl class="dl-horizontal"> //默認是豎直方向排列dt與dd
<dt>...</dt>
<dd>...</dd>
</dl>
四、代碼
內聯代碼
For example, <code><section></code> should be wrapped as inline.
用戶輸入
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
代碼塊
<pre><p>Sample text here...</p></pre>
變量
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
程序輸出
<samp>This text is meant to be treated as sample output from a computer program.</samp>
五、表格
基本 爲任意 <table> 標籤添加 .table 類可以爲其賦予基本的樣式 — 少量的內補（padding）和水平方向的分隔線。
<table class="table">
...
</table>
條紋狀表格
<table class="table table-striped">
...
</table>
帶邊框的表格
<table class="table table-bordered">
...
</table>
鼠標懸停
<table class="table table-hover">
...
</table>
緊縮表格
<table class="table table-condensed">
...
</table>
狀態類可以爲行或單元格設置顏色。
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
響應式表格 將任何 .table 元素包裹在 .table-responsive 元素內，即可創建響應式表格
<div class="table-responsive">
<table class="table">
...
</table>
</div>
六、表單
基本實例
.form .form-group .sr-only .form-control p.help-block .radio .checkbox .btn .btn-default .btn-success .etc
所有設置了 .form-control 類的 <input>、<textarea> 和 <select> 元素都將被默認設置寬度屬性爲 width: 100%;。
.sr-only可將該類隱藏
<form role="form">
<div class="form-group">
<label class="sr-only" for="userName">User Name</label>
<input id="userName" class="form-control" placeholder="username..." type="text">
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input id="pwd" class="form-control" placeholder="password..." type="password">
</div>
<div class="form-group">
<label for="file">File Input</label>
<input id="file" type="file" value="search...">
<p class="help-block">for .txt only</p>
</div>
<div class="form-group radio">
<label for="male"><input type="radio" id="male" name="sex" class="radio">male</label>
<label for="female"><input type="radio" id="female" name="sex" class="radio">female</label>
</div>
<div class="form-group checkbox">
<label><input type="checkbox">select me</label>
</div>
<button type="button" class="btn btn-success">Submit</button>
</form>
內聯表單
只適用於視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單摺疊）。
一定要添加 label 標籤
<form class="form-inline" role="form">
...
</form>
水平排列的表單
爲表單添加 .form-horizontal 類，並聯合使用 Bootstrap 預置的柵格類，將改變 .form-group 的行爲當做.row功能
<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>
支持的控件
輸入框
text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。
文本域
<textarea class="form-control" rows="3"></textarea>
多選和單選框
.disabled禁用
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
.checkbox-inline 或 .radio-inline 類可以使這些控件排列在一行。
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
下拉列表
multiple屬性可多選
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
靜態控件
在表單中將一行純文本和 label 元素放置於同一行，爲 <p> 元素添加 .form-control-static 類即可。
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
...
</form>
.disabled禁用
<fieldset> 設置 disabled 屬性,可以禁用 <fieldset> 中包含的所有控件。 注意此時<a> 標籤的鏈接功能不受影響，需手動通過js代碼禁用
校驗狀態，展現顯著顏色
添加 .has-warning、.has-error 或 .has-success 類到這些控件的父元素即可。
任何包含在此元素之內的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗狀態的樣式。
<form class="form-horizontal" role="form">
<div class="form-group has-success has-feedback"> //設置.has-feedback類，並結合適當的字體圖標，給輸入框添加額外的圖標
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3">
<span class="glyphicon glyphicon-ok form-control-feedback"></span> //額外的圖標所需的span
</div>
</div>
</form>
控件尺寸
基本的豎直方向的表單通過.input-lg或.input-sm來設置控件高度
<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>
當水平排列時.form-horizontal，給外層.form-group添加.form-group-lg 或 .form-group-sm 類，以保證label框與放大的input等控件框水平對齊
<form class="form-horizontal" role="form">
<div class="form-group form-group-lg">
...
七、按鈕
預定義樣式
<!-- 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 可以獲得不同尺寸的按鈕。
.btn-block 類可以將其拉伸至父元素100%的寬度
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
激活與禁用狀態
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a> //用超鏈接模擬button按鈕樣式
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a> //同樣禁用後仍可鏈接，需通過js禁用功能
八、圖片
響應式圖片 .img-responsive
<img src="..." class="img-responsive" alt="Responsive image">
圖片形狀
<img src="..." alt="..." class="img-rounded"> //圓角矩形
<img src="..." alt="..." class="img-circle"> //圓形
<img src="..." alt="..." class="img-thumbnail"> //帶邊框的縮略圖
九、輔助類
文本顏色
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>
背景底色
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
關閉按鈕
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
三角符號
<span class="caret"></span>
快速浮動
<div class="pull-left">...</div>
<div class="pull-right">...</div>
block居中
<div class="center-block">...</div>
Bootstrap學習筆記之全局CSS樣式（一）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章