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>

巴特西

bootstrap学习1

最新文章

热门文章