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">——用于构建圆角的图片