bootstrap布局容器的示例分析

這篇文章主要介紹了bootstrap布局容器的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

布局容器

bootstrap 它認(rèn)為每一個(gè)網(wǎng)頁(yè)都應(yīng)該會(huì)擁有固定的寬度，它會(huì)在容器里面水平垂直居中或者是占滿容器的100% 的寬度。

Bootstrap 將全局 font-size 設(shè)置為 14px ，行高為 1.428（20px），<p> 段落行高設(shè)置為等于1/2（10px），顏色為 #333

1） 固定的寬度

.container 類用于固定寬度并支持響應(yīng)式布局的容器（水平居中）。

2） 百分比寬度

.container-fluid 用于 100% 寬度，占據(jù)全部可視化窗口的容器。

排版樣式

.text-center 居中對(duì)齊

.text-right 居右對(duì)齊

.text-left 居左對(duì)齊

.text-uppercase 用于將小寫字母轉(zhuǎn)換為大寫字母

.text-lowercase 用于將大寫字母轉(zhuǎn)換為小寫字母

.text-capitalize 用于實(shí)現(xiàn)首字母大寫

<abbr>  標(biāo)簽指示簡(jiǎn)稱或縮寫，比如 "WWW" 或 "NATO"(有利于搜索引擎搜索)

<mark> 突出顯示文本（加底紋）

以下是bootstrap復(fù)寫過(guò)樣式的標(biāo)簽

<code> 用于表示計(jì)算機(jī)源代碼或者其他機(jī)器可以閱讀的文本內(nèi)容。（加底紋）

<pre> 常見(jiàn)應(yīng)用表示計(jì)算機(jī)的源代碼（加底紋和邊框）

列表樣式

列表：有序列表，無(wú)序列表，定義列表。

.sr-only 隱藏一個(gè)元素，可以是行可以是列，也可以是整個(gè) table

.list-unstyled 用來(lái)將列表前面的項(xiàng)目符號(hào)去掉，同時(shí)去除列表默認(rèn)的 margin 值

.list-inline 將列表中的內(nèi)容排列成同一行，并且增加少量的 padding 值

.dl-horizontal 給定義列表來(lái)使用，將定義標(biāo)題與定義描述信息排列在同一行，將 dt 標(biāo)記與 dd 標(biāo)記里面的內(nèi)容排列在同一行

表格樣式

.table 為任意 <table> 標(biāo)簽添加 .table 類可以為其賦予基本的樣式，少量 的 padding 和水平方向的分割線。

.table-bordered 為表格和其中的每個(gè)單元格增加邊框線

.table-striped 實(shí)現(xiàn)各行變色的效果（IE8不支持）

table.table-striped tr:nth-child(odd){
            background:red;
            }
            /*控制各行的顏色,odd控制下標(biāo)為偶數(shù)的行,even控制下標(biāo)為奇數(shù)的行*/

.table-hover實(shí)現(xiàn)鼠標(biāo)放上的效果

		 table.table-hover tr:hover{
            background:red;
            }
            /*控制各行的顏色,odd控制下標(biāo)為偶數(shù)的行,even控制下標(biāo)為奇數(shù)的行*/

.table-condensed 緊湊型的表格，將 padding 值減半

.table-responsive 給表格父元素設(shè)置響應(yīng)式，當(dāng)屏幕小于 768px 時(shí)， 四周出現(xiàn)邊框

狀態(tài)類

只能給 tr 或者 td 或者 th 來(lái)設(shè)置，不能給 table 標(biāo)記來(lái)設(shè)置

通過(guò)這些狀態(tài)類可以為行或單元格設(shè)置顏色

具體請(qǐng)看：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“bootstrap布局容器的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!