本文概述
- Bootstrap 4网格类
- Bootstrap 4网格的结构
- 相等列示例
- 不等列示例
“在图形设计中,网格是由一系列相交的直线(垂直,水平)线组成的结构(通常是二维的),用于构造内容。在打印设计中,网格被广泛用于设计布局和内容结构。在网页设计中,使用HTML和CSS快速有效地创建一致的布局是一种非常有效的方法。”
Boostrap网格系统
Bootstrap网格系统在整个页面上最多允许12列。你可以单独使用全部12列,也可以将这些列组合在一起以创建更宽的列。
文章图片
Bootstrap网格系统会响应,并且会根据屏幕大小自动重新排列列。
网格类别:
Bootstrap网格系统有四个类:
- xs(用于手机)
- sm(用于平板电脑)
- md(适用于台式机)
- lg(适用于大型台式机)
Boostrap网格的基本结构:
<
div class="row">
<
div class="col-*-*"><
/div>
<
/div>
<
div class="row">
<
div class="col-*-*"><
/div>
<
div class="col-*-*"><
/div>
<
div class="col-*-*"><
/div>
<
/div>
<
div class="row">
...
<
/div>
创建Bootstrap网格时,请遵循以下说明:
- 创建一行(< div class =“ row”> )。
- 在网格中添加所需的列数(带有适当的.col-*-*类的标签)。
- 请注意,.col-*-*中的数字对于每行总应总计为12。
对于相等的列:
<
!DOCTYPE html>
<
html lang="en">
<
head>
<
title>Job<
/title>
<
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<
/head>
<
body><
div class="container">
<
h1>Grid Example<
/h1><
div class="row">
<
div class="col-md-3"style="background-color:lavender;
">Rahul<
/div>
<
div class="col-md-3"style="background-color:lavenderblush;
">Vijay<
/div>
<
div class="col-md-3"style="background-color:lavender;
">Kartik<
/div>
<
div class="col-md-3"style="background-color:lavenderblush;
">Ajeet<
/div>
<
/div><
/div>
<
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><
/script>
<
script src="http://img.readke.com/220416/150U04910-2.jpg"><
/script>
<
/body>
<
/html>
对于不相等的列:
<
!DOCTYPE html>
<
html lang="en">
<
head>
<
title>Job<
/title>
<
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<
/head>
<
body><
div class="container">
<
h1>Grid Example<
/h1><
div class="row">
<
div class="col-md-1"style="background-color:lavender;
">Rahul<
/div>
<
div class="col-md-2"style="background-color:lavenderblush;
">Vijay<
/div>
<
div class="col-md-4"style="background-color:lavender;
">Kartik<
/div>
<
div class="col-md-5"style="background-color:lavenderblush;
">Ajeet<
/div>
<
/div><
/div><
script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"><
/script>
<
script src="http://img.readke.com/220416/150U04910-2.jpg"><
/script>
<
/body>
<
/html>
Bootstrap 4网格类Bootstrap 4网格系统中有5个类。
- .col-(超小型设备-屏幕宽度小于576px)
- .col-sm-(小型设备-屏幕宽度等于或大于576px)
- .col-md-(中型设备-屏幕宽度等于或大于768像素)
- .col-lg-(大型设备-屏幕宽度等于或大于992px)
- .col-xl-(xlarge设备-屏幕宽度等于或大于1200px)
Bootstrap 4网格的结构请参阅Bootstrap 4网格的基本结构:
<
!-- Control the column width, and how they should appear on different devices -->
<
div class="row">
<
div class="col-*-*"><
/div>
<
div class="col-*-*"><
/div>
<
/div>
<
div class="row">
<
div class="col-*-*"><
/div>
<
div class="col-*-*"><
/div>
<
div class="col-*-*"><
/div>
<
/div><
!-- Or let Bootstrap automatically handle the layout -->
<
div class="row">
<
div class="col"><
/div>
<
div class="col"><
/div>
<
div class="col"><
/div>
<
/div>
首先创建一行(< div class =“ row”> ),然后添加所需的列数(带有相应的.col-*-*类的标签)。
此处:在.col-*-*中,第一个星号(*)表示响应度:sm,md,lg或xl,而第二个星号表示一个数字,每行应加起来为12。
相等列示例让我们以示例为例,看看如何在所有设备和屏幕宽度上创建等宽的列:
例
<
!DOCTYPE html>
<
html lang="en">
<
head>
<
title>Bootstrap Example<
/title>
<
meta charset="utf-8">
<
meta name="viewport" content="width=device-width, initial-scale=1">
<
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"><
/script>
<
script src="http://img.readke.com/220416/150U02N2-6.jpg"><
/script>
<
script src="http://img.readke.com/220416/150U02R3-7.jpg"><
/script>
<
/head>
<
body><
div class="container-fluid">
<
h2>Three equal-width columns<
/h2>
<
div class="row">
<
div class="col" style="background-color:lavender;
">.col<
/div>
<
div class="col" style="background-color:orange;
">.col<
/div>
<
div class="col" style="background-color:lavender;
">.col<
/div><
/div>
<
/div><
/body>
<
/html>
不等列示例【bootstrap网格grid】让我们以一个示例为例,看看如何创建一个不等宽的列,该列支持平板电脑并缩放到额外的大型桌面:
例:
<
!DOCTYPE html>
<
html lang="en">
<
head>
<
title>Bootstrap Example<
/title>
<
meta charset="utf-8">
<
meta name="viewport" content="width=device-width, initial-scale=1">
<
link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<
script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"><
/script>
<
script src="http://img.readke.com/220416/150U02N2-6.jpg"><
/script>
<
script src="http://img.readke.com/220416/150U02R3-7.jpg"><
/script>
<
/head>
<
body><
div class="container-fluid">
<
h1>Unequal Columns<
/h1>
<
p>Resize the browser window to see the effect.<
/p>
<
p>The columns will automatically stack on top of each other when the screen is less than 576px wide.<
/p>
<
div class="row">
<
div class="col-sm-4" style="background-color:lavender;
">.col-sm-4<
/div>
<
div class="col-sm-8" style="background-color:lavenderblush;
">.col-sm-8<
/div>
<
/div>
<
/div><
/body>
<
/html>