Bootstrap栅格系统

最新推荐文章于 2024-05-08 16:31:38 发布
最新推荐文章于 2024-05-08 16:31:38 发布
阅读量2k 收藏 17
点赞数 1
分类专栏： Bootstrap 文章标签： bootstrap 栅格系统 响应式布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xun__xing/article/details/107591022
版权

栅格系统

一、运作

1.网格选项

在这里插入图片描述
即引入样式后，最多可将屏幕分为12栏，可再通过需求合并。

2.基本结构

首先要布置基本结构和公共的class类名

	<div class="container-fluid">
		<div class="row"></div>
	</div>
	<div class="container">
		<div class="row"></div>
	</div>

3.选择自适应类型

1.container-fluid

  1. xl为超大屏。该种方法width=100%，屏幕宽度>=1200时一行可以设置12个列。屏幕尺寸<1200的时候，一行只能容纳1列
	<div class="container-fluid">
		<div class="row">
			<div class="col-xl-1">第1列</div>
			<div class="col-xl-1">第2列</div>
			<div class="col-xl-1">第3列</div>
			<div class="col-xl-1">第4列</div>
			<div class="col-xl-1">第5列</div>
			<div class="col-xl-1">第6列</div>
			<div class="col-xl-1">第7列</div>
			<div class="col-xl-1">第8列</div>
			<div class="col-xl-1">第9列</div>
			<div class="col-xl-1">第10列</div>
			<div class="col-xl-1">第11列</div>
			<div class="col-xl-1">第12列</div>
		</div>
	</div>

在这里插入图片描述
在这里插入图片描述

3.container

  1. 该方法超过最大设置值时，会固定宽度居中显示。
	<div class="container">
		<div class="row">
			<div class="col-xl-3">//一共12列，每三列合并
				xl为超大屏。屏幕宽度>=1200，容器的宽度固定为1140px，
				一行可以设置12个列。屏幕尺寸<1200的时候，一行只能容纳1列
			</div>
			<div class="col-xl-3"></div>
			<div class="col-xl-3"></div>
			<div class="col-xl-3"></div>
		</div>
	</div>

在这里插入图片描述
在这里插入图片描述
当容器超过设置值时，列的宽度也会自适应增加，即百分比自适应

	<div class="container">
		<div class="row">
			<div class="col-sm-3">sm为小屏。屏幕宽度>=576px，容器的宽度固定为540px，一行可以设置12个列。屏幕尺寸<576的时候，一行只能设置1列</div>
			<div class="col-sm-3"></div>
			<div class="col-sm-3"></div>
			<div class="col-sm-3"></div>
		</div>
	</div>

在这里插入图片描述

在这里插入图片描述

二、应用

1.设置等宽列，平分宽度

	<div class="row mt-5">
		<div class="col">等宽列</div>
		<div class="col">等宽列</div>
		<div class="col">等宽列</div>
		<div class="col">等宽列</div>
		<div class="col">等宽列</div>
		<div class="col">等宽列</div>
		<div class="col">等宽列</div>
	</div>

在这里插入图片描述
在这里插入图片描述

2.设置多行等宽列，选择断行

在希望断开的地方添加一个.w-100的class，能够让后面的列换行

	<div class="row mt-5">
		<div class="col">等宽列1</div>
		<div class="col">等宽列2</div>
		<div class="w-100" style="height: auto;border: none;"></div>	
		<div class="col">等宽列3</div>
		<div class="col">等宽列4</div>
	</div>

在这里插入图片描述

3.设置一个列宽，剩下的自动平分

	<div class="row mt-5">
		<div class="col-sm-7">在小屏幕下占7列</div>
		<div class="col">自动平分剩余的宽度</div>
		<div class="col">自动平分剩余的宽度</div>
		<div class="col">自动平分剩余的宽度</div>
	</div>

在这里插入图片描述
在这里插入图片描述

4.设置根据内容调整列的宽度

使用.col-{breakpoint}-auto

	<div class="row mt-5">
		<div class="col-md-auto">在中等屏幕下由内容撑开宽度</div>
		<div class="col">自动平分剩余的宽度</div>
		<div class="col-lg-2">在大屏下占2列</div>
	</div>

在这里插入图片描述
在达到其它要求时才会自适应不换行
在这里插入图片描述

5.设置所有尺寸下，都占同样的列数

	<div class="row mt-5">
		<div class="col-8">所有尺寸下都占8列</div>
		<div class="col-4">所有尺寸下都占4列</div>
	</div>

在这里插入图片描述

6.混合排列或者组合模式

  1. 超大屏幕下一行显示6个div,一个div应该占2列
  2. 大屏幕下一行显示4个div,一个div应该占3列
  3. 中等屏幕下一行显示3个div,一个div应该占4列
  4. 小屏幕下一行显示2个div,一个div应该占6列
  5. 超小屏幕下一行显示1个div,一个div应该占12列
	<div class="row mt-5">
		<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
		<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
		<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
		<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
		<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
		<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
	</div>

在这里插入图片描述
在这里插入图片描述

7.对齐

1.行的对齐方式

  1. align-items-start 顶对齐
  2. align-items-center 中间对齐
  3. align-items-end 底对齐
	<div class="row v-align">
		<div class="col align-self-start">垂直对齐-顶对齐-列的对齐方式</div>
		<div class="col align-self-center">垂直对齐-中间对齐-列的对齐方式</div>
		<div class="col align-self-end">垂直对齐-底对齐-列的对齐方式</div>
	</div>

在这里插入图片描述

2.列的单独对齐方式

  1. align-self-start 顶对齐
  2. align-self-center 中间对齐
  3. align-self-end 底对齐
	<div class="row v-align justify-content-start">
		<div class="col-4">水平对齐-左对齐</div>
		<div class="col-4">水平对齐-左对齐</div>
	</div>
	<div class="row v-align justify-content-center">
		<div class="col-4">水平对齐-居中对齐</div>
		<div class="col-4">水平对齐-居中对齐</div>
	</div>
	<div class="row v-align justify-content-end">
		<div class="col-4">水平对齐-右对齐</div>
		<div class="col-4">水平对齐-右对齐</div>
	</div>
	<div class="row v-align justify-content-around">
		<div class="col-4">水平对齐-分散居中对齐</div>
		<div class="col-4">水平对齐-分散居中对齐</div>
	</div>
	<div class="row v-align justify-content-between">
		<div class="col-4">水平对齐-左右两端对齐</div>
		<div class="col-4">水平对齐-左右两端对齐</div>
	</div>

在这里插入图片描述

8.列排序

使用.order-{breakpoint}- * ,3.x的版本使用的是.col-{breakpoint}-push- * .col-{breakpoint}-pull- * 来排序

	<div class="row mt-5">
		<div class="col">第1列</div>
		<div class="col order-12">第2列</div>//最大为12
		<div class="col order-6">第3列</div>
	</div>
	<div class="row mt-5">
		<div class="col">第1列</div>
		<div class="col order-xl-5">第2列</div>	<!-- 只有当屏幕尺寸>=1200的时候，才会进行排序 -->
		<div class="col order-xl-2">第3列</div>
	</div>
	<div class="row mt-5">
		<div class="col">第1列</div>
		<div class="col order-first">第2列</div>	<!-- order-first代表排在第1位，order-last代表排在最后一位 -->
		<div class="col order-last">第3列</div>
		<div class="col">第4列</div>
	</div>

在这里插入图片描述
在这里插入图片描述

9.列偏移

使用offset-{breakpoint}-*

	<div class="row mt-5">
		<div class="col-md-4">第1列</div>
		<div class="col-md-4 offset-md-4">往右偏移4列</div>
	</div>
	<div class="row mt-5">
		<div class="col-3 offset-md-3">第1列</div>
		<div class="col-3 offset-md-3">第2列</div>
	</div>
	<div class="row mt-5">
		<div class="col-sm-5 col-md-6">小屏占5列，中屏占6列</div>
		<div class="col-sm-5 offset-sm-3 col-md-6 offset-md-5">小屏偏移3列，中屏偏移5列</div>
	</div>

在这里插入图片描述
在这里插入图片描述

10.间距

使用margin工具可以让列之间产生间距
mr-{breakpoint}-auto 使右侧的列远离到最右边
ml-{breakpoint}-auto 使左侧的列远离到最左边

	<div class="row mt-5">
		<div class="col-md-4">第1列</div>
		<div class="col-md-4 ml-auto">第2列，跑到最右边</div>
	</div>
	<div class="row mt-5">
		<div class="col-md-3 ml-md-auto">在中屏下，离左边距离自动计算</div>
		<div class="col-md-3 ml-md-auto">在中屏下，离左边距离自动计算</div>
	</div>
	<div class="row mt-5">
		<div class="col-auto ml-auto">宽度由内容撑开</div>
		<div class="col-auto">宽度由内容撑开</div>
	</div>

小于中屏（768px）继续独占一行
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

11.嵌套

每一个列里面可以再继续放行，那嵌套里面的元素就会以父级的宽度为基准，再分12个列

	<div class="row mt-5">
		<div class="col-sm-9" style="height: 150px;background: grey;">
			父级的第1列
			<div class="row">//同级列数计算好，否则会
				<div class="col-sm-8 col-6">子级的第1列，小屏下占8列，超小屏下占6列</div>
				<div class="col-sm-4 col-6">子级的第2列，小屏下占4列，超小屏下占6列</div>
			</div>
		</div>
		<div class="col-sm-3" style="height: 150px;background: pink;">父级的第2列</div>
	</div>

在这里插入图片描述
在这里插入图片描述

飞羽逐星
关注
  • 1
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Bootstrap-栅格系统
sofia92的博客
03-25 2990
一、栅格参数是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs- 和 .col-md-。请看下面的实例，研究一下这些是如何工作的。 比如HTML代码：<div class="row"> <div class="col-xs-12 col-sm-9 col-md-6 col-lg-3"> content
bootstrap 栅格系统
酱油一哥的专栏
02-16 1772
bootstrap栅格系统 官方文档：bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的minxin用于生成更具语义的布局。 个人理解：bootstrap栅格系统通过提供预定义的类来对html元素进行组装展示，开发者只需要按照bootstrap定义的规则，使用相应
超清晰的Bootstrap栅格系统讲解（布局）
色彩变幻
12-29 1381
超级清晰的栅格系统讲解
一、Boostrap之栅格布局
最新发布
Itcodewizard的博客
05-08 742
本文主要介绍了：栅格布局中基本类（container、row、col、col-md-3等等）的使用方法和使用示例
bootstrap--栅格系统
chenqiangdage的专栏
05-15 2386
我想作为一个程序开发，最不想干的事就是前台页面的设计，没有多少技术含量，但是又是个精细活，你要知道很多的样式，记得人头大。好在bootstrap已帮你做好了这些问题了，这里写一些使用bootstrap心得其中bootstrap必须要了解的东西:栅格系统 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。页面布局不用过多的考虑了，你
Boostrap栅格系统
weixin_50659023的博客
11-19 81
Boostrap栅格系统（响应式，移动设备优先） 把一行分为12列（随着屏幕设备或视口尺寸的增加，系统会自动分为最多12列） <768px col-xs 超小（手机） 大于=768px col-sm 小（平板） 大于=992px col-md 中（笔记本桌面等） 大于=1200px col-lg 大 （大屏幕设备） （注：该为个人理解记忆，是正确答案，但不标准） ...
什么是栅格系统？Bootstrap执行栅格操作
zy1992As的博客
06-15 383
栅格系统英文为“grid systems”,也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口(viewport)尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。按照不同屏幕划分为1~12 等份。行(row) 可以去除父容器作用15px的边距。xs-extra small：超小;
bootstrap3入门一（栅格系统）
v587的博客
04-11 608
http://www.cnblogs.com/aehyok/tag/BootStrap前端设计/ 一、bootstrap开发环境搭建 1. 下载bootstrap, http://www.bootcss.com/ 2.  下载jquery, 通过IE直接访问http://code.jquery.com/jquery-2.0.3.min.js 3. 在html页面中导入bootstr
Bootstrap栅格系统的使用和理解2
08-31
Bootstrap栅格系统是一种流行的网页布局工具，用于创建响应式的网页设计。这个系统基于12列的网格模型，允许开发者在不同设备和屏幕尺寸上灵活地安排内容。在Bootstrap框架中，栅格系统的设计目的是使页面内容能够...
响应式框架Bootstrap栅格系统的实例
08-28
Bootstrap栅格系统实例详解 Bootstrap栅格系统是Bootstrap框架中的一种响应式布局系统，它可以根据不同的屏幕尺寸和设备类型来调整页面的布局和样式。下面我们来详解Bootstrap栅格系统的实例。 一、Bootstrap栅格...
浅析BootStrap栅格系统
09-02
Bootstrap栅格系统是前端开发中的一个核心组件，尤其在响应式设计中起着至关重要的作用。这个系统允许开发者创建灵活、自适应的布局，确保网页在不同屏幕尺寸下都能保持良好的视觉效果。下面我们将深入探讨这个系统...
Bootstrap栅格系统学习笔记
09-01
Bootstrap栅格系统是一种流行的网页布局工具，用于创建响应式、移动优先的设计。它允许开发者根据不同的设备屏幕尺寸灵活地组织内容。以下是对Bootstrap栅格系统的详细介绍： 1. **简介** Bootstrap栅格系统的核心...
Bootstrap栅格系统简单实现代码
08-31
Bootstrap栅格系统简单实现代码 Bootstrap栅格系统是Bootstrap框架中的一种布局系统，它可以帮助开发者快速创建响应式的网页布局。栅格系统的主要功能是将页面拆分为多个部分，各个部分可以根据不同的屏幕尺寸和...
简单介绍boostrap栅格系统
LuckXinXin的博客
04-17 208
Bootstrap的定义 bootstrap是一个结合html、css、js的前端框架，他是基于jQuery的，jQuery本身是能够兼容各大浏览器的，所以bootstrap对各种浏览器的兼容也是非常好的，再者，bootstrap一个非常大的特点就是它的响应式布局，所谓响应式布局就是用bootstrap写出来的页面能够根据屏幕尺寸的大小而进行相应的变化，比如用bootstrap写出来的同一份htm...
第三章 Boostrap 框架解析--栅格系统案例 笔记1
往前的娘娘
06-27 625
概述： Boostrap框架主要是有动态CSS语言LESS编写，简单一句就是Boostrap类似spring 集大成者 知识小点： Hack规则 来解决浏览器兼容问题CSS3书写规范遵循浏览器私有写法在前，标准写法在后框架为先，细节次之（先整体布局，而局部调整）CSS重设： 浏览器解析规则不一样导致两种浏览器的效果不一样，这就是一切归零思想，从零开始，boostrap是针对性的重设
Boostrap的栅格系统与自己额外定义的媒体查询的冲突
Hey firefly
02-19 1069
栅格系统与自己定义的媒体查询的交叉点
bootStrap的布局容器和网格系统
m0_59345890的博客
08-23 729
列用.col-xs-数值（列数）、.col-sm-数值、.col-md-数值、.col-lg-数值 类，分别对应超小屏（自动）、小屏（750px）、中屏（970px）、大屏（1170px）；就是改变左右浮动，并且设置浮动的距离，通过给列标签添加类名col-md-pull-数值（向左浮动一定数值的列数）和col-md-push-数值（向右浮动一定数值的列数）实现。不同的设备分辨率不同，如果我们在设置列的时候固定了col-类型，如col-md-*,那么当我们用移动端设备打开时不会达成我们想要的结果。
BootStrap容器介绍
hongcaixia的博客
04-21 4646
BootStrap容器介绍布局容器Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意，由于 padding 等属性的原因，这两种 容器类不能互相嵌套。.container 类用于固定宽度并支持响应式布局的容器。<div class="container"> ... </div> .container-fluid 类用于 100% 宽
Bootstrap的container和container-fluid
allway2的博客
11-22 6206
Containers容器 容器是Bootstrap中最基本的布局元素，在使用我们的默认网格系统时，容器是必需的。容器用于在其中容纳，填充和（有时）使内容居中。尽管可以嵌套容器，但是大多数布局都不需要嵌套容器。 Bootstrap带有三个不同的容器： .container，它max-width在每个响应断点处设置一个 .container-fluid，这是width: 100%所有断点 .container-{breakpoint}，width: 100%直到指定的断点为止 下表说明了每个容器max
bootstrap栅格系统
12-02
Bootstrap栅格系统是一种响应式的网格布局系统，它将页面水平划分为12列，并且可以根据不同的屏幕尺寸自动调整列的宽度。通过使用Bootstrap栅格系统，可以轻松地创建出适应不同屏幕尺寸的网页布局。 以下是一个简单的例子，展示如何使用Bootstrap栅格系统创建一个基本的网页布局： ```html <div class="container"> <div class="row"> <div class="col-sm-4">左侧栏</div> <div class="col-sm-8">主要内容</div> </div> </div> ``` 在这个例子中，我们使用了Bootstrap提供的.container类来创建一个容器，然后在容器内部创建了一个.row类来表示一行。在这一行中，我们使用了.col-sm-4和.col-sm-8类来分别表示左侧栏和主要内容所占的列数。在这里，我们使用了“sm”前缀来表示这些列只在小屏幕设备上生效，如果需要在其他屏幕尺寸上生效，可以使用其他前缀，例如“md”、“lg”等。 除了上述例子中的类名之外，Bootstrap还提供了许多其他的类名，可以用来控制栅格系统的行为，例如.offset-*、.order-*、.align-*等。通过灵活地使用这些类名，可以创建出各种不同的网页布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

飞羽逐星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值