Boostrap 基础知识

前置知识 （默认 CSS）

{
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}
h1{
    font-size:36px;
    margin-top:20px;
    margin-bottom:20px;
}
h2{
    font-size:30px;
    margin-top:20px;
    margin-bottom:20px;
}
h3{
    font-size:24px;
    margin-top:20px;
    margin-bottom:20px;
}
h4{
    font-size:18px;
    margin-top:10px;
    margin-bottom:10px;
}
h5{
    font-size:14px;
    margin-top:10px;
    margin-bottom:10px;
}
h6{
    font-size:12px;
    margin-top:10px;
    margin-bottom:10px;
}

一. 使用示例

  
      
      
      
      
      
      
         
      
      
      
      
              
      
      
  
  
      
Hello, world!
      
      
      
      
  

二. 布局容器

顾名思义，就是放Bootstrap代码的容器，只有放在container里面的html代码才会被Bootstrap识别。

注：我们要把Bootstrap的HTML的代码都放在 带 container 或者 container-fluid类的

标签中.

---

三. container 和 container-fluid

• 数据行（.row）必须包含在容器.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内填充（padding）。如：

• 在数据行（.row)中可以添加列（column），但列数之和不能超过平分的总列数（在超过时，多余部分会换行显示），默认12。

• 详细查询

  
  
  

四. 媒体查询

下面是媒体查询（media query）的基本结构，根据查看网页的设备的某些重要信息（比如屏幕大小、分辨率、颜色位深等），页面可以分别应用不同的样式甚至替换整个样式表。

@media (media-feature-name: value) {
 /* 符合条件时应用的样式 */
}

如果浏览器当前的条件与圆括号中的条件匹配，它就会采用花括号中的那些样式。如果不匹配，浏览器会忽略这些样式。
注意：浏览器始终会采用位于 @media 代码块之外的样式。满足条件时的媒体查询样式是在其他样式基础上应用的。 为此，条件式媒体查询样式经常要覆盖其他样式，比如隐藏之前的可见元素，把区块移动位置，调整字号等。

五. 列偏移（offset）

在某些情况下，我们不希望相邻的列紧靠在一起，如果你希望不通过额外的margin或其他的手段来实现的话，Bootstrap内置为我们提供了列偏移（offset），这一系列的类来帮助我们实现想要的效果。
只需要给需要偏移的列元素上添加类名 col-md-offset-* (星号代表要偏移的列组合数)，那么具有这个类名的列就会向右偏移。 这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如：在列元素中添加.col-md-offset-6 类将 .col-md-6元素向右侧偏移了6个列（column）的宽度。

  

    
col-md-8 
    
col-md-4 col-md-offset-2
    
col-md-4 col-md-offset-1
  

使用col-md-offset-*对列进行 向右偏移 时，要 保证列与偏移列的总数不超过12，不然会致列断行显示。 其实原因也很简单：因为该类是对于列设置margin-left，并且我们在上面的源码展示中，也可以看有每一列都有着float:left的属性，从这些地方我们就不难发现在（偏移+列宽）超过12时，为何会换行显示了。

六. 列嵌套

Bootstrap框架的网格系统还支持列的嵌套。你可以在一个列中添加一个或者多个行（.row）容器，然后在这个行容器中插入列（像前面介绍的一样使用列）。但在列容器中的行容器（.row），宽度为100%时，就是当前外部列的宽度。

  

    

      我的里面嵌套了一个网格
        

          
col-md-6
          
col-md-6
        
    
    
col-md-4
  
  

    
.col-md-4
    

      我的里面嵌套了一个网格
      

        
col-md-4
        
col-md-4
        
col-md-4
      
    
  

注意：嵌套的列总数也需要遵循不超过12列。不然会造成末位列换行显示。

七. 列排序

列排序其实就是改变列的方向，就是 改变左右浮动，并且 设置浮动的距离。在 Bootstrap 框架的网格系统中是通过添加类名 col-md-push-* 和 col-md-pull-* (其中星号代表移动的列组合数)。
col-md-push-* ：向右浮动
col-md-pull-*：向左浮动

八. 响应式 与 实例

8.1 移动设备和桌面屏幕

是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-和 .col-md-。

    

        
.col-xs-12 .col-md-8
        
.col-xs-6 .col-md-4
    
    

        
.col-md-4 .col-xs-6
        
.col-md-4 .col-xs-6
        
.col-md-4 .col-xs-6
    
    

        
.col-xs-6
        
.col-xs-6
    

宽屏显示效果如下：

窄屏显示效果如下：

其实从上面代码和实际的显示效果，我们就可以看出一些问题来：

1. 在宽屏时，使用 col-md-* 的布局方式，在窄屏时使用 col-xs-* 布局
2. 响应式的列重置与列中设置的类的排列顺序无关。
3. 响应式列重置，在一个 .row 仍然存在列超过12时，col-xs-6 * 3=18。多余列的元素将作为一个整体单元被另起一行排列。

8.2 手机、平板、桌面

在上面案例的基础上，通过增加使用针对平板设备的 .col-sm-* 类，我们来创建更加动态和强大的布局吧。

    

        
.col-xs-12 .col-sm-6 .col-md-8
        
.col-xs-6 .col-sm-12 .col-md-4
    
    

        
.col-xs-6 .col-sm-4
        
.col-xs-6 .col-sm-4
        
.col-xs-6 .col-sm-4
    

宽屏：桌面

中屏：平板

窄屏：手机

然后我们从这一部分代码与实际效果，再加上上面做的一点小总结，对比之后又能发现一些问题：

1. Bootstrap中对于栅格系统的展示总是优先展示对应屏幕大小范围的类（.col-xs-6和.col-sm-4等等）。
2. 在为不同大小屏幕，添加多个类一定要记住在基本用法处的表格中的内容，它决定了在不同大小屏幕下的显示与排列。
3. 若还要继续添加在超大屏幕下的特定显示效果，只需要对列再添加一个.col-lg-*的类，就能达到你所想要的。

8.3 响应式列重置

除了在上面讲到的内容，在官方文档中还提到了响应式列重置，在我看来其实就是以下几点（或者说在这样的条件下可以使用）：

1. 需要对于不同屏幕大小进行处理，添加多个对于列宽进行处理的类。
2. 在缩小屏幕时，同一数据行（.row）针对小屏幕设置的类的宽度（.col-sm-*等等）加起来超过12，余下部分进行换行显示。
3. 在不同列的高度，有比较大的差异。可以在未超过12与超过12的部分，两者之间添加下面这样的代码：
   。（.visible-xs-block这一系列的类，会在后面进行讲解） 它最主要的作用是：它是响应式的，会占据未超过12的部分的宽高，且只有在发生列换行显示（堆叠）才进行设置。
4. 为了便于大家理解，我加一句：把上面那段代码复制到数据行.row容器内的最末端，它所占据的宽高和.row是一样的。（内容中有多段这样的代码的时候不成立，原因大家应该都能看出来了）