bootstrap的使用方法

Bootstrap

有趣的栅格网格系统

　　Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕 或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。栅格系统用于通 过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以 放入这些创建好的布局中。

　　网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分 12 份(也有 平分成 24 份或 32 份，但 12 份是最常见的)，再调整内外边距，最后结合媒体 查询，就制作出了强大的响应式网格系统。Bootstrap 框架中的网格系统就是 将容器平分成 12 份。

　　数据行(.row)必须包含在容器（.container）中，以便为其赋予合适的对 齐方式和内距(padding)。在行(.row)中可以添加列(.column), 只有列（column）才可以作为行容 器(.row)的直接子元素，但列数之和不能超过平分的总列数，比如 12。如果大于 12,则自动换到下一行。

　　列偏移：　　

　　　　如果我们不希望相邻的两个列紧靠在一起，但又不想使用 margin 或者其他的技术手段来。这个时候就可以使用列偏移（offset）功能来实现。使用列偏 移也非常简单，只需要在列元素上添加类名“col-md-offset-*”(其中星号代表 要偏移的列组合数)，那么具有这个类名的列就会向右偏移。例如，你在列元素 上添加“col-md-offset-8”，表示该列向右移动 8 个列的宽度(要保证列与偏移 列的总数不超过 12，不然会致列断行|换行显示)。 简单来说，使用“col-md-offset-？”进行？的向右偏移，当然会带动后面的元素也进行相对偏移。

 

　　列排序：

　　　　　　列排序其实就是改变列的方向，就是改变左右浮动，并且设置浮动的距离。 在 Bootstrap 框架的网格系统中是通过添加类名”col-md-push-*”和 “col-md-pull-*” (其中星号代表移动的列组合数)。 往前 pull，往后 push。

 

排版

标题
    Bootstrap和普通的HTML页面一样，定义标题都是使用标签<h1>到<h6>,
    只不过Bootstrap覆盖了其默认的样式，使用其在所有浏览器下显示的效果一样。
    为了让非标题元素和标题使用相同的样式，还特意定义了.h1~.h6六个类名。
    同时后面可以紧跟着一行小的副标题<small></small>或使用.small
    <h1>h1. Bootstrap heading<small>副标题</small></h1>

段落

   段落是排版中另一个重要元素之一。
   通过.lead 来突出强调内容(其作用就是增大文本字号，加粗文本，而且对行高和margin也做相应的处理。
   可以使用以下标签给文本做突出样式处理：
   <small>:小号字
   <b><strong>:加粗
   <i><em>:斜体

 

<p>以后的你会感谢现在的自己</p>
        <p class="lead"><i>以后</i>的<b>你</b>会<em>感谢</em><strong>现在</strong>的<small>自己</small></p>
        
        <p class="lead"><small>以后的</small><b>你</b>会<i>感谢</i>现在<em>努力</em>的<strong>你</strong></p>

强调

   定义了一套类名，这里称其为强调类名，这些强调类都是通过颜色来表示强调，具本说明如下：
      .text-muted：提示，使用浅灰色（#999）
      .text-primary：主要，使用蓝色（#428bca）
      .text-success：成功，使用浅绿色(#3c763d)
      .text-info：通知信息，使用浅蓝色（#31708f）
      .text-warning：警告，使用黄色（#8a6d3b）
      .text-danger：危险，使用褐色（#a94442）

        <div class="text-muted">提示效果</div>
        <div class="text-primary">主要效果</div>
        <div class="text-success">成功效果</div>
        <div class="text-info">信息效果</div>
        <div class="text-warning">警告效果</div>
        <div class="text-danger">危险效果</div>        

列表：

    在HTML文档中，列表结构主要有三种：
    无序列表(<ul><li>…</li></ul>)、
    有序列表(<ol><li>…</li></ol>)、
    定义列表(<dl><dt>…</dt><dd>…</dd></dl>)。
    bootstrap根据平时的使用情形提供了六种形式的列表:
    ( 普通列表、有序列表、去点列表、内联列表、 描述列表、水平描述列表）。
    在样式方面Bootstrap只是在原有的基础上做了一些细微的优化(margin调整),其他差别不大，加入了一些样式:

　　1）去点列表:  class="list-unstyled"

　　2）内联列表:  class=” list-inline”
  　　　　  简单点说就是把垂直列表换成水平列表，而且去掉项目符号（编号），保持水平显示。
    　　　　也可以说内联列表就是为制作水平导航而生。

扫描二维码关注公众号，回复： 1440508 查看本文章

　　3）定义列表:
  　　  在原有的基础加入了一些样式，使用样式 class=“.dl-horizontal”制作水平定义列表 :
   　　 当标题宽度超过160px时，将会显示三个省略号
   　　 bootstrap4貌似有问题，看样子还是不稳定，bootstrap3中的css没有问题

　　

//自定义的列表
<dl>
            <dt>尚学堂</dt>
            <dd>中国最有良心的培训机构</dd>
            <dt>速学堂</dt>
            <dd>o2o在线学习平台</dd>
</dl>

表格
    （1）样式:
    Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。在使用Bootstrap的表格过程中，只需要添加对应的类名就可以得到不同的表格风格：
    基础样式
    1）.table：基础表格  
    附加样式
    1)  .table-striped：斑马线表格 
    2)  .table-bordered：带边框的表格 
    3)  .table-hover：鼠标悬停高亮的表格 
    4). table-condensed：紧凑型表格，单元格没内距或者内距较其他表格的内距更小
    （2）<tr>提供了五种不同的类名，每种类名控制了行的不同背景颜色

        <!--Bbootstrap有边框和高亮效果的表格-->
        <table class="table table-bordered table-hover">
            <tr >
                <th>JavaSE</th>
                <th>数据库</th>
                <th>JavaScript</th>
            </tr>
            <tr >
                <td>面向对象</td>
                <td>oracle</td>
                <td>json</td>
            </tr>
            <tr >
                <td>数组</td>
                <td>mysql</td>
                <td>ajax</td>
            </tr>
        </table>
        

表单控件
    .form-control .input-lg（较大） .input-sm（较小）
    （1）输入框
     .form-control
    （2）下拉选择框select
     多行选择设置：multiple="multiple"
    （3）文本域textarea
     <textarea class="form-control" rows="3"></textarea>
    （4）复选框checkbox
     .checkbox，水平显示：.checkbox-inline
    （5）单选择按钮
     .radio， 水平显示：.radio-inline
    （6）按钮
     1）使用button 实现
     基础样式:  btn      
     附加样式：btn-primary btn-info btn-success btn-warning
     btn-danger  btn-link btn-default
     2）多标签支持:使用a div 等制作按钮
     3）按钮大小
      使用 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
     4）按钮禁用
      方法1：在标签中添加disabled属性
      方法2：在元素标签中添加类名“disabled”
      在class属性中添加disabled只是样式上禁用了，并不是真正的禁用了此按钮！

            <!--文本框-->
            <div class="row">
                <div class="col-md-1">姓名</div>
                <div class="col-md-3">
                    <input class="form-control" type="text" value="zhangsan" />
                </div>
            </div>
//多选框
<div class="row">
                <div class="col-md-1">城市</div>
                <div class="col-md-3">
                    <select class="form-control">
                        <option>请选择城市</option>
                        <option>上海</option>
                        <option>北京</option>
                        <option>广州</option>
                    </select>
                </div>
            </div>
//文本域
    <div class="row">
                <div class="col-md-1">简介</div>
                <div class="col-md-3">
                    <textarea class="form-control"  rows="3"></textarea>
                </div>
            </div>
//button的相关设置
<div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-8">
                    <button class="btn">按钮</button>
                    <button class="btn btn-primary">按钮</button>
                    <button class="btn btn-info">按钮</button>
                    <button class="btn btn-success btn-sm">按钮</button>
                    <button class="btn btn-warning btn-xs">按钮</button>
                    <button class="btn btn-danger btn-lg">按钮</button>
                    <button class="btn btn-link">按钮</button>
                    <button class="btn btn-defaul">按钮</button>
                </div>
            </div>
不是button也可以设置成为按钮
<input type="submit" class="btn btn-default" value="input标签按钮"/>
            <a href="##" class="btn btn-info" disabled=true>a标签按钮</a>
            <span class="btn btn-success disabled">span标签按钮</span>
            <div class="btn btn-warning">div标签按钮</div>
            <p class="btn btn-danger">p标签按钮</p>

表单的两种情况：

　　普通表单：

<form class="form-horizontal">
            <div class="form-group">
                <label for="email" class="control-label col-sm-2">邮箱</label>
                <div class="col-sm-5">
                    <input type="email" class="form-control" placeholder="请输入邮箱"/>
                </div>
            </div>
            <div class="form-group">
                <label for="password" class="control-label col-sm-2">密码</label>
                <div class="col-sm-5">
                    <input type="password" class="form-control" placeholder="请输入密码" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2">
                    <div class=" checkbox">
                        <label>
                            <input type="checkbox" />记住密码
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-default">提交</button>
                    <button class="btn btn-default">提交</button>
                </div>
            </div>
        </form>

内联表单：将表单放置在一行。

<!--内联表单-->
        <form class="form-inline">
            <div class="form-group">
                <label for="email" >邮箱</label>
                <input type="email" class="form-control" placeholder="请输入邮箱"/>
            </div>
            <div class="form-group">
                <label for="password" >密码</label>
                    <input type="password" class="form-control" placeholder="请输入密码" />
            </div>
            <div class="form-group checkbox">
                <label><input type="checkbox" />记住密码</label>
            </div>
            <div class="form-group">
                <button class="btn btn-default">提交</button>
            </div>
        </form>

 

下拉表单：

1、 使用一个类名为dropdown 或btn-group的div 包裹整个下拉框:
      <div class="dropdown"></div>
   2、 默认向下dropdown，向上弹起加入 . dropup 即可
   3、 使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性
   <button type="button" class="btn btn-default dropdown-toggle"  data-toggle="dropdown">
   4、 在button中 使用font 制作下拉箭头
   <span class="caret"></span>
   5、 下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu
   6、 分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能
   7、 分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
   8、 对齐方式:
   1)、dropdown-menu-left  左对齐 默认样式
   2)、dropdown-menu-right   右对齐
   8、激活状态（.active）和禁用状态（.disabled）

 

<!--使用一个类名为dropdown向下，dropup向上 或btn-group的div 包裹整个下拉框-->
        <div class="dropdown">
            <!--使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性-->
            <button type="button" class="btn btn-default dropdown-toggle"  data-toggle="dropdown">
                <!--在button中 使用font 制作下拉箭头-->
                喜欢的频道  <span class="caret"></span>
            </button>
            <!--下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu-->
            <ul class="dropdown-menu">
                <li class="dropdown-header">-----综艺-----</li>
                <li>
                    <a href="#">奔跑吧</a>
                </li>
                <li>
                    <a href="#">极限挑战</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-header">-----美食-----</li>
                <li>
                    <a href="#">国家宝藏</a>
                </li>
                <li>
                    <a href="#">舌尖上的中国</a>
                </li>
                <li class="divider"></li>
                <li class="dropdown-header">-----电影-----</li>
                <li class="disabled">
                    <a href="#">复仇者联盟3</a>
                </li>
                <li>
                    <a href="#">超时空同居</a>
                </li>
            </ul>
        </div>

按钮组：

　　要点:
    1、 使用一个类名为btn-group的div 包裹整个按钮组
    2、 使用标签button 、a、span制作按钮，需要指定类名.btn
    3、 使用span 制作图标
    4、 大小分类:  btn-group-lg btn-group  btn-group-sm btn-group-xs
    5、 等分按钮: 自适应分组按钮btn-group-justified
    6、 默认为水平，使用btn-group-vertical 制作垂直按钮组
    7、 按钮工具栏: 在外层套用 .btn-toolbar  即可
    8、 注意：btn-group-lg仅仅是放大按钮，不能将所有的按钮作为连接在一起的按钮组

 

        <div class="btn-group">
            <button type="button" class="btn btn-default">按钮 1</button>
            <button type="button" class="btn btn-default">按钮 2</button>
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                        下拉 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">下拉链接 1</a></li>
                    <li><a href="#">下拉链接 2</a></li>
                </ul>
            </div>
        </div>
        
        <br /><hr /><br />
        
        <!--垂直按钮组-->
        <div class="btn-group-vertical">
            <button type="button" class="btn btn-default">按钮 1</button>
            <button type="button" class="btn btn-default">按钮 2</button>
            <div class="btn-group-vertical">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                 下拉 <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">下拉链接 1</a></li>
                    <li><a href="#">下拉链接 2</a></li>
                </ul>
            </div>
        </div>

导航栏：

1、 基本样式: .nav 与 “nav-tabs”、“nav-pills”组合制作导航

 2、 分类:
    1)、标签型 (nav-tabs)导航
    2)、胶囊形(nav-pills)导航
    3)、堆栈(nav-stacked)导航
    4)、自适应(nav-justified)导航
    5)、面包屑式(breadcrumb)导航 ，单独使用样式，不与nav一起使用,直接加入到ol、ul中即可，一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）

3、状态:
    1)、选中状态 active 样式
    2)、禁用状态: disable
4、二级菜单

 

    <!--表格导航-->
        <p>标签式的导航菜单</p>
        <ul class="nav nav-tabs">
          <li ><a href="#">Home</a></li>
          <li><a href="#">SVN</a></li>
          <li class="active"><a href="#">iOS</a></li>
          <li><a href="#">VB.Net</a></li>
          <li><a href="#">Java</a></li>
          <li><a href="#">PHP</a></li>
        </ul>
        
        <br /><hr /><br />
        
        <!--胶囊式导航-->
        <p>基本的胶囊式导航菜单</p>
        <ul class="nav nav-pills">
          <li><a href="#">Home</a></li>
          <li><a href="#">SVN</a></li>
          <li><a href="#">iOS</a></li>
          <li><a href="#">VB.Net</a></li>
          <li class="active"><a href="#">Java</a></li>
          <li><a href="#">PHP</a></li>
        </ul>
        
        <br /><hr /><br />
        
        <!--面包屑式导航-->
        <p>面包屑式导航菜单</p>
        <ul class="breadcrumb">
          <li><a href="#">Home</a></li>
          <li><a href="#">SVN</a></li>
          <li><a href="#">iOS</a></li>
          <li><a href="#">VB.Net</a></li>
          <li class="active"><a href="#">Java</a></li>
          <li><a href="#">PHP</a></li>
        </ul>

导航栏：

分页随处可见，分为页码导航和翻页导航
    页码导航:ul标签上加pagination [pagination-lg | pagination-sm]
    翻页导航: ul标签上加pager

  　　

<ul class="pagination pagination-lg">
            <li><a href="#">首页</a></li>
            <li><a href="#">&laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li class="active"><a href="#">5</a></li>
            <li><a href="#">&raquo;</a></li>
            <li><a href="#">末页</a></li>
        </ul>
//列表组
<ul class="list-grop" style="width: 200px;">
   <li class="list-group-item active">Java</li>
   <li class="list-group-item">Python</li>
   <li class="list-group-item">JavaScript</li>
   <li class="list-group-item">Ruby</li>
  </ul>