bootstrap网格grid

本文概述

  • Bootstrap 4网格类
  • Bootstrap 4网格的结构
  • 相等列示例
  • 不等列示例
维基百科说:
“在图形设计中,网格是由一系列相交的直线(垂直,水平)线组成的结构(通常是二维的),用于构造内容。在打印设计中,网格被广泛用于设计布局和内容结构。在网页设计中,使用HTML和CSS快速有效地创建一致的布局是一种非常有效的方法。”
Boostrap网格系统
Bootstrap网格系统在整个页面上最多允许12列。你可以单独使用全部12列,也可以将这些列组合在一起以创建更宽的列。
bootstrap网格grid

文章图片
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。
Boostrap网格示例
对于相等的列:
< !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>

    推荐阅读