Bootstrap学习之二：栅格化布局

最新推荐文章于 2023-05-25 21:07:27 发布

阿浩yohann

最新推荐文章于 2023-05-25 21:07:27 发布

阅读量3.1k

点赞数

分类专栏： bootstrap 文章标签： bootstrap 布局响应式 html

本文链接：https://blog.csdn.net/qq_27346299/article/details/72331243

版权

本文介绍了Bootstrap的栅格化布局，包括什么是栅格化布局、如何创建容器、构建栅格系统、列的嵌套、其他类和列偏移。通过这些内容，帮助读者理解并掌握如何使用Bootstrap创建响应式的页面布局。

摘要由CSDN通过智能技术生成

@(Bootstrap)

导言

前面我们讲了如何安装使用bootstrap框架，下面我们将会学习bootstrap的各种框架结构，布局。在这篇文章中将讲述如何使用栅格化布局

1.什么是栅格化布局

Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口（viewport）尺寸的增加，系统会自动分为最多12列。
我在这里是把Bootstrap中的栅格系统叫做布局。它就是通过一系列的行（row）与列（column）的组合创建页面布局，然后你的内容就可以放入到你创建好的布局当中。下面就简单介绍一下Bootstrap栅格系统的工作原理：
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

2.开始栅格化布局

a创建一个容器

我们要先创建一个容器来存放我们的内容，这个容器的名字加containner,我们来看一下bootstrap文档中的源码，这个样式在bootstrap.css文件中,下面是bootstrap中的源码

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