Bootstrap学习笔记（一）

一.什么是Bootstrap？

Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。——《百度百科》

1.Bootstrap：下载地址

2.准备工作

1.响应式布局：

3.引入jquery

2.引入文件：

准备工作

二.布局容器类样式：

1..container 和 .container-fluid

.container 固定宽度并且具有响应式。

    
 Bootstrap
    
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，
使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，
        它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司
        ）的Breaking News都使用了该项目。[2]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，
        也是基于Bootstrap源码进行性能优化而来。

样式结果

.container-fluid 自由宽度（100%宽度）

    
 Bootstrap
    
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，
使得 Web 开发更加快捷。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，
        它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司
        ）的Breaking News都使用了该项目。[2]  国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，
        也是基于Bootstrap源码进行性能优化而来。

样式结果

2.标题样式.h1~.h6

 我是h1
    我是h2
    我是h1

结果样式

3.文本对齐： .text-left .text-center .text-right .text-justify

.text-left 左对齐
.text-center 局中
.text-right 右对齐
.text-justify 两端对齐

Bootstrap
    
Bootstrap
    
Bootstrap
    
Bootstrap

样式结果

4. 样式列表：.list-unstyled(无符号) .list-inline(行内块)

.list-unstyled(无符号)

        
Bootstrap
        
Bootstrap
        
Bootstrap
        
Bootstrap
    

结果演示

.list-inline(行内块)

        
Bootstrap
        
Bootstrap
        
Bootstrap
        
Bootstrap
    

结果演示

5.表格样式 .table .table-striped .table-bordered .table-hover .table-condensed

.table

        

            
Bootstrap
            
Bootstrap
            
Bootstrap
            
Bootstrap
        
        

            
Bootstrap
            
Bootstrap
            
Bootstrap
            
Bootstrap
        
    

结果演示

.table-striped 渐变颜色

        

            
Bootstrap
            
Bootstrap
        
        

            
Bootstrap
            
Bootstrap
        
        

            
Bootstrap
            
Bootstrap
        
        

            
Bootstrap
            
Bootstrap
        
    

结果演示

.table-bordered 带边框的表格

        

            
Bootstrap
            
Bootstrap
        
        

            
Bootstrap
            
Bootstrap
        
        

            
Bootstrap
            
Bootstrap
        
    

结果演示

.table-hover 鼠标事件变色

    

        

            
Bootstrap
            
Bootstrap
        
        

            
Bootstrap
            
Bootstrap
        
        

            
Bootstrap
            
Bootstrap
        
    

结果演示

.table-condensed 紧凑型

 

        

            
Bootstrap
            
Bootstrap
        
        

            
Bootstrap
            
Bootstrap
        
        

            
Bootstrap
            
Bootstrap
        
    

结果演示

6.行或单元格背景色 .active .success .info .warning .danger

.active 当前颜色
.success 成功颜色
.info 信息颜色
.warning 警告颜色
.danger 危险颜色

 

        

            
Bootstrap
            
Bootstrap
        
        

            
Bootstrap
            
Bootstrap
        
        

            
Bootstrap
            
Bootstrap
        
        

            
Bootstrap
            
Bootstrap
        
        

            
Bootstrap
            
Bootstrap
        
        

            
Bootstrap
            
Bootstrap
        
    

结果演示

          ............省略....................
    
 ............省略....................

    

         
Bootstrap
           
Bootstrap

文集：Bootstrap学习笔记