bootstrap框架的使用

         bootstrap

1.首先要引入外部css文件在html中！

bootstrap.css  or
bootstrap.min.css

bootstrap框架和960框架是相似的！

首先來看如何在table裏面加入框架樣式：

<able class="table"></table>

table-striped 能夠使奇數行的背景色設置爲灰色！

table-border 能夠使邊框顯示！

table-hover 能夠讓鼠標懸停在的行的背景變爲灰色！

table-condensed 能夠使行間距變小！

<table class="table">
    <tr>
        <td class="active">姓名</td> 
        <td class="success">年齡</td>  成功或積極動做
        <td class="warning">職業</td> 注意
    </tr>
    <tr>
        <td class="danger">張三</td> 危險
        <td>18</td>
        <td>程序員</td>
    </tr>
</table>

active、succes、warning、danger均可以使背景發生改變！樣式都不同！

且是響應模式：

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

這樣作在小屏幕上看的時候會出現水平滾動條，大屏幕自動消失！

2.bootstrap柵格系統和表單

柵格系統和960框加同樣！

一共有四種柵格模式！分別爲col-xs-12(超小屏幕)，col-sm-12（小屏幕）。col-md-12（中屏幕）、col-lg-12（大屏幕）

<form role="form">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="請輸入你的email">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox"> Check me out
        </label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

以上就是用框架寫得一個簡單的表單！若是在div clas=「form-group」中吧group變爲inline就變成了內年表單！改變成horizontal就成了水平表單！

#3.bootstrap對button的改變！

btn-lg大按鈕！btn-md標準按鈕！btn-sm小按鈕！btm-xs小按鈕！

class="btn btn-success btn-lg" 成功樣式！ btn-info信息樣式！ btn-warning警告樣式！ btn-danger危險樣式！

若是要一行的按鈕這須要加 class=「btn-block」

若是須要添加不可點擊狀 disabled="disabled"

4.bootstrap 對圖片的處理！

<img src="img/jay.jpg" class="img-circle">——用於構建圓形的圖片
<img src="img/jay.jpg" class="img-thumbnail">——用於添加簡單的邊框
<img src="img/1.jpg" class="img-rounded">——用於構建圓角的圖片