bootstrap 之css樣式

1、表格

　　bootstrap3.0規定，爲任意<table>標籤添加.table類樣式，才能夠爲其賦予優化效果。bootstrap爲表格添加了 除默認風格外的個性風格。

　　1.斑馬線風格

　　爲表格添加以下樣式，爲表格添加table-striped樣式類，便可實現斑馬線風格的表格

.table-striped > tbody >tr:nth-child(odd) 
            {
                background-color: red;
            }

 

 

 

　　效果如圖所示：

　　

　　2.鼠標指針懸停

　　當鼠標指針通過數據行時，使背景顏色變爲和斑馬線背景顏色同樣

　　

.table-hover > tbody > tr:hover{
                background-color: red;
            }

 

　　

　　3.響應式表格.

　　響應式表格當屏幕小時，下方出現滾動條；當屏幕夠大時，滾動條消失

　　 

2、表單

　　1.佈局風格

　　　　1.行內佈局

　　　　　爲<form> 標籤引入 form-inline類，能夠使整個表格在一行內顯示

　　　　2.水平佈局

　　　　　添加 .form-horizontal類，而且使用bootstrap的柵格系統，即可使<lable>和控件組水平排列

　　2.外觀風格

　　　　1.定製大小 ： bootstrap提供了兩種控制表單大小的途徑，相對高度和網格寬度

　　　　　（1.）相對高度

　　　　　　　　相對高度是一組與關鍵字相關聯的類，是區分兩個類之間的區別

　　　　　　　　

    /*先設計兩個不一樣的類*/
            .input-sm{
                height: 30px;
                line-height: 1.5;
                font-size: 12px;
            }
            .input-lg{
                height: 60px;
                line-height: 2.0;
                font-size: 20px;
            }

　　
　　

<!--建立按鈕 -->
<label ><input class="input-sm" placeholder="小號" ></label>
<label ><input placeholder="正常" ></label>
<label ><input class="input-lg" placeholder="大號" ></label>

　　比較以下：

　　（2.）網格寬度

　　　　使用柵格系統中的列包裹input或其任何父元素，即可以很容易的設置寬度

2.定製不可編輯樣式

　　bootstrap經過爲組件設置disabled屬性來設置不可編輯樣式

　　

<label ><input class="form-control" placeholder="大號" disabled="disabled"></label>

3.定製靜態控件

　　當想要將一行純文本置於<lable>的同一行時，就能夠用靜態組件，爲<p>元素添加 .form-control-static類便可

 

3、按鈕

　　1.默認風格

　　　　bootstrap專門定製有btn樣式類，應用該類即可實現按鈕效果

　　

<a class="btn">超級連接</a>
        <button class="btn">按鈕（btn）</button>
        <input class="btn" value="按鈕(input)" />

　　2.定製風格

　　bootstrap提供3個相對大小的按鈕樣式類

　　

<button class="btn btn-lg">按鈕（大號）</button>    
        <button class="btn ">按鈕（標準）</button>
        <button class="btn btn-sm">按鈕（小號）</button>
        <button class="btn btn-xs">按鈕（mini）</button>