转载请注明原文地址： 

一：准备

下载：http://getbootstrap.com/

导入： jquery.js、bootstrap.min.js 、 bootstrap.min.css 

 

二：基本元素

 1：网格

<table>

为表格添加基础样式。

<thead>

表格标题行的容器元素（<tr>），用来标识表格列。

<tbody>

表格主体中的表格行的容器元素（<tr>）。

<tr>

一组出现在单行上的表格单元格的容器元素（<td> 或 <th>）。

<td>

默认的表格单元格。

<th>

特殊的表格单元格，用来标识列或行（取决于范围和位置）。必须在 <thead> 内使用。

1）普通网格

     
名称
Tanmay
Mumbai

2）条纹网格

<table class="table table-striped">

3）带表框表格

<table class="table table-bordered">

 

4）悬停表格

<table class="table table-hover">

5）响应式表格

<div class="table-responsive">

 

2：表单

1）基本表单

• 父 <form> 元素添加 role="form"。
• form中一个<div> 一个小分块，添加class =form-group 属性获得最近行距

2）内联表单

元素是内联的，向左对齐，标签并排。向 <form> 标签添加 class =form-inline属性即可。

3）水平表单

• 向父 <form> 元素添加 class=form-horizontal。
• form中一个<div> 一个小分块，添加class =form-group 属性获得最近行距

表单控件：

1）输入框:input 类型包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

2）文本框：进行多行输入的时，则可以使用文本框 textarea。

3）复选框（Checkbox）和单选框（Radio）：使用 class=checkbox-inline 或 class=radio-inline，控制它们显示在同一行上.

4）选择列表：

      1      2      3      4      5    

5）纯文本：

纯文本

6）帮助文本：

帮助文本块

 

3：按钮

     默认按钮
     原始按钮
     成功按钮
     信息按钮
     警告按钮
     危险按钮
     链接按钮

 

4：图片标签<img>

通过指定class属性来进行图片的多种形式显示：

img-rounded	为图片添加圆角 (IE8 不支持)
img-circle	将图片变为圆形 (IE8 不支持)
img-thumbnail	缩略图功能
img-responsive	图片响应式 (将很好地扩展到父元素)

 

三：布局组件

1：字体图标

如需使用图标，只需要简单地使用下面的代码即可。

<span class="glyphicon glyphicon-图标名"></span>

具体图标样式见：http://www.runoob.com/bootstrap/bootstrap-glyphicons.html

2:下拉菜单

     
    
      菜单按钮    
      
       //下拉菜单项        
       
            1        
        
       
            2        
        
       
            3        
    
      
     

3：按钮组

     
    
      按钮 1    
      按钮 2    
      按钮 3 
     

4：导航菜单

     
  
      
1
  
      
2
  
      
3
     

主要有：

.nav nav-tabs	标签页
.nav nav-pills	胶囊式标签页
.nav nav-pills nav-stacked	胶囊式标签页以垂直方向堆叠排列的
.nav-justified	两端对齐的标签页，在大于 768px 的屏幕上，通过 .nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航链接呈现堆叠样式。

 5：面包屑导航栏

     
    
      
1
    
      
2
    
      
3
     

6：分页

.pager	一个简单的分页链接，链接居中对齐。
.previous	.pager 中上一页的按钮样式，左对齐
.next	.pager 中下一页的按钮样式，右对齐
.disabled	禁用链接
.pagination	分页链接
.pagination-lg	更大尺寸的分页链接
.pagination-sm	更小尺寸的分页链接
.disabled	禁用链接
.active	当前访问页面链接样式

7：各种样式标签

.label label-default	默认的灰色标签
.label label-primary	"primary" 类型的蓝色标签
.label label-success	"success" 类型的绿色标签
.label label-info	"info" 类型的浅蓝色标签
.label label-warning	"warning" 类型的黄色标签
.label label-danger	"danger" 类型的红色标签

8：徽章图标

<span class="badge">徽章文字</span>

9：标题

<div class="page-header">

10：警告信息

     
      成功！
     
     
      信息！
     
     
      警告！
     
     
      错误！
     

11：进度条：通过style控制进度显示

12：多媒体

     
    
              //插入多媒体：视频、音频、图片        
      
               文字介绍信息    
      
     

13：列表组

     
    
      
1
    
      
2
    
      
3
     

14：面板

     
    
      
               标题    
      
    
      
               面板内容    
      
     

15：轮播

     
    
          
      
        
       
        
       
        
       
    
      
       
          
      
        
       
            
                
       
        
       
            
                
       
        
       
            
                
       
    
      
    
          
      ‹        
      ›