bootstrap栅格系统

快来打我* 2023-06-10 05:26 2阅读 0赞

### 全局css样式 ###

设置全局 CSS 样式；基本的 `HTML` 元素均可以通过 `class` 设置样式并得到增强效果；还有先进的栅格系统。

##### bootstrap为响应式布局——通过媒体查询实现 #####

###### 1. 移动设备优先（增加meta属性） ######

###### 2. 排版和链接 ######

排版  
1）h标签对应的h类  
2）small标签对应的small类

###### 3. `normalize.css` 浏览器重置（库可下载），让各浏览器保持一致 ######

###### 4. 浏览器布局容器 ######

> 固定模式布局 `container` 流式布局：`container-fluid`  
> 样式用类名称使用

**例一:**`class=container` 自动居中并随浏览器大小变化而变化  
css样式中的comtainer类

.container { 
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }
    @media (min-width: 768px) { 
      .container { 
        width: 750px;
      }
    }
    @media (min-width: 992px) { 
      .container { 
        width: 970px;
      }
    }
    @media (min-width: 1200px) { 
      .container { 
        width: 1170px;
       }
     }

除此之外随着页面的变化还有媒体查询的相关属性  
**例二：** 流式布局 `container-fluid`默认100%布局

.container-fluid { 
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
    }

虽然和`container`的样式相同，但是没有定义其他的媒体查询，所以宽度总是百分百

**相同点**：都有左右的`padding`(槽宽)，如果不需要可以给子元素设置负值的margin抵消掉槽宽；或者直接在样式中删除

###### 5. 栅格系统 ######

类似表格布局`tb td tr`， 一行12个列

1.  屏幕尺寸划分

<table> 
 <thead> 
  <tr> 
   <th>屏幕名称</th> 
   <th>尺寸大小</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>超小屏：<code>col-xs-</code></td> 
   <td>手机 (&lt;768px)</td> 
  </tr> 
  <tr> 
   <td>小屏幕: <code>col-sm-</code></td> 
   <td>平板 (≥768px)</td> 
  </tr> 
  <tr> 
   <td>中屏幕：<code>col-md -</code></td> 
   <td>桌面显示器 (≥992px)</td> 
  </tr> 
  <tr> 
   <td>大屏幕：<code>col-lg-</code></td> 
   <td>大屏幕 大桌面显示器 (≥1200px)</td> 
  </tr> 
 </tbody> 
</table>

1.  行`row`必须包含在 `.container （固定宽度）`或 `.container-fluid （100% 宽度）`中，以便为其赋予合适的排列`aligment`和内补`padding`。列必须是行的子元素

> 1.  内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
> 2.  只有中屏幕时会划分为12列，其他尺寸的屏幕没有样式
> 3.  每行最多12列，多于12列之后会折行再次排列划分

测试：

`.row`定义的全局css样式为：  
所以抵消了父元素`container-fluid`里面的槽宽，不会影响内容

.row { 
      margin-right: -15px;
      margin-left: -15px;
    }

每一个`col-尺寸-`的样式中都有padding(槽宽)

padding-right: 15px;
      padding-left: 15px;

所以要想适应各种屏幕，css样式为：

.sty{ 
                border: 1px solid red;
            }
            .borde{ 
                border: 1px solid #000000;
                height: 100px;
                padding: 0 !important;/*直接删除原有padding，抵消父元素row的槽宽*/
                box-sizing: border-box;
            }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]

1.  性能优化：根据屏幕尺寸动态设置类名称

###### 6. 显示隐藏 ######

`visible- hidden-`原理：`display-none;`根据媒体查询相应的显示

.visible-xs, .visible-sm, .visible-md, .visible-lg { 
      display: none !important;
    }

根据媒体查询设置相关显示  
而hidden是只有相关媒体查询直接设置为隐藏

@media (max-width: 767px) { 
      .hidden-xs { 
        display: none !important;
      }
    }
    @media (min-width: 768px) and (max-width: 991px) { 
      .hidden-sm { 
        display: none !important;
      }
    }
    @media (min-width: 992px) and (max-width: 1199px) { 
      .hidden-md { 
        display: none !important;
      }
    }
    @media (min-width: 1200px) { 
      .hidden-lg { 
        display: none !important;
      }
    }

例如，想要某种效果只在大屏幕时显示，在中屏幕上显示为各占一行，其他为隐藏

大屏幕  
![在这里插入图片描述][20191030233418842.png]  
中屏幕  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]  
其他屏幕隐藏

###### 7. 行元素的偏移（一行不满12列） ######

`offset`偏移量：页面占不满一整行时想要右对齐，原理是设置`margin-left`;

**![加粗样式][20191030234437910.png]**

`push`设置`left`值往右走（`relative`相对定位可能重叠）;`pull`刚好相反

![在这里插入图片描述][20191031000801581.png]

###### 8. 栅格嵌套 ######

![在这里插入图片描述][20191031002616534.png]

解决方法

> 1.  内部嵌套不写row
> 2.  内部row单独定义margin:0  
>     ![在这里插入图片描述][20191031003031367.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: /images/20230531/0fc7958a341d4855aeb4cabdf6702472.png
[20191030233418842.png]: /images/20230531/9af0ee73123f436a851c64e23d81c1d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: /images/20230531/e19c1541fa574e8d95fd25c05bfb56d4.png
[20191030234437910.png]: /images/20230531/eab44b5a43a14e179ba8e371bb84afff.png
[20191031000801581.png]: /images/20230531/4a8e35f7e6e14effa5327953ef518a54.png
[20191031002616534.png]: /images/20230531/7cebb6524b87406bafe4e35f117ce127.png
[20191031003031367.png]: /images/20230531/552fec4e81fa4cea99dc195c1eced131.png

bootstrap栅格系统

发表评论取消回复

还没有评论，来说两句吧...

相关阅读