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

創(chuàng)新互聯(lián)建站專注于網(wǎng)站建設(shè)，為客戶提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)開(kāi)發(fā)服務(wù)，多年建網(wǎng)站服務(wù)經(jīng)驗(yàn)，各類網(wǎng)站都可以開(kāi)發(fā)，品牌網(wǎng)站制作，公司官網(wǎng)，公司展示網(wǎng)站，網(wǎng)站設(shè)計(jì)，建網(wǎng)站費(fèi)用，建網(wǎng)站多少錢，價(jià)格優(yōu)惠，收費(fèi)合理。

布局容器

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

Bootstrap 將全局 font-size 設(shè)置為 14px ，行高為 1.428（20px），

段落行高設(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)首字母大寫

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

突出顯示文本（加底紋）

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

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

 常見(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 為任意 
 標(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è)置顏色
類
描述
實(shí)例
.active
將懸停的顏色應(yīng)用在行或者單元格上
嘗試一下
.success
表示成功的操作
嘗試一下
.info
表示信息變化的操作
嘗試一下
.warning
表示一個(gè)警告的操作
嘗試一下
.danger
表示一個(gè)危險(xiǎn)的操作
嘗試一下
具體請(qǐng)看：
商品名稱
商品價(jià)格
商品狀態(tài)
success顏色
小米手機(jī)
1499
代發(fā)貨
active顏色
小米手機(jī)
1499
代發(fā)貨
info顏色
小米手機(jī)
1499
代發(fā)貨
warning顏色
小米手機(jī)
1499
代發(fā)貨
danger顏色
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“bootstrap布局容器的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
            
            
                        

            本文標(biāo)題：bootstrap布局容器的示例分析            

            當(dāng)前URL：http://weahome.cn/article/jhpdjj.html