BootStrap-栅格系统

BootStrap栅格系统知识详解

原创已于 2025-01-20 19:59:34 修改 · 1.3k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #前端 #html

于 2025-01-20 19:16:25 首次发布

BootStrap 专栏收录该内容

3 篇文章

订阅专栏

BootStrap-栅格系统

3.1 知识回顾
3.2 准备工具
3.3 栅格系统
- 3.3.1 认识
- 3.3.2 举例
- 3.3.3 分类

3.1 知识回顾

点击学习：BootStrap-初体验

点击学习：BootStrap-导航栏

3.2 准备工具

准备工具
Python 3.12
PyCharm Community Edition 2024.2.3
BootStrap v3.4.1

ps.上述工具均为举例，大家可以选择使用不同的工具版本。但需要注意，BootStrap v3 和 v5 版本存在一定的差异，该差异可能会导致CSS显示效果出现失误。

3.3 栅格系统

3.3.1 认识

首先，我们先来认识一下什么是栅格系统。
我们可以登陆BootStrap官网进行简单的了解。

点击跳转：BootStrap v3 全局CSS样式

Alt
Alt
从上图中我们不难发现，栅格系统将整体划分为了12个格子。

3.3.2 举例

下面我们进行一个简单的尝试：

新建一个HTML文件，并引用BootStrap v3中的CSS包。

<head>

    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">

</head>

在div标签中输入以下代码：
我们让左边的栅格占2个单位大小并呈现红色，让右边的栅格占10个单位大小并呈现绿色。

<body>

    <div>
      <div class="col-xs-2" style="background-color:red">1</div>
      <div class="col-xs-10" style="background-color:green">2</div>
    </div>

</body>

得出如下效果图

我们可以清晰地看出左右两边栅格在颜色和大小等方面的差异。

3.3.3 分类

响应式

类前缀	.col-sm-	.col-md-	.col-lg-
最大宽度	750px	970px	1170px

栅格宽度要大于最大宽度时，该栅格才生效。如果屏幕显示宽度持续缩小，该栅格就会改变原有的左右布局，呈现上下放置的效果。

非响应式
在上文3.3.2举例中所使用的就是非响应式.col-xs栅格。
列偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">

</head>
<body>
    <div>
      <div class="col-sm-offset-2 col-sm-6" style="background-color:green">2</div>
    </div>
</body>
</html>