bootstrap的经典实用

button：bootstrap中对于button定义了4中大小，分别是lg，md，sm，xs依次变小，使用方式 <button type="button" class="btn btn-primary btn-lg">

首选项（大按钮）</button>按钮的颜色分别是btn-default（默认），primary（首选项），success（成功），info（一般信息），warning（警告），danger（危险），如下图

下拉菜单dropdown的应用：dropdown主要应用于导航栏之中，代码如下

<div class="dropdown">
  <button type="button" class="btn btn-default dropdown-toggle" 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 role="separator" class="divider"></li><!-- separator设置的是下拉列表的隔离线 -->
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

代码中的caret设置的是后面的向下的小图标，separator设置的是下拉列表的隔离线，data-toggle用于告诉javascript需要对按钮做什么，此处是下拉菜单，实现效果点击前点击后如下图：

输入框的应用：代码如下

<div class="input-group">

     <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="username">
 </div>

这块用到的类是class="input-group"，如果在text前面写一个span标签然后class="input-group-addon"加什么字符就会出现在输入框前面，placeholder是用来在输入框里面出现提示性的话，点击输入框之后就会消失，实现效果如下：

对图片形状的显示：代码如下

<img src="" alt="图片" class="img-thumbmail">

img-thumbmail，img-circle，img-rounded分别显示三种不同的形状，效果如下：

栅格系统： Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列， “行（row）”必须包含在  .container  （固定宽度）或  .container-fluid  （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。代码如下：

  <div class="container">
    <div class="row">
      <div class="bg-success col-lg-2 col-md-6 col-sm-8 col-xs-4">a</div>
      <div class="bg-warning col-lg-6 col-md-6 col-sm-2 col-xs-4">b</div>
      <div class="bg-info col-lg-5 col-md-6 col-sm-2 col-xs-4">c</div>
    </div>
  </div>

代码中的col-lg-2 col-md-6 col-sm-8 col-xs-4，代表着超大屏幕下（>=1200px）占2列，中等屏幕（992px<=width<1200px）占领6列，小屏幕（768<=width<992px）占8列，超小屏幕（<768）占4列。

导航栏的收缩：大屏幕下导航栏展开，屏幕缩小是收缩起来。代码如下：

<nav class="navbar navbar-default navbar-inverse"  role="navigation">

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#target-menu">
       <span class="sr-only"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
         <div class="collapse navbar-collapse navbar-right" id="target-menu">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="">主页</a></li>
                    <li><a href="">小屏幕收缩</a></li>
                    <li><a href="">小屏幕收缩</a></li>
                    <li><a href=“">小屏幕收缩</a></li>
                    <li><a href="">小屏幕收缩</a></li>
                    <li><a href="">小屏幕收缩</a></li>
                </ul>
        </div>

</nav>

代码当中的container-fluid 作用是 100% 宽度，占据全部视口（viewport）的容器，navbar-right的作用是让他靠右，类似于float：right的作用，折叠起来的导航栏是带有class .navbar-toggle以及data-toggle和data-target两个属性的按钮，data-toggle用于告诉javascript需要对按钮做什么，此处是折叠：collapse，data-target用于指示折叠哪个元素，后面跟的id要跟下面div定义的id一致，效果如下：

屏幕缩小之后的效果是：

代码之中的三个<span class="icon-bar"></span>用来形成这三条横线。

具体学习可以戳这个http://v3.bootcss.com