Bootstrap响应式网站开发任务式教程课件 任务3 使用Bootstrap网格布局

任务3使用Bootstrap网格布局Bootstrap响应式网站开发Bootstrap网格系统的原理1

网格系统的实现原理非常简单，仅仅是通过容器大小，平均分配12份，在调整内外边距，最后结合媒体查询，从而实现强大的响应式网格系统。以宽度为1200像素的网页为例，网格系统把网页的总宽度平均分成12栏，每栏的宽度平均为100像素，假设栏与栏之间间隙为24像素（左边栏与右边栏间隙为12像素），则每栏的宽度为76像素，在视觉设计与网页排版时就按照所需要的大小对齐栏线，如图所示。Bootstrap栅格系统--Bootstrap栅格系统的原理栅格系统的实现原理

网站应用栅格系统后页面效果如图所示。Bootstrap栅格系统--Bootstrap栅格系统的原理栅格系统的实现原理a)b）图

应用栅格系统布局网站的效果a)网站页面效果b）网站上的栅格呈现Bootstrap提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。网格系统使用的总宽度可以不固定，Bootstrap会按百分比进行平分。12网格系统是整个Bootstrap的核心功能，也是响应式设计核心理念的一个实现形式。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，在内容中就可以放入这些创建好的布局中。Bootstrap栅格系统--Bootstrap栅格系统的原理栅格系统的工作原理Bootstrap栅格系统的工作原理“行（row）”必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的对齐方式（aligment）和内边距（padding）。通过“行（row）”在水平方向创建一组“列（column）”。页面内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。行使用样式.row，列使用样式“.col-*-*”，内容应当放置于列（column）内，这种预定义的类，可以用来快速创建栅格布局。例如：.col-md-4就表示占4列宽度。通过为“列（column）”设置padding属性，从而创建列与列之间的间隔。通过包含.row类的元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，四个等宽的列可以使用三个.col-xs-3来创建。如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

Bootstrap5的断点、类中缀与外型尺寸的关系Bootstrap栅格系统--Bootstrap栅格系统的原理网格系统中的断点设置断点类中缀外型尺寸X-SmallNone<576pxSmallsm≥576pxMediummd≥768pxLargelg≥992pxExtralargexl≥1200pxExtraextralargexxl≥1400px

容器是Bootstrap的基本构建块，用于在给定的设备或视口中包含、填充和对齐内容。Bootstrap附带三种不同的容器类：Bootstrap栅格系统--Bootstrap栅格系统的原理网格系统中的容器.container类，为默认容器，它是一个响应式固定宽度的容器，它在每个响应断点处设置

max-width。.container-fluid类，流体容器，所有断点width:100%。.container-{breakpoint}类，为响应式容器，表示直到指定的断点

width:100%为止。打开CSS文件夹下的“bootstrap.css”文件中的媒体查询源码如下。.container{width:100%; margin-right:auto;margin-left:auto;}@media(min-width:576px){.container{max-width:540px}}@media(min-width:768px){.container{max-width:720px;}}@media(min-width:992px){.container{max-width:960px;}}@media(min-width:1200px){.container{max-width:1140px;}}@media(min-width:1400px){.container{max-width:1320px;}}

Bootstrap栅格系统--Bootstrap栅格系统的原理栅格系统的工作原理表

容器的max-width与原始容器.container

以及

.container-fluid

每个断点之间的比较max-widthclassExtrasmall<576pxSmall≥576pxMedium≥768pxLarge≥992pxX-Large≥1200pxXX-Large≥1400px.container100%540px720px960px1140px1320px.container-fluid100%100%100%100%100%100%.container-sm100%540px720px960px1140px1320px.container-md100%100%720px960px1140px1320px.container-lg100%100%100%960px1140px1320px.container-xl100%100%100%100%1140px1320px.container-xxl100%100%100%100%100%1320px

Bootstrap栅格系统--Bootstrap栅格系统的原理【实例3-1】三类不同的容器的使用，代码如下。<!--体验默认容器类.container--><divclass="container">体验默认容器类.container</div><!--体验流体容器类.container--><divclass="container-fluid">流体容器.container-fluid类</div><!--体验响应式容器类.container-{breakpoint}--><divclass="container-sm">100%宽，直到小断点</div><divclass="container-md">100%宽，直到中等断点</div><divclass="container-lg">100%宽，直到大断点</div><divclass="container-xl">100%宽，直到超大断点</div><divclass="container-xxl">100%宽，直到特大断点</div>在<style>标签内编写相对应的CSS样式代码如下。 div{ background-color:#bfecb9; border:1pxsolid#5ac04c; margin:20pxauto; }分辨率小于576像素的页面效果分辨率在宽800像素时的页面效果

Bootstrap栅格系统--Bootstrap栅格系统的原理网格系统的工作原理Bootstrap5flexbox（弹性盒子）而不是浮动。Flexbox的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列。网格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，其工作原理如下。行包含在.container（固定宽度）、.container-fluid（100%宽度）或.container-{breakpoint}中，以便为其赋予合适的对齐方式（aligment）和内边距（padding）。通过行在水平方向创建一组列。页面内容应当放置于列内，并且，只有列可以作为行的直接子元素。行使用样式.row类，通过包含.row类的元素设置负值margin（-0.75rem）从而抵消掉为.container元素设置的padding（0.75rem），也就间接为行所包含的列抵消掉了padding。行是列的包装器。网格系统中的列是通过指定1到12的值来表示其跨越的范围。创建跨越任意数量列的元素的不同组合。列类表示要跨越的模板列的数量（例如，col-4跨越四个列）。width是按百分比设置的，因此相对大小总是相同的。例如，4个等宽的列可以使用4个.col-3来创建。列使用样式.col-*-*，内容应当放置于列内，这种预定义的类可以用来快速创建网格布局。例如：.col-md-4就表示大于等于768像素的屏幕上占4列宽度。如果一行中包含了的列数大于12，多余的列所在的元素将被作为一个整体另起一行排列。

Bootstrap栅格系统--Bootstrap栅格系统的原理网格系统的工作原理Bootstrap5flexbox（弹性盒子）而不是浮动。Flexbox的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列。网格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，其工作原理如下。每列都有水平padding，被称为槽（Gutters），用于控制它们之间的间距。然后在具有负边距的行上抵消此padding，以确保列中的内容在视觉上与左侧对齐。行还支持修饰符类，以统一应用列大小，并支持边距类来更改内容的间距。槽（Gutters）也可以响应并可以自定义。Gutter类可用于所有断点，其大小与margin和padding间距相同。将水平gutters改为.gx-*类，将垂直gutters改为.gy-*类，或者将所有gutters改为.g-*类。.g-0也可用于移除gutters。

Bootstrap栅格系统--Bootstrap栅格系统的原理网格系统的工作原理Bootstrap5的网格参数

类别类名超小设备<576px平板≥576px桌面显示器≥768px大桌面显示器≥992px特大桌面显示器≥1200px超大桌面显示器≥1400px容器最大宽度None(auto)540px720px960px1140px1320px类前缀.col-.col-sm-.col-md-.col-lg-.col-xl-.col-xxl-列数量和12间隙宽度1.5rem（一个列的每边分别.75rem）可嵌套是列排序是

Bootstrap栅格系统--Bootstrap栅格系统的原理网格系统的工作原理Bootstrap5的网格列设置具体含义如下col表示自动处理布局。col-*表示占用的列的数量。超小设备（小于576px），class语句为：.col-1~.col-12。平板（大于等于576px），class语句为：.col-sm-1~.col-sm-12。桌面显示器（大于等于768px），class语句为：.col-md-1~.col-md-12。大桌面显示器（大于等于992px），class语句为：.col-lg-1~.col-lg-12。特大桌面显示器（大于等于1200px），class语句为：.col-xl-1~.col-xl-12。超大桌面显示器（大于等于1400px），class语句为：.col-xxl-1~.col-xxl-12。网格系统的常用布局2

Bootstrap栅格系统--等宽响应式列布局在Bootstrap中等宽响应式列布局通常有两种方式。方式一、使用.col类创建等宽响应式列。方式二、使用响应式

.row-cols-*类创建等宽响应式列。1.使用.col类创建等宽响应式列

使用.col类创建等宽响应式列的方法，就是在.row中放置几个使用.col类的列，该行就会被分成几等份宽的列。如果使用

.col-sm|md|lg|xl

|xxl

来设置列的响应规则，则表示在各自断点之上为等宽列，小于断点则水平显示。<!--.col类创建相等宽度的列--><divclass="container"><divclass="row"><divclass="col">梅①</div><divclass="col">兰①</div><divclass="col">竹①</div><divclass="col">菊①</div></div></div>页面效果【实例3-2】使用.col类创建等宽响应式列布局

Bootstrap栅格系统--等宽响应式列布局

Bootstrap栅格系统--等宽响应式列布局页面效果【实例3-2】使用.col类创建等宽响应式列布局分辨率小于576像素的页面效果分辨率大于等于576像素时的页面效果演示

Bootstrap栅格系统--等宽响应式列布局在Bootstrap中等宽响应式列布局通常有两种方式。方式一、使用.col类创建等宽响应式列。方式二、使用响应式

.row-cols-*类创建等宽响应式列。2.使用响应式

.row-cols-*类创建等宽响应式列

使用响应式.row-cols-*类来快速设置最能呈现用户的内容和布局的列数。<divclass="container"><divclass="rowrow-cols-4"><divclass="col">梅①</div><divclass="col">兰①</div><divclass="col">竹①</div><divclass="col">菊①</div></div></div>

Bootstrap栅格系统—不等宽响应式列布局不等宽响应式列主要满足根据实际需要进行页面布局。主要通过添加需要的列（.col-*-*

类中设置），第一个星号（*）表示响应的设备:sm,md,lg，xl或xxl,第二个星号（*）表示一个数字,同一行的数字相加为12，同一行的数字相加超过12后，就会在新的一行显示。使用.col-*-*类来创建不等宽响应式列布局<!--使用col-*-*实现不等宽响应式列--><divclass="container"><divclass="row"><divclass="col-sm-4">梅①</div><divclass="col-sm-8">兰①</div><divclass="col-sm-8">竹①</div><divclass="col-sm-4">菊①</div></div></div>分辨率320像素的页面效果分辨率大于等于576像素的页面效果

Bootstrap栅格系统—响应式嵌套布局如果要使用默认网格嵌套内容，需要现有的列中添加一个新的.row和一组

.col-*-*

列。响应式嵌套布局<divclass="container"> <divclass="row"> <divclass="col-sm-4">梅兰竹菊四君子</div> <divclass="col-sm-8"> <divclass="row"> <divclass="col-12col-sm-6col-md-3">梅①</div> <divclass="col-12col-sm-6col-md-3">兰①</div> <divclass="col-12col-sm-6col-md-3">竹①</div> <divclass="col-12col-sm-6col-md-3">菊①</div> </div> </div> </div></div>在<style>标签内编写相对应的CSS样式代码如下。 .container{margin-top:20px;} .row,.rowdiv{ background-color:#fde9bd; border:1pxsolid#a47308; }

Bootstrap栅格系统—响应式嵌套布局如果要使用默认网格嵌套内容，需要现有的列中添加一个新的.row和一组

.col-*-*

列。响应式嵌套布局分辨率大于等于768像素时的页面效果分辨率大于等于576像素，小于768像素时的页面效果分辨率320像素的页面效果演示网格系统的槽与列偏移3

Bootstrap栅格系统--等宽响应式列布局类槽的应用

槽(Gutters)被称为列之间的填充，用于在Bootstrap网格系统中相应地分隔和对齐内容。列内容之间的间距是由水平padding创建的。在每一列上设置padding-right和padding-left，并在每一行的开始和结束处使用负margin来偏移该边距以对齐内容。槽的宽度为1.5rem（24px）。这使开发者能够将网格与填充和边距分隔符比例相匹配。槽可以进行相应的调整。使用断点特定的gutter类修改水平槽、垂直槽和所有槽。

通常使用.gy-*类可用于控制垂直槽宽度，使用.gx-*类来控制水平槽宽度。如果使用较大的槽，则可能需要调整.container或.co