03-(Bootstrap3)栅格系统

七色的天空

已于 2023-10-30 20:44:30 修改

阅读量104

点赞数

分类专栏： 06_BootStrap 文章标签： bootstrap 前端 html

于 2023-10-29 06:23:52 首次发布

本文链接：https://blog.csdn.net/q506174602/article/details/134099183

版权

06_BootStrap 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

Bootstrap 的栅格系统是一个用于创建响应式和灵活网格布局的强大工具。它允许您将页面内容划分为等宽的列，以适应不同大小的屏幕设备。

栅格系统由一系列"行（rows）"和"列（columns）"组成。每一行被分为12个等宽的列。通过将列组合在一起，可以创建出各种不同的布局。

使用栅格系统非常简单。以下是一些栅格系统的基本概念：

.container: .container 是包裹内容的容器，用于限制内容的宽度，并通过添加左右边距来使内容居中。

.row: .row 用于包含一组列（columns）。所有的列必须放在 .row 的内部。

.col-*: .col-*用于定义列的大小，其中 * 可以是一个数字（1-12）或者一个屏幕大小的前缀(sm,md,lg,xl)，用于指定在不同屏幕大小下的列宽。

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">
      <!-- 第一个列 -->
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <!-- 第二个列 -->
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <!-- 第三个列 -->
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
      <!-- 第四个列 -->
    </div>
  </div>
</div>

在上面的示例中，我们创建了一个包含4个列的行。这些列将在小屏幕设备和大屏幕设备上具有不同的宽度。在小屏幕（sm）上，每个列将占用一半的宽度，而在大屏幕（lg）上，则为四分之一的宽度。

offet偏移列

在 Bootstrap中，.col-md-offset-3-*类用于为列添加偏移量。偏移量允许您将列向右移动一定的空间，以创建更灵活的布局。

偏移量类的命名方式与列类（.col-*）类似，其中*是一个数字（1-12）或一个屏幕大小的前缀（sm,md,lg,xl）。偏移量值表示要向右移动的列数。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>栅格系统</title>
	<link rel="stylesheet" type="text/css" href="bootstrap-v3/css/bootstrap.css">
	<style type="text/css">
		.box1 {
			background-color: orange;
		}
		.box1-1 {
			background-color: red;
		}
		.box1-2 {
			background-color: green;
		}
		.box1-3 {
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="container box1">
		<div class="row">
			<div class="col-md-3 box1-1">内容1</div>
			<div class="col-md-3 col-md-offset-3 box1-2">内容2</div>
		</div>
	</div>
	
</body>
</html>

上述运行结果:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>栅格系统</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="bootstrap-v3/css/bootstrap.css"
    />
    <style type="text/css">
      .box1 {
        background-color: orange;
      }
      .box1-1 {
        background-color: red;
      }
      .box1-2 {
        background-color: green;
      }
      .box1-3 {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="container box1">
      <!-- 第一行 -->
      <div class="row">
        <div class="col-md-6 box1-1">
          <!-- 父列的左侧一半 -->
          内容1
        </div>
        <div class="col-md-6 box1-2">
          <!-- 父列的右侧一半 -->
          内容2
        </div>
      </div>
    </div>
  </body>
</html>

上述运行结果:

列嵌套

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>栅格系统</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="bootstrap-v3/css/bootstrap.css"
    />
    <style type="text/css">
      .box1 {
        background-color: orange;
      }
      .box1-1 {
        background-color: red;
      }
      .box1-2 {
        background-color: green;
      }
      .box1-3 {
        background-color: blue;
      }
	  .box1-4 {
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="container box1">
      <!-- 第一行 -->
      <div class="row">
		<!-- 第一列 -->
        <div class="col-md-6 box1-1">
          <!-- 父列的左侧一半 -->
          内容1
        </div>
		<!-- 第二列 -->
        <div class="col-md-6 box1-2">
			内容2
          <!-- 行中行 -->
          <div class="row">
            <div class="col-md-6 box1-3">
              <!-- 父列的左侧三分之二 -->
              内容3
            </div>
            <div class="col-md-4 box1-4">
              <!-- 父列的右侧三分之一 -->
              内容4
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

上述运行结果: