bootstrap基础知识（一）

Bootstrap

Bootstrap栅格系统

<div class="container-fluid">

         aaaaaaaaa

</div> // 自适应宽度  流体

<div class="container">

         aaaaaaaaa

</div> //固定宽度，根据不同分辨率展示不同固定值

两者不要嵌套用                     

栅格系统

Row 行

Col 列

使用如下

<!--<div class="row">

<div class="col-lg-1">col-lg-1</div>

<div class="col-lg-11">col-lg-11</div>  //总共加起来12份

</div>

<div class="row">

<div class="col-lg-3">col-lg-3</div>

<div class="col-lg-4">col-lg-4</div>  //不到12份显示残缺的

</div>-->

col-lg-1 超大屏幕  >1200

col-md-1  1200>992

col-sm-1  992>768

col-xs-1  768>

可以组合使用

col-lg-offset-4 //向右偏移4份

<div class="row">

<div class="col-lg-2 col-lg-push-10">col-lg-2</div> //列排序，往后偏移10个

<div class="col-lg-10 col-lg-pull-2">col-lg-10</div> //往前偏移两个

</div>

注意offset 和push/pull的不同点

响应式工具

<div class="col-lg-4 visible-md-block">col-lg-4</div> //当在md分辨率下才显示，否则隐藏

其余类似

预定义风格

    <input type="button" value="默认样式">

    <input type="button" value="首选项" class="btn btn-primary">

    <input type="button" value="成功" class="btn btn-success">

    <input type="button" value="一般信息" class="btn btn-info">

    <input type="button" value="警告" class="btn btn-warning">

    <input type="button" value="危险" class="btn btn-danger">

 

除了按钮可以这样加，文字，p段落，链接等都可以用

按钮

 

    <input type="button" value="按钮" class="btn">

    <input type="button" value="按钮" class="btn btn-default">

    <input type="button" value="按钮" class="btn btn-link">

    <br><br>

    <input type="button" value="首选项" class="btn btn-primary">

    <input type="button" value="首选项" class="btn btn-primary btn-lg">

    <input type="button" value="首选项" class="btn btn-primary btn-sm">

    <input type="button" value="首选项" class="btn btn-primary btn-xs">

    <br><br>

    <input type="text" class="form-control">

    <input type="text" class="form-control input-lg">

    <input type="text" class="form-control input-sm">

    <br><br>

    <input type="button" value="首选项" class="btn btn-primary">

    <input type="button" value="首选项" class="btn btn-primary active">

<input type="button" value="首选项" class="btn btn-primary disabled">

 

下拉菜单

<div class="dropdown">

        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">

            Dropdown

            <span class="caret"></span>

        </button>

        <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li><a href="#">Separated link</a></li>

        </ul>

 </div>

 

字体图标

要先引入相关文件

具体API自己查，调大小和颜色通过设置行内样式来调整