bootstrap之栅格系统

最新推荐文章于 2022-01-15 00:14:33 发布

XLjiqimaobuchiyu

最新推荐文章于 2022-01-15 00:14:33 发布

阅读量851

点赞数

CC 4.0 BY-SA版权

分类专栏： Bootstrap 文章标签： bootstrap 栅格系统自适应

本文链接：https://blog.csdn.net/XLjiqimaobuchiyu/article/details/77717871

Bootstrap 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Bootstrap中的响应式栅格系统，该系统适用于不同尺寸的屏幕，并提供了详细的使用指南及示例代码。栅格系统由行(row)和列(column)组成，可根据屏幕尺寸变化自动调整布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bootstrap之栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局。相应的设备屏幕使用相应的类前缀，例如想要使用在电脑屏幕显示器上显示栅格系统，这里使用前缀为中等屏幕桌面显示器为例；

超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)

类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`

使用栅格系统最好添加<div class="container"></div>或者<div class="container-fluid"></div>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>


<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<style>
.row .col-md-1{
border:1px solid blue;
}
</style>

</head>
<body>

<div class="container">
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-2</div>
<div class="col-md-1">.col-md-3</div>
<div class="col-md-1">.col-md-4</div>
<div class="col-md-1">.col-md-5</div>
<div class="col-md-1">.col-md-6</div>
<div class="col-md-1">.col-md-7</div>
<div class="col-md-1">.col-md-8</div>
<div class="col-md-1">.col-md-9</div>
<div class="col-md-1">.col-md-8</div>
<div class="col-md-1">.col-md-7</div>
<div class="col-md-1">.col-md-6</div>
</div>
</div>
</body>
</html>

根据自己想要的排版进行排版选择，在bootstrap中一行可以最多放12列，当类为col-md-1，一行可以放12列；当类为col-md-2，一行可以放6列，以此类推。。。。。

栅格参数

通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的。

	超小屏幕手机 (<768px)	小屏幕平板 (≥768px)	中等屏幕桌面显示器 (≥992px)	大屏幕大桌面显示器 (≥1200px)
栅格系统行为	总是水平排列	开始是堆叠在一起的，当大于这些阈值时将变为水平排列C
`.container` 最大宽度	None （自动）	750px	970px	1170px
类前缀	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
列（column）数	12
最大列（column）宽	自动	~62px	~81px	~97px
槽（gutter）宽	30px （每列左右均有 15px）
可嵌套	是
偏移（Offsets）	是
列排序	是