Bootstrap踩坑笔记（记录Bootstrap当中的核心知识点）

目录

1.Bootstrap官网

2.核心1:布局（栅格系统）

 3.核心知识点3:响应式布局

A.容器

B.行

C.列

注意:

D.案例:

E.列偏移

F.列排序

4. 样式

A.按钮

B.图片

C.表格

5.组件

A.导航条

 B.分页条

C.js插件

---

1.Bootstrap官网

Bootsrap官网

2.核心1:布局（栅格系统）

Bootstrap的核心，也是它响应式布局的一个亮点。能在页面上左右排版自己的东西。

 简化用法说明(正常PC端)：在class= row中嵌套 class = col-md-数字就行。

参考网址:Bootsrap栅格系统

    
    
    
    
    
    


    

        
col-md-1
       
        
col-md-2
       
        
col-md-3
       
        
col-md-4
       
    

 类名里面的数字代表占有几列，而一行中默认有12列。

里面的md针对中等屏幕设备生效。

针对超小屏幕设备所定义的类，即 .col-xs-*

针对平板设备的 .col-sm-* 类

 3.核心知识点3:响应式布局

同一套页面可以兼容不同分辨率的设备

实现：依赖于栅格系统。随着屏幕尺寸的增加，系统会自动分为最多12列。

栅格系统的使用方法：说白了就是用定义好的类（class）

A.容器

.container 类用于固定宽度并支持响应式布局的容器，两边留白。

.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器。

（这两种容器类不能互相嵌套）

B.行

• “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。

C.列

格式：col-设备代号-格子数目

设备代号：

​ xs：超小屏幕，手机（<768px）

​ sm：小屏幕 平板 (≥768px)

​ md：中等屏幕 桌面显示器 (≥992px)

​ lg：大屏幕 大桌面显示器 (≥1200px)

• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
• 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

注意:

​ 一行中如果格子数目超过12，则超出部分自动换行。

​ 栅格属性可以向上兼容。 小屏幕定义的属性适用于大屏幕。

​ 如果设备宽度小于栅格类元素属性设置的最小宽度，那么一个元素会占满一行。

D.案例:

 

 

    

        
一共12列
    

 

    

        
1列
        
1列
        
1列
        
1列
        
1列
        
1列
        
1列
        
1列
        
1列
        
1列
        
1列
        
1列
    


    

        
占4列
        
占4列
        
占4列
    

 

E.列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个（column）的宽度

F.列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

下面做个简单的区分，其中push和offset类似。

col-md-offset-3（在左侧补充3列） col-md-push-8（从左侧往右侧推8列） col-md-pull-2（往左侧拉2列）

4. 样式

全局css样式

A.按钮

• 默认按钮
• 提交按钮
• 成功按钮
• 信息按钮
• class="btn btn-warning" 警告按钮
• class="btn btn-danger" 危险按钮
• class="btn btn-link" 链接按钮

B.图片

 

在div中指定class=img-responsive使图片支持响应式布局
//图片形状
//方形
//圆形
//相框

C.表格

  
   

       

           
列名1
           
列名2
       
        

           
列值1
           
列值2
       
    
  
//class="table table-striped":条纹状表格
//class="table table-bordered":带边框的表格
//class="table table-condensed":紧凑表格（单元格中的内补（padding）均会减半）
//响应式表格:(屏幕小了就加上滑动条)

  
    ...
  

5.组件

A.导航条

使用nav元素定义，

定义反色的导航条设置class="navbar navbar-inverse"

只支持  元素，不支持

 B.分页条

C.js插件

• 轮播：Carousel
• 可以选择轮播的标题，轮播速度，轮播的前后方向