Bootstrap 组件

Bootstrap是一个HTML/CSS/JS框架，简化移动设备优先的响应式页面开发，主要涉及：

 HTML:为已有的标签添加了一些新属性 data-*

 CSS:重设了HTML标签的属性、声明了很多class

 JS:添加了jQuery插件

主要分为四个部分：

  (1)全局CSS样式

容器、按钮、图片、文本、背景、浮动、排版、栅格系统、表格、表单

  (2)组件

  (3)jQuery插件

  (4)定制

 

 

Bootlint：由Bootstrap官方提供的，一个用于检测Bootstrap使用方式是否正确的小工具，可以用于项目开发阶段。

 

1. 全局CSS样式——表格

     .table

    .table-bordered         表格带外框

    .table-condensed              表格中的单元格变紧凑

    .table-striped            表格中的数据行隔行变色

     .table-hover               表格中的数据行悬停变色

    .table-responsive              用于<table>的父元素！当表格一行中的内容显示不下时，会显示横向的滚动条。

    -------------------------------

     .active         用于tr/td，背景色变为“激活色”(浅灰色)

     .success      用于tr/td，背景色变为“成功色”(色)

     .danger              用于tr/td，背景色变为“危险色”(色)

     .warning      用于tr/td，背景色变为“警告色”(色)

     .info            用于tr/td，背景色变为“提示色”(色)

    

    

2. 全局CSS样式——表单

    .form-group    用于input和label的共同父元素  margin-bottom: 15px;

    .form-group-lg 大号的输入框

    .form-group-sm   小号的输入框

    .checkbox            用于<input type="checkbox">的父容器(div)上！对其中的label文字作了设定

    .checkbox-inline

    .radio                  用于<input type="radio">的父容器(div)上！对其

   中的label文字作了设定

    .radio-inline

    .form-inline          用于form元素，实现输入域处于一行内

   -----------------------------------------------------

   ----表单相关class小结--------

   <form class="[] |form-horizontal | form-inline">

     <divclass="form-group has-error|has-success|has-warning">

   <labelclass="control-label col-*-*"for=""></label>

   <inputclass="form-control">

   <pclass="help-block">用户名已被占用</p>

     </div>

   </form>

    

   午间练习：

    

3. Bootstrap组件(Component)——字体图标

     提示：Bootstrap官方借用了Glyphicon Halflings提供的字体图标文件，无需使用图片就可以文字的形式显示出260+图标——可以任意的放大缩小、或者字体颜色。

    

4. Bootstrap组件——下拉菜单

     注意！下拉菜单必需至少三级结构：

     <div id="父级容器">

   <button>触发元素</button>

   <div>目标元素</div>

     </div>

   目标元素的隐藏和显示必需要通过JavaScript来实现。

   <div class="dropdown">

   <buttondata-toggle="dropdown"></button>

   <ulclass="dropdown-menu">

   <li><a href="#"></a></li>

   <li class="dropdown-header">北京市</li>

   <li class="divider"></li>

   </ul>

   </div>

    

    

5. Bootstrap组件——按钮组

     有两种按钮组：

   .btn-group                   水平放置的多个按钮

   .btn-group-vertical       竖直放置的多个按钮

     每一种按钮组又可以声明大小号：

   .btn-group-lg

   .btn-group-sm

   .btn-group-xs

    ---------------------------------------

       .btn-group.btn-group-justified  对于使用a实现的按钮组可以实现占满一整行的效果。

    

6. Bootstrap组件——输入框组

     <divclass="input-group">

   <spanclass="input-group-addon">请输入：</span>

   <inputclass="form-control">

   <spanclass="input-group-btn">

   <button class="btn btn-default">搜索</button>

   </span>

     </div>