什么是bootstrap栅格化,bootstrap栅格系统原理

这篇文章中主要为你介绍了bootstrap栅格化,bootstrap栅格化的一些实现原理,bootstrap栅格化怎么实现响应式布局等等。

bootstrap中,栅格化的原理就是根据设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局;这样就可以让同一套页面可以适应不同分辨率的设备。

栅格化布局基本原理:栅格化把页面在水平方向等分为一定数目(假设为n)的基本宽度列

然后开发人员可根据需要给页面里的相应元素设置它应占据m个列宽。(m<=n)

我的理解:栅格化就是把浏览器的一行分为12列,自己去分配列。

bootstrap栅格系统概述

栅格系统(Grid Systems),即网格系统,它是一种清晰、工整的设计风格,用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上,一个印刷版面上划分了若干个格子,非常方便排版。

后来,栅格系统被应用于网页布局中,使用响应式栅格系统进行页面布局时,可以让网页根据不同的显示终端展示不同页面结构。例如,在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏。

Bootstrap栅格系统的基本使用方式

1、Bootstrap栅格系统为不同屏幕宽度定义了不同的类,直接为元素添加类名即可。

2、行必须包含在布局容器中,以便为其赋予合适的排列和内补。

3、通过行可以在水平方向创建一组列并且只有列可以作为行的直接子元素。

4、行使用样式.row,列使用样式.col-*-*,内容应当放置于列内,列大于12时,将会另起一行排列。

学生信息表格案例

案例实现思路:

1、首先需要在布局容器中创建一个类名为row的p元素作为行;

2、然后在行的容器内部创建列。布局容器中的行和列就构成了栅格系统。

3、栅格系统中的行和列类似于表格中的行和列。

1、编写HTML代码

<p class=”container”>
<p class=”row”>
<p class=”col-md-4″>姓名</p>
<p class=”col-md-4″>年龄</p>
<p class=”col-md-4″>性别</p>
</p>
<p class=”row”>
<p class=”col-md-4″>张三</p>
<p class=”col-md-4″>25</p>
<p class=”col-md-4″>男</p>
</p>
</p>

2、编写CSS样式

.row {
background-color: #eee;
font-size: 30px;
}
.col-md-4 {
border: 1px solid #fff;
text-align: center;
}

当浏览器显示宽度大于992px时,效果如下:

BOOTSTRAP

当浏览器宽度大于768px时,效果如下:

BOOTSTRAP2

当浏览器宽度小于768px时,效果如下:

BOOTSTRAP3

bootstrap栅格系统原理

Bootstrap采取12列的栅格体系,根据主流设备的尺寸进行分段,每段宽度固定,通过百分比和媒体查询实现响应式布局。

如果你是第一次接触bootstrap,你一定会为他的栅格化布局感到敬佩,他为我们提供了一套响应式的布局方案。

bootstrap栅格系统布局

简单地讲

1、Bootstrap内置了一套响应式、移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列。

2、网格系统的实现原理非常简单,仅仅是通过定义容器大小,平分12份(也有平分成24份或32份,但12份是最常见的),再调整内外边距,最后结合媒体查询,就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

媒体查询

在栅格系统中,我们在 Less 文件中使用以下媒体查询(media query)来创建关键的分界点阈值。

/* 超小屏幕(手机,小于 768px) */
/* 没有任何媒体查询相关的代码,因为这在 Bootstrap 中是默认的(还记得 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栅格系统

栅格系统(Grid Systems),即网格系统,它是一种清晰、工整的设计风格,用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上,一个印刷版面上划分了若干个格子,非常方便排版。

后来,栅格系统被应用于网页布局中,使用响应式栅格系统进行页面布局时,可以让网页根据不同的显示终端展示不同页面结构。例如,在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏。

BOOTSTRAP2

1.2 实现简单版栅格系统

Bootstrap1

1、编写HTML代码

<div class=”row”>
<header>首页</header>
</div>
<div class=”row”>
<nav class=”col1″>导航栏</nav>
<div class=”col2″>主要内容</div>
<aside class=”col1″>侧边栏</aside>
</div>
<div class=”row”>
<footer>页尾</footer>
</div>

2、编写CSS样式

.row {
width: 100%;
}
.row::after {
/*清除浮动*/
clear: left;
content: “”;
/*表示元素内容以块级显示*/
display: table;
}
/*匹配class属性值以col开头的元素*/
[class^=”col”] {
float: left;
background-color: #e0e0e0;
}
.col1 {
width: 25%;
}

.col2 {
width: 50%;
}
/*媒体查询:查询浏览器窗口的大小,根据浏览器窗口的大小设置页面的显示结构*/
@media(max-width:768px) {
.row {
width: 100%;
}

[class^=”col”] {
float: none;
width: 100%;
}
}

当浏览器窗口大于768px时,导航、主要内容和侧边栏3个模块呈横向排列。

Bootstrap3

当浏览器窗口小于或等于768px时,导航、主要内容和侧边栏3个模块呈纵向排列。

Bootstrap4

2 Bootstrap布局容器

2.1 布局容器

容器是Bootstrap中最基本的布局元素,容器用于在其中容纳、填充一些内容,以及有时需要使内容居中。

在实现Bootstrap页面布局容器之前,需要了解设备屏幕的尺寸。

屏幕大小 常见宽度范围
超小屏幕 <576px
平板 ≥576px
桌面显示器 ≥768px
大桌面显示器 ≥992px
超大桌面显示器 ≥1200px

在前面讲解的内容中,媒体查询需要使用@media关键字检测设备的宽度变化。

在Bootstrap中,我们不需要编写媒体查询的代码,而是使用一些内置的类名,用来自动检测不同的设备的宽度。

类名 说明
container 它在每个响应断点处设置了一个max-width最大宽度
container-fluid 它在每个响应断点处设置布局容器的宽度为100%
container-{breakpoint} 它在每个响应断点处设置布局容器的宽度为100%,直到达到指定的断点为止。

每个容器中的.container-fluid和.container等类,以及每个断点之间的比较。

类名 超小设备<576px 平板≥576px 桌面显示器≥768px 大桌面显示器≥992px 超大桌面显示器≥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%

2.2 .container-fluid类

Bootstrap 4中的.container-fluid类是一种占据全部视口的容器。接下来使用.container-fluid类演示在不同设备宽度下页面元素的显示效果。

<div class=”container-fluid”>橘猫吃不胖</div>
<style>
div {
background-color: orange;
}
</style>

响应式布局的容器是固定宽度,当改变浏览器窗口大小时,即在特大宽屏设备(≥1200px)、大屏设备(≥992px)、中屏设备(≥768px)、小屏设备(≥576px)和超小屏设备(<576px),页面中的div元素的宽度始终为页面宽度的100% 。

Bootstrap5

2.3 container类

Bootstrap 4中的.container类用于固定宽度并支持响应式布局的容器。

.container类的最大宽度根据移动端设备屏幕自动设置成100%、540px、720px、960px和1140px。

当浏览器窗口宽度大于等于1200px时。

Bootstrap6

当浏览器窗口宽度大于等于992px时。

Bootstrap7

当浏览器窗口宽度大于等于768px时。

Bootstrap8

当浏览器窗口宽度大于等于576px时。

Bootstrap9

当浏览器窗口宽度小于576px时。

Bootstrap10

3 栅格系统的基本使用

3.1 栅格系统的行和列

Bootstrap栅格系统是指将页面布局划分为等宽的列。随着屏幕或视口尺寸的增加,系统会自动分为1~12列。

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局。

开发者可以将内容放入这些创建好的布局中,然后通过列数的定义来模块化页面布局。

栅格系统页面的内容可以放入这些创建好的布局容器中,并且会根据父元素盒子(布局容器)尺寸的大小进行适当地调节,从而达到响应式页面布局的效果。

Bootstrap栅格系统的基本使用方式。

1、Bootstrap栅格系统为不同屏幕宽度定义了不同的类,直接为元素添加类名即可。

2、行必须包含在布局容器中,以便为其赋予合适的排列和内补。

3、通过行可以在水平方向创建一组列并且只有列可以作为行的直接子元素。

4、行使用样式.row,列使用样式.col-*-*,内容应当放置于列内,列大于12时,将会另起一行排列。

3.2 学生信息表格案例

案例实现思路:

1、首先需要在布局容器中创建一个类名为row的div元素作为行;

2、然后在行的容器内部创建列。布局容器中的行和列就构成了栅格系统。

3、栅格系统中的行和列类似于表格中的行和列。

1、编写HTML代码

<div class=”container”>
<div class=”row”>
<div class=”col-md-4″>姓名</div>
<div class=”col-md-4″>年龄</div>
<div class=”col-md-4″>性别</div>
</div>
<div class=”row”>
<div class=”col-md-4″>张三</div>
<div class=”col-md-4″>25</div>
<div class=”col-md-4″>男</div>
</div>
</div>

2、编写CSS样式

.row {
background-color: #eee;
font-size: 30px;
}
.col-md-4 {
border: 1px solid #fff;
text-align: center;
}

当浏览器显示宽度大于992px时,效果如下:

Bootstrap11

当浏览器宽度大于768px时,效果如下:

Bootstrap12

当浏览器宽度小于768px时,效果如下:

Bootstrap13

4 栅格系统的屏幕适配

4.1 栅格系统的类前缀

栅格系统提供了基本的前缀,用于在不同宽度的屏幕中实现不同的排列方式,列的类名可以写多个,也就是可以同时设置.col-*、.col-sm-*、.col-md-*、.col-lg-*和.col-xl-*类名。当同时使用这些类的时候,它会根据当前屏幕的大小来使相应的类生效,实现在不同屏幕下展示不同的页面结构。

超小设备<576px 平板≥576px 桌面显示器≥768px 大桌面显示器≥992px 超大桌面显示器≥1200px
container最大容器宽度 (自动)100% 540px 720px 960px 1140px
类前缀 .col- .col-sm- .col-md- .col-lg- .col-xl-

由于栅格系统就是默认将父元素分成12等份,所以可根据占据的份数来设置子元素的宽度,在设置列的宽度时,只需要在不同的类前缀后面加上栅格数量即可。

col-栅格的数量(设置超小设备);

col-sm-栅格的数量(设置平板);

col-md-栅格的数量(设置桌面显示器);

col-lg-栅格的数量(设置大桌面显示器);

col-xl-栅格的数量(设置超大桌面显示器)。

示例:不同的屏幕下设置不同的列的宽度

1、编写HTML代码部分

<div class=”container”>
<div class=”row”>
<div class=”col-sm-4 col-md-6″>第一列</div>
<div class=”col-sm-4 col-sm-6″>第二列</div>
<div class=”col-sm-4 col-sm-6″>第三列</div>
</div>
</div>

2、编写CSS样式
.row {
background-color: #eee;
}
.col-sm-4 {
background-color: #eee;
border: 1px solid #fff;
text-align: center;
font-size: 30px;
}

当浏览器显示大于992px时,效果如下:

Bootstrap14

当浏览器显示大于768px时,效果如下:

Bootstrap15

当浏览器显示屏小于768px时,效果如下:

Bootstrap16

4.3 利用栅格系统实现导航栏效果

导航栏的实现思路:

1、首先定义导航栏页面结构,通过Bootstrap栅格系统中的.container设置导航栏的布局容器。

2、在导航栏布局容器的每一行中设置不同的列数。

3、在中等屏幕设备下,占3份,即每列宽度为33.33%;

4、在小屏幕设备下,占12份,即每列宽度为100%。然后再去定义导航栏的页面样式。

1、HTML代码如下

<div class=”container”>
<ul class=”row”>
<li class=”col-md-3 col-sm-12″>首页</li>
<li class=”col-md-3 col-sm-12″>新闻资讯</li>
<li class=”col-md-3 col-sm-12″>联系我们</li>
<li class=”col-md-3 col-sm-12″>客服服务</li>
</ul>
</div>

2、CSS样式如下

* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.row {
margin-bottom: 0;
}
.container {
background-color: #eee;
}
.col-sm-12 {
text-align: center;
padding: 10px;
font-size: 30px;
}
li:hover {
background-color: white;
}

当浏览器显示大于992px时,效果如下:

Bootstrap17

当浏览器显示大于768px时,效果如下:

Bootstrap18

当浏览器显示小于768px时,效果如下:

Bootstrap19

5 栅格系统中列的操作

5.1 栅格系统中的列嵌套

栅格系统中内置的栅格系统可以将内容再次嵌套。

实现的主要思路:

我们在现有的div.col-md-*元素的内部,再去添加一个新的div.row元素和一系列的div.col-md-*元素。

1、编写HTML代码

<div class=”container”>
<div class=”row”>
<div class=”col-md-4″>
<div class=”row”>
<div class=”col-md-6″>第一列</div>
<div class=”col-md-6″>第二列</div>
</div>
</div>
<div class=”col-md-4″>第二列</div>
<div class=”col-md-4″> 第三列</div>
</div>
</div>

2、编写CSS样式

.row>div {
height: 50px;
background-color: #eee;
}
.col-md-4 {
border: 1px solid #fff;
text-align: center;
line-height: 50px;
font-size: 30px;
}
.col-md-6 {
border: 1px solid rebeccapurple;
}

Bootstrap20

Bootstrap21

Bootstrap22

5.2 栅格系统中的列偏移

栅格系统:使用.offset-md-*类将列向右侧偏移,

主要是通过使用.offset-md-*获取到当前元素并且增加了当前元素左侧的边距(margin)来实现的。

md可以使用sm、xl和lg等替代,分别表示在不同屏幕下设置列的偏移。

1、编写HTML代码

<div class=”container”>
<div class=”row”>
<div class=”col-md-3″>左侧</div>
<div class=”col-md-3 offset-md-6″>右侧</div>
</div>
</div>

2、编写CSS样式

.row div {
height: 50px;
background-color: #eee;
font-size: 30px;
}

Bootstrap23

当修改.offset-md-6中的份数6时,页面效果会发生变化。当小于6份时,右侧盒子向左侧移动,如设置份数为2,刷新浏览器。

Bootstrap24

将HTML中.container容器的内容进行替换。

<div class=”container”>
<!– 如果只有一个盒子,偏移 = (12 – 8) / 2 –>
<div class=”row”>
<div class=”col-md-8 offset-md-2″>中间盒子</div>
</div>
</div>

Bootstrap25

当修改offset-md-2中的份数2时,页面效果会发生变化。修改的份数大于2时,中间盒子会向右侧移动:

Bootstrap26

当数值大于等于12或者小于等于0时,中间盒子左侧对齐。

Bootstrap27

以上就是匿名技术栈为你分享的一些bootstrap栅格系统的知识点,希望可以帮助到同学,有什么疑问可以私信或者底部留言哦。

本文来自投稿,不代表(钦钦技术栈)立场,如若转载,请注明出处:https://www.qin1qin.com/catagory/323/

(0)
上一篇 2022-06-21 8:35:53
下一篇 2022-06-22 2:31:17

软件定制开发公司

相关阅读

发表回复

登录后才能评论
通知:禁止投稿所有关于虚拟货币,币圈类相关文章,发现立即永久封锁账户ID!