深入Bootscrap

响应式网页

1、响应式网页概述：一个页面，可以在各种不同的设备下浏览，都有不错的浏览体验。

三个特征：（1）流式布局（2）可伸缩的图片和字体（3）CSS3 Media Query

表格

.table：基础表格
.table-striped：斑马线表格
.table-bordered：带边框的表格
.table-hover：鼠标悬停高亮的表格
.table-condensed：紧凑型表格
.table-responsive：响应式表格

表单

Bootstrap中的表单分为三种：

（1）默认表单

<form>
  <div class="form-group">
   <label class="control-label"></label>
   <input class="form-control">
   <span class="help-block"></span>
  </div>
</form>

（2）行内表单

<form class="form-inline">
  <div class="form-group">
   <label class="control-label"></label>
   <input class="form-control">
   <span class="help-block"></span>
  </div>
</form>

（3）水平表单

<form class="form-horizontal">
  <div class="form-group">
   <label class="control-label col-md-3"></label>
   <div class="col-md-5">
    <input class="form-control">
   </div>
   <div class="col-md-4">
   <span class="help-block"></span>
   </div>
  </div>
</form>

组件

1、图标字体

（1）图标字体的本质不是图片，而是字体；故凡是可以使用文字的地方都可以使用不同字体

（2）glyphicon图标字体只能用于“空元素”——不包含任何内容或子元素！

如：<span class="glyphicon glyphicon-***"></span>

2、按钮组

.btn-group 水平按钮组

.btn-group-vertical 竖直按钮组

.btn-group.btn-group-justified 水平且两端对齐的按钮组

.btn-group-lg

.btn-group-sm

.btn-group-xs

3、下拉菜单

<div class="dropdown">
 <a data-toggle="dropdown"><span class="caret"></span></a>
 <ul class="dropdown-menu">
  <li></li>
  <li class="divider"></li>
  <li></li>
 </ul>
</div>

4、导航

(1)标签页式导航<ul class="nav nav-tabs"></ul>
(2)胶囊式导航<ul class="nav nav-pills"></ul>

5、导航条

响应式导航条：在PC和平板中默认要显示所有的内容；但在手机中导航条中默认只显示“LOGO/Brand”，以及一个“菜单折叠展开按钮”，只能单击折叠按钮后才显示所有的菜单项。

基础class：navbar

（1）Bootstrap中导航条的位置：

a、顶部导航条；b、底部导航条

（2）Bootstrap中导航条的颜色：

a、浅色底深色的字 navbar-default

b、深色底浅色的字 navbar-inverse

（3）Bootstrap中导航条的定位：

a、相对定位position：relative 默认值

b、固定定位position：fixed navbar-fixed-top/bottom

（4）导航条的结构：

<div class="navbar 颜色 定位">
 <div class="container">
  <!--导航条的头部：商标+按钮-->
  <div class="navbar-header">
   <a class="navbar-brand"></a>
   <button type=“button” class="navbar-toggle collapsed" data-toggle="collapse"><span class="icon-bar"></span></button>
  </div>
  <!--导航条折叠菜单：菜单、按钮、搜素框、链接、文本-->
  <div class="navbar-collapse">
   <ul class="nav navbar-nav"></ul>
   <form class="navbar-form"></form>
   <button class="navbar-btn"></button>
   <span class="navbar-text"></span>
   <a class="navbar-link navbar-text"></a>
  </div>
 </div>
</div>

通过修改Bootstrap的less源文件实现样式定制

定制的目标：
（1）去除不需要的样式，如轮播广告、模态框…
在bootstrap.less文件中，注释掉不需要的@import即可
（2）定制需要的组件的默认样式，如修改导航条的默认背景色
修改variables.less文件中的变量即可
（3）在Bootstrap提供的默认样式基础上创建新样式，如定制dropdown中的divider的样式——组件的深度定制
修改某个组件所对应的.less文件