《PHP實(shí)戰(zhàn)：Yii2框架BootStrap樣式的深入理解》要點(diǎn)：
本文介紹了PHP實(shí)戰(zhàn)：Yii2框架BootStrap樣式的深入理解，希望對您有用。如果有疑問，可以聯(lián)系我們。

相關(guān)主題：YII框架

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

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

PHP學(xué)習(xí)已經(jīng)有viewport這個meta項(xiàng),已經(jīng)支持移動設(shè)備優(yōu)先原則

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

PHP學(xué)習(xí)AppAsset類默認(rèn)定義的CSS是 css/site.css,因?yàn)?depends有 yii\bootstrap\BootstrapAsset,所以,實(shí)際在head部分插入的CSS類似如下(對應(yīng)$this->head())

PHP學(xué)習(xí)
<link href="/orange_yii2/web/assets/6cdf1901/css/bootstrap.css" rel="stylesheet">
<link href="/orange_yii2/web/css/site.css" rel="stylesheet"></head>

PHP學(xué)習(xí)模板給出的DOM結(jié)構(gòu)body部分如下圖所示(其中div.xxx對應(yīng)的是各控制器所渲染的部分)：

PHP學(xué)習(xí)

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

PHP學(xué)習(xí)-----------------------------------------------------刪格原理-----------------------------------------------------------

PHP學(xué)習(xí)基本原則：

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

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

PHP學(xué)習(xí)列間距由列的padding屬性設(shè)置,.row元素的margin設(shè)置負(fù)值可以抵消.container的padding屬性的值

PHP學(xué)習(xí)每行都要按12列思考,例如,需要等寬的3列,可以用3個.col-xs-4,即每4列合并成1列的.超過12列的,需要把多余的列另起一行安排.

PHP學(xué)習(xí)媒體查詢：

PHP學(xué)習(xí)對超小屏幕,是默認(rèn)的；對于其他各種屏幕,使用媒體查詢確定大小的分界點(diǎn)

PHP學(xué)習(xí)響應(yīng)式列重置：

PHP學(xué)習(xí)對于某些內(nèi)容,希望在小屏幕上占據(jù)比大屏幕上更多列,可以類似如下

PHP學(xué)習(xí)
<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>

PHP學(xué)習(xí)列偏移：

PHP學(xué)習(xí)使用類似col-md-offset-4 那樣的類,可以將列向右偏移,效果上就好像某些列空出來了

PHP學(xué)習(xí)列嵌套：

PHP學(xué)習(xí)所謂列嵌套,即列中包含列,其實(shí)是行中包含的列元素又是一行,即行嵌套行

PHP學(xué)習(xí)列排序：

PHP學(xué)習(xí)通過使用 .col-md-push-* 和 .col-md-pull-* 類來改變列的順序
------------------------------------排版---------------

PHP學(xué)習(xí)標(biāo)題同類樣式：

PHP學(xué)習(xí)實(shí)際標(biāo)題用元素h1到h6,副標(biāo)題用small,對于內(nèi)聯(lián)的非標(biāo)題元素,需要使用標(biāo)題一樣的樣式,用類.h1到.h6,副標(biāo)題用.small

PHP學(xué)習(xí)頁面主體：

PHP學(xué)習(xí)全局的font-size=14px,line-height為1.428,作用于body和所有p元素.p元素的margin-bottom為1/2行高(即 14px*1.428/2 = 10px).突出性段落用.lead類.

PHP學(xué)習(xí)內(nèi)聯(lián)文本：

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

PHP學(xué)習(xí)文本對齊：

PHP學(xué)習(xí)
<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>

PHP學(xué)習(xí)縮略語與懸停提示：

PHP學(xué)習(xí)
<abbr title="attribute">attr</abbr>
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

PHP學(xué)習(xí)列表：

PHP學(xué)習(xí)有序列表ol和無序列表ul的一般用法就是直接元素.無樣式列表是帶.list-unstyled類的ul,內(nèi)聯(lián)(無序)列表是帶.list-inline類的ul,基本描述列表類似如下：

PHP學(xué)習(xí)
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>

PHP學(xué)習(xí)水平排列的描述列表是帶.dl-horizontal類的dl,左側(cè)短語太長時可以用text-overflow屬性進(jìn)行截斷.

PHP學(xué)習(xí)-------------------代碼------------------

PHP學(xué)習(xí)內(nèi)聯(lián)代碼用code標(biāo)簽,代碼塊用pre標(biāo)簽,變量用var標(biāo)簽,用戶輸入用kbd標(biāo)簽,程序輸出用samp標(biāo)簽

PHP學(xué)習(xí)-----------------------表格--------------------------

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

PHP學(xué)習(xí)
<div class="table-responsive">
<table class="table">
...
</table>
</div>

PHP學(xué)習(xí)----------------------------表單-------------------------

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

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

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

PHP學(xué)習(xí)輸入框常常添加placeholder屬性,所有HTML5輸入控件都被支持

PHP學(xué)習(xí)textarea往往添加rows屬性

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

PHP學(xué)習(xí)給checkbox和radio的label附加.checkbox-inline和.radio-inline類,可以橫排選項(xiàng)

PHP學(xué)習(xí)給select添加multiple屬性,可以同時顯示多個選項(xiàng)

PHP學(xué)習(xí)如果要用靜態(tài)文本作為控件,則使用p元素,并附加.form-control-static類

PHP學(xué)習(xí)輸入框的焦點(diǎn)狀態(tài),通過設(shè)置對應(yīng)輸入框的CSS屬性實(shí)現(xiàn)：移除outline(設(shè)為0),并賦予box-shadow屬性

PHP學(xué)習(xí)禁用輸入框給input添加disabled屬性,而禁用fieldset包裹的所有控件,就給它添加disabled屬性(有一定兼容性問題)

PHP學(xué)習(xí)只讀輸入框可以添加readonly屬性,其樣式也是禁用的

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

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

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

PHP學(xué)習(xí)--------------------------------------按鈕-----------------------------------------

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

PHP學(xué)習(xí)按鈕的尺寸,可以附加.btn-lg、.btn-sm、.btn-xs類來控制

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

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

PHP學(xué)習(xí)button元素添加disabled屬性,可以禁用它(按鈕的背景設(shè)置opacity屬性可以達(dá)到不可點(diǎn)擊的顯示效果),a元素表示的按鈕,通過附加.disabled類來達(dá)到禁用

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

PHP學(xué)習(xí)--------------------------------------------圖片------------------------------

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

PHP學(xué)習(xí)給img附加.img-rounded、.img-circle、.img-thumbnail等類,可以讓圖片呈現(xiàn)不同的形狀

PHP學(xué)習(xí)----------------------------------輔助類---------------------------

PHP學(xué)習(xí)不同情景的文本,類似如下：

PHP學(xué)習(xí)
<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>

PHP學(xué)習(xí)不同情景的背景色,類似如下：

PHP學(xué)習(xí)
<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>

PHP學(xué)習(xí)關(guān)閉按鈕：

PHP學(xué)習(xí)
<button type="button" class="close"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

PHP學(xué)習(xí)指示下拉的三角符號：

PHP學(xué)習(xí)
<span class="caret"></span>

PHP學(xué)習(xí)快速左右float:(不適用于導(dǎo)航條,導(dǎo)航條應(yīng)當(dāng)用.navbar-right和.navbar-left類)

PHP學(xué)習(xí)
<div class="pull-left">...</div>
<div class="pull-right">...</div>

PHP學(xué)習(xí)居中塊：

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

PHP學(xué)習(xí)
<div class="clearfix">...</div>

PHP學(xué)習(xí)顯示與隱藏內(nèi)容：

PHP學(xué)習(xí)
<div class="show">...</div>
<div class="hidden">...</div>

PHP學(xué)習(xí)另外,還有.invisible類,它影響元素的可見性,但不影響display屬性(即可能是顯示但不可見的),從而仍然影響文檔流(仍然是流中的元素),.hidden類是包含了.invisible類的,因?yàn)殡[藏起來時當(dāng)然是希望不可見的.

PHP學(xué)習(xí)屏幕閱讀器與鍵盤導(dǎo)航內(nèi)容(對其他設(shè)備隱藏)：

PHP學(xué)習(xí)
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

PHP學(xué)習(xí)用背景圖替換元素文本內(nèi)容：

PHP學(xué)習(xí)
<h1 class="text-hide">Custom heading</h1>

PHP學(xué)習(xí)-----------------------------------響應(yīng)式工具----------------------------------------

PHP學(xué)習(xí)針對不同屏幕隱藏或顯示內(nèi)容：可以獨(dú)立或聯(lián)合使用類.visible-XX-YY或.hidden-XX(其中,XX可以是xs、sm、md、lg,YY可以是block、inline、inline-block)

PHP學(xué)習(xí)針對打印機(jī)隱藏或者顯示的內(nèi)容：.visible-print-YY和.hidden-print(其中,YY的可選值與上同)

PHP學(xué)習(xí)以上是bootstrap框架的全局CSS知識的概要,bootstrap另外兩塊內(nèi)容就是組件和插件.簡單理解,組件就是由CSS表達(dá)的展示性功能塊,而插件是JS+CSS表達(dá)的往往有動態(tài)效果或交互效果的功能塊.

PHP學(xué)習(xí)組件需要時查一下http://v3.bootcss.com/components/ 即可,插件需要時查一下http://v3.bootcss.com/JavaScript/ 即可

PHP學(xué)習(xí)以上所述是小編給大家介紹的Yii2框架BootStrap樣式理解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的.在此也非常感謝大家對維易PHP網(wǎng)站的支持!

轉(zhuǎn)載請注明本頁網(wǎng)址：
http://www.fzlkiss.com/jiaocheng/2859.html