Bootstrap 的网格系统

最新推荐文章于 2023-09-05 11:21:09 发布

@梦屿千寻 @

最新推荐文章于 2023-09-05 11:21:09 发布

阅读量163

点赞数

分类专栏： Bootstrap

本文链接：https://blog.csdn.net/weixin_42433653/article/details/106538747

版权

Bootstrap 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

Bootstrap 网格系统的工作原理

行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。
使用行来创建列的水平组。
内容应该放置在列内，且唯有列可以是行的直接子元素。
预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。
列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。
网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。、

网格的选项图例

	超小设备手机（<768px）	小型设备平板电脑（≥768px）	中型设备台式电脑（≥992px）	大型设备台式电脑（≥1200px）
网格行为	一直是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的	以折叠开始，断点以上是水平的
最大容器宽度	None (auto)	750px	970px	1170px
Class 前缀	.col-xs-	.col-sm-	.col-md-	.col-lg-
列数量和	12	12	12	12
最大列宽	Auto	60px	78px	95px
间隙宽度	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）	30px （一个列的每边分别 15px）
可嵌套	Yes	Yes	Yes	Yes
偏移量	Yes	Yes	Yes	Yes
列排序	Yes	Yes	Yes	Yes

基本的网格结构：

<div class="container">
   <div class="row">
      <div class="col-*-*"></div>
      <div class="col-*-*"></div>      
   </div>
   <div class="row">...</div>
</div>
<div class="container">....

列排序的例子如下图：

代码：

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Bootstrap 实例列排序</title>
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<h1>Hello, world!</h1>

</div>

</body>
</html>

@梦屿千寻 @

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap 的网格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。Bootstrap 网格系统的工作原理行必须放置在.containerclass 内，以便获得适当的对齐（alignment）和内边距（padding）。使用行来创建列的水平组。内容应该放置在列内，且唯有列可以是行的直接子元素。预定义的网格类，比如.row和.col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。列...
复制链接

扫一扫