bootstrap学习笔记(增加网格应用)

bootstrap笔记：
文件引用：
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
自动布局

    <div class="container"></div>

网格：
    1、网格样式必须放在.container的div里面 一行row可以拆分12列
    2、最大容器宽度    None (auto)     750px          970px          1170px
        Class 前缀    .col-xs-    .col-sm-    .col-md-    .col-lg-
        如col-lg-3放在.row的div内
    3、设置左外边距 col-md-offset-3  //当前元素的左外边距增加3列
    4、可以嵌套

基本排版：
    .lead     使段落突出显示     
    .small     设定小文本 (设置为父文本的 85% 大小)     
    .text-left     设定文本左对齐     
    .text-center     设定文本居中对齐     
    .text-right     设定文本右对齐     
table标签常用效果：
    <table class="table table-hover"></table> //鼠标悬停状态
form表单样式：
    <div class="form-group col-lg-3">
        <label for="name">名称</label>
        <input type="text" id="name" class="form-control input-lg " placeholder="请输入名称">
    </div>
    高度：input-lg 默认 input-sm
    宽度：col-lg-*
按钮样式：
    <!-- 标准的按钮 -->
    <button type="button" class="btn btn-default">默认按钮</button>
    <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
    <button type="button" class="btn btn-primary">原始按钮</button>
    <!-- 表示一个成功的或积极的动作 -->
    <button type="button" class="btn btn-success">成功按钮</button>
    <!-- 信息警告消息的上下文按钮 -->
    <button type="button" class="btn btn-info">信息按钮</button>
    <!-- 表示应谨慎采取的动作 -->
    <button type="button" class="btn btn-warning">警告按钮</button>
    <!-- 表示一个危险的或潜在的负面动作 -->
    <button type="button" class="btn btn-danger">危险按钮</button>
    <!-- 并不强调是一个按钮，看起来像一个链接，但同时保持按钮的行为 -->
    <button type="button" class="btn btn-link">链接按钮</button>
分页：
    基本分页：
    <ul class="pager">
        <li><a href="#">Previous</a></li>
        <li><a href="#">Next</a></li>
    </ul>