BootStrap栅格系统

最新推荐文章于 2024-10-09 18:18:27 发布

所追寻的风

最新推荐文章于 2024-10-09 18:18:27 发布

阅读量152

点赞数 1

分类专栏：前端文章标签： bootstrap html css html5 css3

本文链接：https://blog.csdn.net/the_Discovery/article/details/107568796

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1. HTML结构-Grid System

1.1 container

body中的所有元素被div.cnotainer或者div.container-fluid或者其他container包裹。

container	container-fluid
页面两侧有较大外边距，居中显示	流式布局，页面两端没有边距，适合移动设备布局

下表为官网给出的，不同的container在不同屏幕尺寸下所对应的布局宽度。

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
`.container`	100%	540px	720px	960px	1140px
`.container-sm`	100%	540px	720px	960px	1140px
`.container-md`	100%	100%	720px	960px	1140px
`.container-lg`	100%	100%	100%	960px	1140px
`.container-xl`	100%	100%	100%	100%	1140px
`.container-fluid`	100%	100%	100%	100%	100%

1.2 row

row必须为container的直接子元素，以行的形式逐行布局。

1.3 col

每一个div.row中，有多个列col构成。将一行的宽度十二等分，每一列获得其中的份数。

不同屏幕尺寸下不同列模块所占用的份数由以下表格中的类是书写方法所确定。

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Column ordering	Yes

如果只书写div.col类，则平分行的宽度。

行内的列的数量可以由行来预定义，div.row-col-*。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BootStrap Application</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
    <script src="./bootstrap/js/jquery3.5.1.min.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <style>
        .row div:nth-child(2n) {
            background-color: #f0f;
        }

        .row div:nth-child(2n+1) {
            background-color: #ff0;
        }
    </style>
</head>

<body>
    <div class="container-fluid"> 
        <div class="row">
            <div class="col-xl-3">A</div>
            <div class="col-xl-3">B</div>
            <div class="col-xl-3">C</div>
            <div class="col-xl-3">D</div>
        </div>
        <div class="row"></div>

    </div>
</body>

</html>

2. 对齐方式

通过BootStrap的类名方式对齐，IE10-11不支持。

2.1 Vertical alignment

2.1.1 将类名设置在row标签上

在这里插入图片描述

<div class="container">
    
  <!-- 顶端对齐 -->
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
    
  <!-- 居中对齐 -->
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
    
  <!-- 底端对齐 -->
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
    
</div>

2.1.2 将类名设置在col标签上

在这里插入图片描述

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

2.2 Horizontal alignment

在这里插入图片描述

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>