css 实现 Bootstrap 网格系统,12栏栅格布局

作者: tww844475003 分类: 前端开发 发布时间: 2021-06-18 22:27

网格系统

在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效地使用 HTML 和 CSS 的方法。
  • Grid.css
.grid {
  width: 100%;
}
.row:before, .row:after {
  content: "";
  display: block;
  height: 0;
  width: 0;
  visibility: hidden;
  clear: both;
}
[class*='col-'] {
  float: left;
  min-height: 1px;
  width: 8.33%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  padding: 15px;
}
.col-1 {
  width: 8.33%;
}
.col-2 {
  width: 16.66%;
}
.col-3 {
  width: 25%;
}
.col-4 {
  width: 33.33%;
}
.col-5 {
  width: 41.66%;
}
.col-6 {
  width: 50%;
}
.col-7 {
  width: 58.33%;
}
.col-8 {
  width: 66.66%;
}
.col-9 {
  width: 75%;
}
.col-10 {
  width: 83.33%;
}
.col-11 {
  width: 91.66%;
}
.col-12 {
  width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS实现栅格布局</title>
  <link href="grid.css" rel="stylesheet" />
  <style type="text/css">
    .container {
      max-width: 1380px;
      margin: 0 auto;
    }
    [class*='col-'] {
      border: 1px solid #ccc;
      border-radius: 2px;
      background-color: aliceblue;
    }
    .grid .row {
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="grid">
      <div class="row">
        <div class="col-1">1</div>
        <div class="col-11">11</div>
      </div>
      <div class="row">
        <div class="col-10">2</div>
        <div class="col-2">10</div>
      </div>
      <div class="row">
        <div class="col-3">3</div>
        <div class="col-3">3</div>
        <div class="col-6">6</div>
      </div>
      <div class="row">
        <div class="col-4">4</div>
        <div class="col-4">4</div>
        <div class="col-4">4</div>
      </div>
      <div class="row">
        <div class="col-6">6</div>
        <div class="col-6">6</div>
      </div>
    </div>
  </div>
</body>
</html>

这样一个简单的网格系统布局已经实现,

那在一个响应式布局大行其道的网络环境中,我们如何把上面的栅格布局改成响应式了,能在各种智能设备中都有比较好的体验了(移动设备、平板电脑、笔记本电脑、台式机)。要实现不需要 javascript 这种动态脚本,css 媒体查询就完全可以实现

媒体查询是非常别致的”有条件的 CSS 规则”。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件,则应用相应的样式。

Bootstrap 中的媒体查询允许您基于视口大小移动、显示并隐藏内容。下面的媒体查询在 LESS 文件中使用,用来创建 Bootstrap 网格系统中的关键的分界点阈值。

/* 超小设备(手机,小于 768px) */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备(平板电脑,768px 起) */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备(台式电脑,992px 起) */
@media (min-width: @screen-md-min) { ... }

/* 大型设备(大台式电脑,1200px 起) */
@media (min-width: @screen-lg-min) { ... }

媒体查询代码中还可以包含 max-width,从而将 CSS 的影响限制在更小范围的屏幕大小之内

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Bootstrap 网格系统 网格选项

超小设备手机(<768px)小型设备平板电脑(≥768px)中型设备台式电脑(≥992px)大型设备台式电脑(≥1200px)
网格行为一直是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的
最大容器宽度
一直是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的
Class 前缀
.col-xs-.col-sm-.col-md-.col-lg-
列数量和
12121212
最大列宽
Auto60px78px95px
间隙宽度
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
30px
(一个列的每边分别 15px)
可嵌套
YesYesYesYes
偏移量
YesYesYesYes
列排序
YesYesYesYes
前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注