bootstrap学习1

1.form-control

　　-宽度变成了100%

　　-设置了一个浅灰色（#ccc）的边框

　　-具有4px的圆角

　　-设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

　　-设置了placeholder的颜色为#999

2.table

  ☑  .table：基础表格

  ☑  .table-striped：斑马线表格

  ☑  .table-bordered：带边框的表格

  ☑  .table-hover：鼠标悬停高亮的表格

  ☑  .table-condensed：紧凑型表格

  ☑  .table-responsive：响应式表格

3.form-group：相当于网格系统中的“row”

4.表单 验证状态:

<form role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess1">成功状态</label>
    <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  </div>
  <div class="form-group has-warning has-feedback">
    <label class="control-label" for="inputWarning1">警告状态</label>
    <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  </div>
  <div class="form-group has-error has-feedback">
    <label class="control-label" for="inputError1">错误状态</label>
    <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    <span class="glyphicon glyphicon-remove form-control-feedback"></span>  
  </div>
</form>

5.六种按钮风格

<button class="btn" type="button">基础按钮.btn</button>  
<button class="btn btn-default" type="button">默认按钮.btn-default</button> 
<button class="btn btn-primary" type="button"> 主要按钮.btn-primary</button> 
<button class="btn btn-success" type="button">成功按钮.btn-success</button> 
<button class="btn btn-info" type="button">信息按钮.btn-info</button>
<button class="btn btn-warning" type="button">警告按钮.btn-warning</button> 
<button class="btn btn-danger" type="button">危险按钮.btn-danger</button> 
<button class="btn btn-link" type="button">链接按钮.btn-link</button> 

6.各种图标   http://getbootstrap.com/components/#glyphicons      http://www.bootcss.com/p/font-awesome/

7.等分按钮，即自适应分组按钮，在按钮组“btn-group”上追加一个“btn-group-justified”类名，适用于移动端

8.按钮垂直分组：只需要把水平分组的“btn-group”类名换成“btn-group-vertical”即可。

9.垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可

10.自适应导航和前面使用“btn-group-justified”制作的自适应按钮组是一样的。只不过在制作自适应导航时更换了另一个类名“nav-justified”。当然他需要和“nav-tabs”或者“nav-pills”配合在一起使

11.模态弹出框

<!-- data-target触发模态弹出窗元素 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<div class="modal fade" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"> 
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">模态弹出窗标题</h4>
            </div>
            <div class="modal-body">
                <p>模态弹出窗主体内容</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>