Yii2框架默認(rèn)采用了bootstrap作為CSS風(fēng)格，各種視圖類組件都如此。之前一直采用默認(rèn)風(fēng)格，并在必要的時(shí)候添加或者修改一下class來(lái)達(dá)到目的。但在改版Yii1.1的orange項(xiàng)目時(shí)，發(fā)現(xiàn)之前也是套的模板，其實(shí)沒(méi)有好好去理解一下bootstrap的那套規(guī)則，所以順便大致梳理一下吧。以basic模板為例，對(duì)照http://v3.bootcss.com/css/ 上的內(nèi)容進(jìn)行。

看layouts/main.PHP，Yii2默認(rèn)以HTML5文檔類型進(jìn)行的了，但語(yǔ)言默認(rèn)是en-US，所以要改，在config/web.php中添加'language' => 'zh-CN', 到$config中

已經(jīng)有viewport這個(gè)meta項(xiàng)，已經(jīng)支持移動(dòng)設(shè)備優(yōu)先原則

layouts/main.php中有一些beginXxx()，endXxx()方法（如$this->beginPage()，$this->endBody()）以及$this->head()的調(diào)用，查看yii\web\View類文檔，發(fā)現(xiàn)它們都是一個(gè)mark，用來(lái)標(biāo)記位置而已。AppAsset::register($this); 實(shí)際調(diào)用基類 yii\web\AssetBundle的register方法，將項(xiàng)目模板默認(rèn)生成的assets/AppAsset.php中定義的CSS、JS及其相關(guān)依賴注冊(cè)到視圖$this （所謂“注冊(cè)”，就是一種發(fā)布，一種有序的插入，這里之前的那一個(gè)個(gè)mark應(yīng)該起作用了）

AppAsset類默認(rèn)定義的CSS是 css/site.css，因?yàn)?depends有 yii\bootstrap\BootstrapAsset，所以，實(shí)際在head部分插入的CSS類似如下（對(duì)應(yīng)$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結(jié)構(gòu)body部分如下圖所示（其中div.xxx對(duì)應(yīng)的是各控制器所渲染的部分）：

從site.css看，模板自定義的CSS樣式并不多，即絕大部分CSS都是沿用了bootstrap默認(rèn)的那些。所以，關(guān)鍵是去理解bootstrap本身。

-----------------------------------------------------刪格原理-----------------------------------------------------------

基本原則：

頁(yè)面內(nèi)容和柵格系統(tǒng)需要套一個(gè)容器，有2種容器：.Container（固定寬度，支持響應(yīng)式）和.container-fluid（100%寬度，占據(jù)viewport全部）

刪格由行、列形成，列組成行，行的直接子元素必須時(shí)列，一行最多12列，一系列預(yù)定義的類（如.row，.col-xs-4）用于快速創(chuàng)建刪格布局

列間距由列的padding屬性設(shè)置，.row元素的margin設(shè)置負(fù)值可以抵消.container的padding屬性的值

每行都要按12列思考，例如，需要等寬的3列，可以用3個(gè).col-xs-4，即每4列合并成1列的。超過(guò)12列的，需要把多余的列另起一行安排。

媒體查詢：

對(duì)超小屏幕，是默認(rèn)的；對(duì)于其他各種屏幕，使用媒體查詢確定大小的分界點(diǎn)

響應(yīng)式列重置：

對(duì)于某些內(nèi)容，希望在小屏幕上占據(jù)比大屏幕上更多列，可以類似如下

<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 那樣的類，可以將列向右偏移，效果上就好像某些列空出來(lái)了

列嵌套：

所謂列嵌套，即列中包含列，其實(shí)是行中包含的列元素又是一行，即行嵌套行

列排序：

通過(guò)使用 .col-md-push-* 和 .col-md-pull-* 類來(lái)改變列的順序
------------------------------------排版---------------

標(biāo)題同類樣式：

實(shí)際標(biāo)題用元素h1到h6，副標(biāo)題用small，對(duì)于內(nèi)聯(lián)的非標(biāo)題元素，需要使用標(biāo)題一樣的樣式，用類.h1到.h6，副標(biāo)題用.small

頁(yè)面主體：

全局的font-size=14px，line-height為1.428，作用于body和所有p元素。p元素的margin-bottom為1/2行高（即 14px*1.428/2 = 10px）。突出性段落用.lead類。

內(nèi)聯(lián)文本：

用mark標(biāo)簽高亮文本，刪除文本用del標(biāo)簽，不用的文本用s標(biāo)簽，插入的文本用ins標(biāo)簽，下劃線用u標(biāo)簽，小號(hào)文本用small標(biāo)簽或.small類，粗體強(qiáng)調(diào)用strong標(biāo)簽，斜體強(qiáng)調(diào)用em標(biāo)簽，（b和i分別用于粗體和斜體時(shí)，沒(méi)有強(qiáng)調(diào)意味）。

文本對(duì)齊：

<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>

縮略語(yǔ)與懸停提示：

<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

列表：

有序列表ol和無(wú)序列表ul的一般用法就是直接元素。無(wú)樣式列表是帶.list-unstyled類的ul，內(nèi)聯(lián)（無(wú)序）列表是帶.list-inline類的ul，基本描述列表類似如下：

<dl>
<dt>...</dt>
<dd>...</dd>
</dl>

水平排列的描述列表是帶.dl-horizontal類的dl，左側(cè)短語(yǔ)太長(zhǎng)時(shí)可以用text-overflow屬性進(jìn)行截?cái)唷?/p>

-------------------代碼------------------

內(nèi)聯(lián)代碼用code標(biāo)簽，代碼塊用pre標(biāo)簽，變量用var標(biāo)簽，用戶輸入用kbd標(biāo)簽，程序輸出用samp標(biāo)簽

-----------------------表格--------------------------

table元素沒(méi)有默認(rèn)bootstrap樣式，用類.table作為基本樣式（其他樣式在此基礎(chǔ)上附加）。添加.table-striped樣式，可以形成奇偶間隔的斑馬狀風(fēng)格。添加table-bordered類，表格帶邊框。添加table-hover類，可以實(shí)現(xiàn)鼠標(biāo)懸停響應(yīng)（類似高亮）。添加 .table-condensed 類可以讓表格更加緊湊，單元格內(nèi)部減少。無(wú)論td還是tr，都可以用類active、success、info、danger、warning來(lái)指示某種狀態(tài)。要?jiǎng)?chuàng)建響應(yīng)式表格（在小屏幕設(shè)備上水平滾動(dòng)），方法是給table元素外套一個(gè)容器，類似如下：

<div class="table-responsive">
<table class="table">
...
</table>
</div>

----------------------------表單-------------------------

表單內(nèi)的input、textarea、select使用類.form-control將擁有默認(rèn)的控件風(fēng)格（width：100%），常規(guī)做法是將控件和對(duì)應(yīng)的它之前的label包括在類別為.form-group的div中（將有比較好的布局）

給form附加.form-inline類，將使表單內(nèi)的控件橫向排列（表現(xiàn)為inline-block，內(nèi)容左對(duì)齊，可能需要手動(dòng)指定寬度，盡管label不顯示，但不應(yīng)當(dāng)將其省略）

給form附加.form-horizontal類，將使表單水平排列（label和控件在同一個(gè)行，.form-group的行為被改變，不需要額外的.row類，但需要聯(lián)合使用預(yù)定義的刪格類來(lái)實(shí)現(xiàn)布局，控件對(duì)應(yīng)的label用.control-label實(shí)現(xiàn)更好的外觀）

輸入框常常添加placeholder屬性，所有HTML5輸入控件都被支持

textarea往往添加rows屬性

checkbox和radio的項(xiàng)應(yīng)當(dāng)包裹在label中，checkbox和radio中禁用的項(xiàng)，可以附加disabled屬性，同時(shí)，附加.disabled類可以使鼠標(biāo)懸停時(shí)呈現(xiàn)禁用狀態(tài)的圖標(biāo)

給checkbox和radio的label附加.checkbox-inline和.radio-inline類，可以橫排選項(xiàng)

給select添加multiple屬性，可以同時(shí)顯示多個(gè)選項(xiàng)

如果要用靜態(tài)文本作為控件，則使用p元素，并附加.form-control-static類

輸入框的焦點(diǎn)狀態(tài)，通過(guò)設(shè)置對(duì)應(yīng)輸入框的CSS屬性實(shí)現(xiàn)：移除outline（設(shè)為0），并賦予box-shadow屬性

禁用輸入框給input添加disabled屬性，而禁用fieldset包裹的所有控件，就給它添加disabled屬性（有一定兼容性問(wèn)題）

只讀輸入框可以添加readonly屬性，其樣式也是禁用的

表單控件呈現(xiàn)不同的校驗(yàn)狀態(tài)，就是給div.form-group附加.has-success、.has-warning、.has-error等類（同時(shí)附加.has-feedback類，將顯示額外的圖標(biāo)）

通過(guò) .input-lg 類似的類可以為控件設(shè)置高度，通過(guò) .col-lg-* 類似的類可以為控件設(shè)置寬度
水平排列的表單組的尺寸，通過(guò)給div.form-group附加.form-group-lg、.form-group-sm等類來(lái)快速設(shè)置其內(nèi)的label和控件

用柵格系統(tǒng)中的列（div.col-xs-3等）包裹輸入框或其任何父元素，都可很容易的為其設(shè)置寬度
表單控件的輔助文本用span.help-block （例如給出錯(cuò)誤提示用）

--------------------------------------按鈕-----------------------------------------

基本用法，給button元素附加默認(rèn)的btn類，然后根據(jù)需要呈現(xiàn)的情景，附加btn-default、btn-primary、btn-success等類

按鈕的尺寸，可以附加.btn-lg、.btn-sm、.btn-xs類來(lái)控制

給按鈕附加.btn-block類，可以將其拉伸到父元素的100%寬度，并且表現(xiàn)為塊元素

button元素表示的按鈕的激活狀態(tài)，是偽類:active實(shí)現(xiàn)的（不需要額外添加），a元素表示的按鈕的激活狀態(tài)，通過(guò)附加.active類實(shí)現(xiàn)，但如果需要達(dá)到外觀一致，也可以給button元素的按鈕添加.active類

button元素添加disabled屬性，可以禁用它（按鈕的背景設(shè)置opacity屬性可以達(dá)到不可點(diǎn)擊的顯示效果），a元素表示的按鈕，通過(guò)附加.disabled類來(lái)達(dá)到禁用

盡管button、a、input元素都可以應(yīng)用btn、btn-XXX等按鈕類，但為了跨瀏覽器表現(xiàn)，盡量使用button元素

--------------------------------------------圖片------------------------------

給img加.img-responsive類可以讓圖片支持響應(yīng)式布局（本質(zhì)上是max-width:100%;height:auto;，從而圖片在父元素中有更好的伸縮）

給img附加.img-rounded、.img-circle、.img-thumbnail等類，可以讓圖片呈現(xiàn)不同的形狀

----------------------------------輔助類---------------------------

不同情景的文本，類似如下：

<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>

關(guān)閉按鈕：

<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>

指示下拉的三角符號(hào)：

<span class="caret"></span>

快速左右float:（不適用于導(dǎo)航條，導(dǎo)航條應(yīng)當(dāng)用.navbar-right和.navbar-left類）

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

居中塊：

<div class="center-block">...</div> 實(shí)質(zhì)上是display:block和左右margin為auto
清除float的元素：（給父元素添加.clearfix類，事實(shí)上就是clear:both）

<div class="clearfix">...</div>

顯示與隱藏內(nèi)容：

<div class="show">...</div>
<div class="hidden">...</div>

另外，還有.invisible類，它影響元素的可見(jiàn)性，但不影響display屬性（即可能是顯示但不可見(jiàn)的），從而仍然影響文檔流（仍然是流中的元素），.hidden類是包含了.invisible類的，因?yàn)殡[藏起來(lái)時(shí)當(dāng)然是希望不可見(jiàn)的。

屏幕閱讀器與鍵盤導(dǎo)航內(nèi)容（對(duì)其他設(shè)備隱藏）：

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

用背景圖替換元素文本內(nèi)容：

<h1 class="text-hide">Custom heading</h1>

-----------------------------------響應(yīng)式工具----------------------------------------

針對(duì)不同屏幕隱藏或顯示內(nèi)容：可以獨(dú)立或聯(lián)合使用類.visible-XX-YY或.hidden-XX（其中，XX可以是xs、sm、md、lg，YY可以是block、inline、inline-block）

針對(duì)打印機(jī)隱藏或者顯示的內(nèi)容：.visible-print-YY和.hidden-print（其中，YY的可選值與上同）

以上是bootstrap框架的全局CSS知識(shí)的概要，bootstrap另外兩塊內(nèi)容就是組件和插件。簡(jiǎn)單理解，組件就是由CSS表達(dá)的展示性功能塊，而插件是JS+CSS表達(dá)的往往有動(dòng)態(tài)效果或交互效果的功能塊。

組件需要時(shí)查一下http://v3.bootcss.com/components/ 即可，插件需要時(shí)查一下http://v3.bootcss.com/JavaScript/ 即可

以上所述是小編給大家介紹的Yii2框架BootStrap樣式理解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論