Bootstrap框架——栅格系统

最新推荐文章于 2024-04-17 00:29:58 发布

留家里哦哦哦

最新推荐文章于 2024-04-17 00:29:58 发布

阅读量449

点赞数 2

分类专栏： Bootstrap学习文章标签： bootstrap css html

本文链接：https://blog.csdn.net/qq_46304554/article/details/120286690

版权

本文介绍了Bootstrap的响应式栅格系统，该系统通过行(row)和列(column)的组合实现页面布局。内容详细解释了栅格的工作原理，包括在不同屏幕尺寸下如何自动调整列数，并提供了代码示例和效果展示。

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

1.简介

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

2.工作原理：

“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。
栅格参数
在这里插入图片描述
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-md-* 栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何 .col-lg-* 不存在，也影响大屏幕设备。
下面进行实践学习：
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Bootstrap CSS排版学习</title>
		<link rel="stylesheet" href="bootstrap.min.css">
		<style>
		.row{
   
			margin-top: 20px;
		}
		.row .row{
   
			margin-top:10px;
			margin-bottom:

最低0.47元/天解锁文章

留家里哦哦哦

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Bootstrap框架——栅格系统

1.简介Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。2.工作原理：“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）
复制链接

扫一扫

专栏目录