Yii2框架默認採用了bootstrap作為CSS風格，各種視圖類組件都如此。之前一直採用默認風格，並在必要的時候加入或者改動一下class來達到目的。但在改版Yii1.1的orange項目時。發現之前也是套的模板，事實上沒有好好去理解一下bootstrap的那套規則。所以順便大致梳理一下吧。以basic模板為例，對比http://v3.bootcss.com/css/ 上的內容進行。
看layouts/main.php。Yii2默認以HTML5文檔類型進行的了。但語言默認是en-US。所以要改。在config/web.php中加入'language' => 'zh-CN', 到$config中
已經有viewport這個meta項。已經支持移動設備優先原則
layouts/main.php中有一些beginXxx()。endXxx()方法（如$this->beginPage()，$this->endBody()）以及$this->head()的調用。查看yii\web\View類文檔，發現它們都是一個mark，用來標記位置而已。AppAsset::register($this); 實際調用基類 yii\web\AssetBundle的register方法，將項目模板默認生成的assets/AppAsset.php中定義的CSS、JS及其相關依賴注冊到視圖$this （所謂“注冊”。就是一種公布，一種有序的插入，這里之前的那一個個mark應該起作用了）
AppAsset類默認定義的CSS是 css/site.css，由於$depends有 yii\bootstrap\BootstrapAsset，所以，實際在head部分插入的CSS類似例如以下（相應$this->head()）
<link href="/orange_yii2/web/assets/6cdf1901/css/bootstrap.css" rel="stylesheet">
<link href="/orange_yii2/web/css/site.css" rel="stylesheet"></head>
模板給出的DOM結構body部分例如以下圖所看到的（當中div.xxx相應的是各控制器所渲染的部分）：
從site.css看，模板自己定義的CSS樣式並不多。即絕大部分CSS都是沿用了bootstrap默認的那些。
所以，關鍵是去理解bootstrap本身。
-----------------------------------------------------刪格原理-----------------------------------------------------------
基本原則：
頁面內容和柵格系統須要套一個容器，有2種容器：.container（固定寬度，支持響應式）和.container-fluid（100%寬度，占領viewport所有）
刪格由行、列形成。列組成行，行的直接子元素必須時列，一行最多12列，一系列提前定義的類（如.row。.col-xs-4）用於高速創建刪格布局
列間距由列的padding屬性設置，.row元素的margin設置負值能夠抵消.container的padding屬性的值
每行都要按12列思考。比如，須要等寬的3列，能夠用3個.col-xs-4，即每4列合並成1列的。超過12列的，須要把多余的列另起一行安排。
媒體查詢：
對超小屏幕，是默認的；對於其它各種屏幕，使用媒體查詢確定大小的分界點
響應式列重置：
對於某些內容，希望在小屏幕上占領比大屏幕上很多其它列，能夠類似例如以下
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>
列偏移：
使用類似col-md-offset-4 那樣的類，能夠將列向右偏移，效果上就好像某些列空出來了
列嵌套：
所謂列嵌套，即列中包括列，事實上是行中包括的列元素又是一行，即行嵌套行
列排序：
通過使用 .col-md-push-* 和 .col-md-pull-* 類來改變列的順序
------------------------------------排版---------------
標題同類樣式：
實際標題用元素h1到h6。副標題用small，對於內聯的非標題元素。須要使用標題一樣的樣式。用類.h1到.h6，副標題用.small
頁面主體：
全局的font-size=14px，line-height為1.428。作用於body和全部p元素。p元素的margin-bottom為1/2行高（即 14px*1.428/2 = 10px）。突出性段落用.lead類。
內聯文本：
用mark標簽高亮文本，刪除文本用del標簽，不用的文本用s標簽。插入的文本用ins標簽，下划線用u標簽。小號文本用small標簽或.small類。粗體強調用strong標簽，斜體強調用em標簽，（b和i分別用於粗體和斜體時，沒有強調意味）。
文本對齊：
<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>
縮略語與懸停提示：
<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>
列表：
有序列表ol和無序列表ul的一般使用方法就是直接元素。
無樣式列表是帶.list-unstyled類的ul，內聯（無序）列表是帶.list-inline類的ul。基本描寫敘述列表類似例如以下：
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
水平排列的描寫敘述列表是帶.dl-horizontal類的dl，左側短語太長時能夠用text-overflow屬性進行截斷。
-------------------代碼------------------
內聯代碼用code標簽。代碼塊用pre標簽，變量用var標簽，用戶輸入用kbd標簽，程序輸出用samp標簽
-----------------------表格--------------------------
table元素沒有默認bootstrap樣式，用類.table作為基本樣式（其它樣式在此基礎上附加）。
加入.table-striped樣式，能夠形成奇偶間隔的斑馬狀風格。
加入table-bordered類。表格帶邊框。
加入table-hover類，能夠實現鼠標懸停響應（類似高亮）。加入 .table-condensed 類能夠讓表格更加緊湊。單元格內部降低。不管td還是tr，都能夠用類active、success、info、danger、warning來指示某種狀態。要創建響應式表格（在小屏幕設備上水平滾動），方法是給table元素外套一個容器，類似例如以下：
<div class="table-responsive">
<table class="table">
...
</table>
</div>
----------------------------表單-------------------------
表單內的input、textarea、select使用類.form-control將擁有默認的控件風格（width：100%），常規做法是將控件和相應的它之前的label包含在類別為.form-group的div中（將有比較好的布局）
給form附加.form-inline類，將使表單內的控件橫向排列（表現為inline-block，內容左對齊，可能須要手動指定寬度。雖然label不顯示。但不應當將其省略）
給form附加.form-horizontal類。將使表單水平排列（label和控件在同一個行，.form-group的行為被改變，不須要額外的.row類，但須要聯合使用提前定義的刪格類來實現布局，控件相應的label用.control-label實現更好的外觀）
輸入框經常加入placeholder屬性。全部HTML5輸入控件都被支持
textarea往往加入rows屬性
checkbox和radio的項應當包裹在label中，checkbox和radio中禁用的項，能夠附加disabled屬性。同一時候，附加.disabled類能夠使鼠標懸停時呈現禁用狀態的圖標
給checkbox和radio的label附加.checkbox-inline和.radio-inline類，能夠橫排選項
給select加入multiple屬性，能夠同一時候顯示多個選項
假設要用靜態文本作為控件，則使用p元素，並附加.form-control-static類
輸入框的焦點狀態，通過設置相應輸入框的CSS屬性實現：移除outline（設為0）。並賦予box-shadow屬性
禁用輸入框給input加入disabled屬性，而禁用fieldset包裹的全部控件。就給它加入disabled屬性（有一定兼容性問題）
僅僅讀輸入框能夠加入readonly屬性，其樣式也是禁用的
表單控件呈現不同的校驗狀態，就是給div.form-group附加.has-success、.has-warning、.has-error等類（同一時候附加.has-feedback類，將顯示額外的圖標）
通過 .input-lg 類似的類能夠為控件設置高度，通過 .col-lg-* 類似的類能夠為控件設置寬度
水平排列的表單組的尺寸，通過給div.form-group附加.form-group-lg、.form-group-sm等類來高速設置其內的label和控件
用柵格系統中的列（div.col-xs-3等）包裹輸入框或其不論什么父元素。都可非常easy的為其設置寬度
表單控件的輔助文本用span.help-block （比如給出錯誤提示用）
--------------------------------------button-----------------------------------------
基本使用方法，給button元素附加默認的btn類，然后依據須要呈現的情景。附加btn-default、btn-primary、btn-success等類
button的尺寸。能夠附加.btn-lg、.btn-sm、.btn-xs類來控制
給button附加.btn-block類。能夠將其拉伸到父元素的100%寬度，而且表現為塊元素
button元素表示的button的激活狀態。是偽類:active實現的（不須要額外加入），a元素表示的button的激活狀態。通過附加.active類實現，但假設須要達到外觀一致。也能夠給button元素的button加入.active類
button元素加入disabled屬性，能夠禁用它（button的背景設置opacity屬性能夠達到不可點擊的顯示效果），a元素表示的button，通過附加.disabled類來達到禁用
雖然button、a、input元素都能夠應用btn、btn-XXX等按鈕類。但為了跨瀏覽器表現，盡量使用button元素
--------------------------------------------圖片------------------------------
給img加.img-responsive類能夠讓圖片支持響應式布局（本質上是max-width:100%;height:auto;，從而圖片在父元素中有更好的伸縮）
給img附加.img-rounded、.img-circle、.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：
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
指示下拉的三角符號：
<span class="caret"></span>
高速左右float:（不適用於導航條。導航條應當用.navbar-right和.navbar-left類）
<div class="pull-left">...</div>
<div class="pull-right">...</div>
居中塊：
<div class="center-block">...</div> 實質上是display:block和左右margin為auto
清除float的元素：（給父元素加入.clearfix類，其實就是clear:both）
<div class="clearfix">...</div>
顯示與隱藏內容：
<div class="show">...</div>
<div class="hidden">...</div>
另外，還有.invisible類。它影響元素的可見性，但不影響display屬性（就可以能是顯示但不可見的）。從而仍然影響文檔流（仍然是流中的元素），.hidden類是包括了.invisible類的。由於隱藏起來時當然是希望不可見的。
屏幕閱讀器與鍵盤導航內容（對其它設備隱藏）：
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
用背景圖替換元素文本內容：
<h1 class="text-hide">Custom heading</h1>
-----------------------------------響應式工具----------------------------------------
針對不同屏幕隱藏或顯示內容：能夠獨立或聯合使用類.visible-XX-YY或.hidden-XX（當中。XX能夠是xs、sm、md、lg。YY能夠是block、inline、inline-block）
針對打印機隱藏或者顯示的內容：.visible-print-YY和.hidden-print（當中，YY的可選值與上同）
以上是bootstrap框架的全局CSS知識的概要，bootstrap另外兩塊內容就是組件和插件。簡單理解，組件就是由CSS表達的展示性功能塊，而插件是JS+CSS表達的往往有動態效果或交互效果的功能塊。
組件須要時查一下 http://v3.bootcss.com/components/ 就可以，插件須要時查一下 http://v3.bootcss.com/javascript/ 就可以