第5章-Bootstrap的工具类

第5章Bootstrap的工具类5.1

文本类5.2颜色类5.3边框类5.4边距类5.5display属性5.6浮动类5.7阴影类5.8尺寸类5.9溢出类5.10定位类5.11内嵌类5.12实战:商品信息详情页面掌握Bootstrap工具类中文本类与颜色类的应用掌握Bootstrap工具类中边框类及边距类的应用掌握Bootstrap工具类中Display与浮动的应用掌握Bootstrap工具类中阴影与尺寸的应用理解Bootstrap工具类中溢出、定位与内嵌的特点引言Bootstrap是一款快速构建响应式网站的UI框架，使用Bootstrap框架可设计出精美的Web界面。Bootstrap框架的核心是一个CSS框架，Bootstrap的基础CSS(BaseCSS)定义丰富的通用样式类，主要包括文本、颜色、边框、边距、浮动、尺寸等，应用简单，易于上手，可满足前端工程师的基本设计需求。开发者可应用Bootstrap的工具类快速开发出优美的Web界面，减少CSS样式的代码量，提高开发者的工作效率。5.1文本类文本对齐方式文本大小写转换文本折行与溢出文本字体其他文本样式类5.1文本类5.1.1文本对齐方式Bootstrap4定义了一些关于文本的样式类，用于实现控制文本的对齐方式、折行、溢出、大小写转换、字体样式等。文本工具类可用于快速设置文本的风格、表现，非常适用于设计精美的文本效果。5.1文本类5.1.1文本对齐方式设置文本的对齐方式可将元素的类名设为“text-left”、“text-right”、“text-center”和“text-justify”。文本对齐类具体介绍如下。类名说明.text-left设置文本左对齐.text-right设置文本右对齐.text-center设置文本居中对齐.text-justify设置文本两端对齐.text-{sm|md|lg|xl}-{left|right|center}表示在sm|md|lg|xl型设备上实现文本{左对齐|右对齐|居中对齐}。文本对齐类可与网格系统结合，根据响应断点定义的不同而采用不同的文本对齐方式1.文本对齐类的语法格式<pclass="text-left">文本内容</p><pclass="text-sm-left">文本内容</p>5.1文本类5.1.1文本对齐方式2.文本对齐方式的代码实现案例介绍：在页面中分别应用.text-left类和.text-md-center类实现文本对齐演示，表示保持文本左对齐，在md型设备上保持文本居中对齐。<bodyclass="containermt-5"><pclass="text-sm-lefttext-md-center">富强、民主、文明、和谐</p></body>主体代码

例5.15.1文本类5.1.1文本对齐方式文本对齐类的实现效果如右图所示。sm型设备上的显示效果md型设备上的显示效果5.1文本类5.1.2文本大小写转换当Web页面中的文本由中英文共同构成时，可按照文本显示规则对字母进行大小写转换，进一步提高文本的可阅读性。5.1文本类在Bootstrap4中对字母进行大小写转换操作，可通过以下3种类实现。类名说明.text-lowercase表示将元素内的字母转换为小写.text-uppercase表示将元素内的字母转换为大写.text-capitalize表示将元素内每个单词的第一个字母转换为大写，不影响其他字母5.1.2文本大小写转换1.文本转换类的语法格式<pclass="text-lowercase">转为小写的文本。</p>5.1文本类5.1.2文本大小写转换2.文本转换类的代码实现案例介绍：在页面中依次应用文本转换类显示英文版社会主义核心价值观。<h2class="text-center">字母大小写转换</h2><pclass="text-lowercase">prosperity、democracy、civility、harmony</p><pclass="text-uppercase">FREEDOM、EQUALITY、JUSTICE、RULEOFLAW</p><pclass="text-capitalize">patriotism、dedication、integrity、friendship</p>主体代码

例5.25.1文本类5.1.2文本大小写转换文本转换类的实现5.1文本类5.1.3文本折行与溢出当页面中的文本超出元素本身的宽度时，文本内容默认会自动换行。在Bootstrap4中如需对文本进行折行处理，阻止文本折行，隐藏溢出文本等操作时，可使用文本折行与溢出类进行处理。5.1文本类文本折行与溢出类的介绍及说明如下。类名说明.text-wrap表示文本长度超出元素宽度时，允许元素内的文本换行.text-nowrap表示文本长度超出元素宽度时，阻止元素内的文本换行.text-truncate表示文本长度超出元素宽度时，以省略号的形式表示超出的文本内容5.1.3文本折行与溢出1.文本折行与溢出类的语法格式<divclass="text-wrap"style="width:6rem;">此文本允许换行.</div>5.1文本类5.1.3文本折行与溢出2.文本折行与溢出类的代码实现案例介绍：在页面中定义3个宽度为10rem的div块元素，第一个块元素的类名设为“text-wrap”，即允许文本换行；第二个块元素的类名设为“text-nowrap”，即阻止文本换行；第三个块元素的类名设为“text-truncate”，即实现文本溢出隐藏。<h2>文本折行与溢出</h2><divclass="text-wrapborderborder-info"style="width:10rem">共产主义者的理想、共产主义者的目的、阶级斗争的最近状态</div><br><divclass="text-nowrapborderborder-info"style="width:10rem">共产主义者的理想、共产主义者的目的、阶级斗争的最近状态</div><br><divclass="text-truncateborderborder-info"style="width:10rem">共产主义者的理想、共产主义者的目的、阶级斗争的最近状态</div><br>主体代码

例5.35.1文本类5.1.3文本折行与溢出3.文本折行与溢出的实现效果5.1.3文本折行与溢出5.1文本类5.1文本类5.1.4文本字体Bootstrap4为满足文本字体的设计需求，定义了丰富的样式类，文本字体类可快速更改文本的字体粗细以及倾斜样式。5.1文本类文本字体类的介绍及说明如下。5.1.4文本字体类名说明.font-weight-bold表示设置较粗的字体.font-weight-bolder表示相对于父元素，为当前元素设置较粗的字体.font-weight-normal表示设置正常粗细的字体.font-weight-light表示设置细的字体.font-weight-lighter表示相对于父元素，为当前元素设置较细的字体.font-italic表示设置斜体的字体1.文本字体类的语法格式<pclass="font-weight-bold">粗体文字</p>2.文本字体类的应用演示案例介绍：在页面中依次应用上述6种文本字体类，以便更好地对比文本字体类的不同效果。5.1文本类5.1.4文本字体3.文本字体类的代码实现<h2>文本字体样式</h2><pclass="font-weight-bold">工人革命的第一步就是使无产阶级上升为统治阶级，争得民主----(bold)</p><pclass="font-weight-bolder">无产阶级将利用自己的政治统治，一步一步地夺取资产阶级的全部资本----(bolder)</p><pclass="font-weight-normal">把一切生产工具集中在国家即组织成为统治阶级的无产阶级手里，并且尽可能快地增加生产力的总量。----(normal)</p><pclass="font-weight-light">无产者组织成为阶级,从而组织成为政党这件事----(light)</p><pclass="font-weight-lighter">不断地由于工人的自相竞争而受到破坏----(lighter)</p><pclass="font-italic">但是，这种组织总是重新产生，并且一次比一次更强大，更坚固，更有力。----(italic)</p>主体代码

例5.45.1文本类5.1.4文本字体4.文本字体类的实现效果5.1文本类5.1.4文本字体5.1文本类5.1.5其他文本样式类Bootstrap4还提供了一些其他常用的文本字体类，在使用Bootstrap4进行开发时可能会用到以下文本样式类。1.其他文本字体类介绍类名说明.text-reset重置颜色，表示重置文本颜色或链接颜色，以便从父元素继承颜色属性.text-monospace等宽字体，表示将所选内容设为等宽字体.text-decoration-underline文字装饰，表示为文本添加修饰线（Bootstrap5新增）.text-decoration-none文字装饰，表示为文本删除修饰线text-decoration-line-through文字装饰，表示为文本添加中划线（Bootstrap5新增）2.其他文本样式类语法格式

其他文本字体类的语法格式如下所示。

<pclass="text-monospace">等宽字体</p>3.其他文本样式类代码实现主体代码

例5.5<h2>其他文本样式类<small>——职业道德精神</small></h2>

<!--设置父元素的字体颜色为红色--><divclass="text-red"><!--重置本元素字体颜色，继承父元素字体颜色--><pclass="text-reset">忠于职守</p></div><!--等宽字体--><pclass="text-monospace">乐于奉献</p><!--<s></s>标签为文本添加中划线--><!--删除<s>标签的中划线效果-->

<sclass="text-decoration-none">尊职敬业</s>5.1文本类5.1.5其他文本样式类3.其他文本样式类实现效果5.1文本类5.1.5其他文本样式类5.2颜色类文本颜色类链接颜色类背景颜色类案例练习--学习菜单网页制作中一般运用色彩将元素与主题相结合，营造出独特的网页风格。开发者还可以利用色彩划分页面布局，方便用户迅速锁定信息区域，利用突出的颜色发挥其视觉引导作用。在Bootstrap4中支持使用少量颜色类传达其颜色含义，并支持对具有悬停状态的链接进行颜色设计。Bootstrap中的颜色类主要包括文本颜色、链接颜色、背景颜色等。5.2文本颜色类Bootstrap提供了一系列具有代表意义的文本颜色类，通过颜色赋予文本特殊意义。详细介绍如右表所示。1.文本颜色类5.2.1文本颜色类5.2文本颜色类类名说明.text-primary字体颜色为蓝色，表示重要意义.text-secondary字体颜色为灰色，表示次要意义.text-success字体颜色为浅绿色，表示成功意义.text-danger字体颜色为浅红色，表示危险意义.text-warning字体颜色为浅黄色，表示警告意义.text-info字体颜色为浅蓝色，表示信息意义.text-light字体颜色为浅灰色，表示高亮意义（此颜色文本在白色背景上看不清）.text-dark字体颜色为深灰色，表示暗色意义.text-muted字体颜色为灰色，表示减弱意义.text-white字体颜色为白色（此颜色文本在白色背景上看不清）.text-body字体颜色与body保持一致，继承body的文本颜色.text-{颜色}-*设置字体颜色的透明度（*代表透明程度，范围0~100）

<pclass="text-primary">文本内容</p>

<pclass="text-success">文本内容</p>1.文本颜色类-语法格式文本颜色类的语法格式如下所示。5.2.1文本颜色类5.2文本颜色类在页面中依次运用Bootstrap4定义的文本颜色类，具体实现代码如下。<h2>文本颜色类演示<small>---长征精神</small></h2><pclass="text-primary">感恩，坚定，不畏艰险，自强不息<small>————.text-primary</small></p><pclass="text-secondary">坚定的理想信念是长征精神的核心，是战胜一切艰难险阻的制胜法宝<small>————.textsecondary</small></p><pclass="text-success">人无精神不立，国无精神不强<small>————.text-success</small></p><pclass="text-danger">精神是一个民族赖以长久生存的灵魂，<small>.text-danger</small></p><pclass="text-warning">唯有精神上达到一定的高度<small>————.text-warning</small></p><pclass="text-info">这个民族才能在历史的洪流中屹立不倒、奋勇向前<small>————.text-info</small></p><!--text-light在白色背景中看不清，设置本元素背景颜色为黑色--><pclass="text-lightbg-dark">伟大长征精神，作为中国共产党人红色基因和精神族谱的重要组成部分<small>————.textlight</small></p><pclass="text-dark">已经深深融入中华民族的血脉和灵魂，<small>————.text-dark</small></p><!--文本颜色继承来自body的文本颜色--><pclass="text-body">成为社会主义核心价值观的丰富滋养，<small>————.text-body</small></p><pclass="text-muted">成为鼓舞和激励中国人民不断攻坚克难<small>————.text-muted</small></p><!--text-white在白色背景中看不清，设置本元素背景颜色为黑色--><pclass="text-whitebg-dark">从胜利走向胜利的强大精神动力。<small>————.text-white</small></p><!--文本透明度演示--><pclass="text-white-50bg-dark">从胜利走向胜利的强大精神动力。<small>————.text-white-50</small></p>主体代码

例5.62.文本颜色类-代码实现5.2.1文本颜色类5.2文本颜色类3.文本颜色类实现效果5.2.1文本颜色类5.2文本颜色类对于5.2.1节所介绍的文本颜色类，Bootstrap允许其在超链接上正常应用。Bootstrap通过焦点样式和悬浮样式使链接文本在鼠标悬浮时文本颜色变暗，从而保持链接文本与网页整体颜色的和谐统一。与设置文本颜色类一样，Bootstrap并不建议为文本使用.text-white和.text-light类，它们需要与背景色搭配使用。1.链接颜色类的语法格式：<aclass="text-primary">文本内容</a>5.2.2链接颜色类5.2文本颜色类在页面中依次运用Bootstrap4定义的文本（链接）颜色类，具体实现代码如下。<h2>链接颜色类<small>—————以社会主义荣辱观为例</small></h2><p><aclass="text-primary">以热爱祖国为荣、以危害祖国为耻<small>——————Primarylink</small></a></p><p><aclass="text-secondary">以服务人民为荣、以背离人民为耻<small>——————Secondarylink</small></a></p><p><aclass="text-success">以崇尚科学为荣、以愚昧无知为耻<small>——————Successlink</small></a></p><p><aclass="text-danger">以辛勤劳动为荣、以好逸恶劳为耻<small>——————Dangerlink</small></a></p><p><aclass="text-warning">以团结互助为荣、以损人利己为耻<small>——————Warninglink</small></a></p><p><aclass="text-info">以诚实守信为荣、以见利忘义为耻<small>——————Infolink</small></a></p><p><aclass="text-lightbg-dark">以遵纪守法为荣、以违法乱纪为耻<small>——————Lightlink</small></a></p><p><aclass="text-dark">以艰苦奋斗为荣、以骄奢淫逸为耻<small>——————Darklink</small></a></p><p><aclass="text-muted">在实践中领悟“八荣八耻”<small>——————Mutedlink</small></a></p><p><aclass="text-whitebg-dark">自省自警、自珍自爱<small>——————Whitelink</small></a></p>主体代码

例5.72.链接颜色类-代码实现5.2文本颜色类5.2.2链接颜色类3.链接颜色类实现效果5.2文本颜色类5.2.2链接颜色类为元素添加背景色可使用Bootstrap提供的背景颜色类实现，背景颜色类与文本颜色类类似，文本颜色类用于设计文字颜色，背景颜色类则用于设计元素的背景颜色。背景颜色不会影响文字颜色，开发过程中需将背景颜色类与文本颜色类结合应用，使二者搭配出协调、美观的样式。1.背景颜色类的语法格式：<pclass="bg-primary">文本内容</p>5.2.3背景颜色类5.2文本颜色类5.2.3背景颜色类5.2文本颜色类类名说明.bg-primary背景颜色为蓝色，表示重要意义.bg-secondary背景颜色为灰色，表示次要意义.bg-success背景颜色为浅绿色，表示成功意义.bg-danger颜色为浅红色，表示危险意义.bg-warning颜色为浅黄色，表示警告意义.bg-info颜色为浅蓝色，表示信息意义.bg-light颜色为浅灰色，表示高亮意义（此背景颜色在文本为白色时会模糊文字）.bg-dark颜色为深灰色，表示暗色意义.bg-white背景颜色为白色（此背景颜色在文本为白色时会模糊文字）.bg-transparent背景颜色为透明色（此背景颜色在文本为白色时会模糊文字）2.背景颜色类的具体说明在页面中依次运用Bootstrap4定义的背景颜色类，具体实现代码如下。<h2>背景颜色类</h2><divclass="p-2mb-2bg-primarytext-white">“五位一体”总体布局<small>——————.bg-primary</small></div><divclass="p-2mb-2bg-successtext-white">经济建设<small>——————.bg-success</small></div><divclass="p-2mb-2bg-dangertext-white">政治建设<small>——————.bg-danger</small></div><divclass="p-2mb-2bg-warningtext-dark">文化建设<small>——————.bg-warning</small></div><divclass="p-2mb-2bg-infotext-white">社会建设<small>——————.bg-info</small></div><divclass="p-2mb-2bg-lighttext-dark">生态文明建设<small>——————.bg-light</small></div><divclass="p-2mb-2bg-darktext-white">经济建设是根本，政治建设是保障<small>——————.bg-dark</small></div><divclass="p-2mb-2bg-whitetext-dark">文化建设是灵魂，社会建设是条件<small>——————.bg-white</small></div><divclass="p-2mb-2bg-transparenttext-dark">生态文明建设是基础<small>——————.bg-transparent</small></div>主体代码

例5.83.背景颜色类-代码实现5.2文本颜色类5.2.3背景颜色类4.背景颜色类实现效果5.2文本颜色类5.2.3背景颜色类本节主要通过案例练习将所学颜色类应用于实践，案例实现主要利用颜色类中的文本颜色类、背景颜色类、链接颜色类等。1.页面结构分析简图本案例是一个关于红色故事的学习菜单，该页面将网格布局与颜色类相结合，使页面分为1个行容器、6个列元素以及一个页面标题。5.2.4案例练习——学习菜单5.2文本颜色类在页面中依次运用Bootstrap4定义的文本类，具体实现代码如下。<h2>红色故事学习菜单</h2><divclass="row"><divclass="col-2bg-dangerfont-weight-bold"><aclass="text-warning">首页</a></div><divclass="col-2bg-dangerfont-weight-bold"><aclass="text-warning">动态</a></div><divclass="col-2bg-dangerfont-weight-bold"><aclass="text-warning">精神介绍</a></div><divclass="col-2bg-dangerfont-weight-bold"><aclass="text-warning">红色故事</a></div><divclass="col-2bg-dangerfont-weight-bold"><aclass="text-warning">真人事迹</a></div><divclass="col-2bg-dangerfont-weight-bold"><aclass="text-warning">学习心得</a></div></div>主体代码

例5.82.代码实现5.2文本颜色类5.2.4案例练习——学习菜单5.2文本颜色类3.案例讲解5.2.4案例练习——学习菜单在上述代码中，首先添加页面标题，明确页面主题。接下来主要是菜单内容，菜单内包含一个宽度自适应的行元素，行元素内设置6个宽度相等的列元素，等分化的网格布局使菜单排版显得更加美观。随后在列元素中嵌入<a>标签，达到菜单悬浮变色的页面效果。最后再为列元素应用.bg-danger类实现红色背景，应用.font-weight-bold类实现文字加粗，并为超链接应用.text-warning类实现其文字悬浮变色的效果。5.3边框类边框设置边框颜色圆角边框5.3边框类

Bootstrap4定义了一系列关于边框的样式类，用于实现快速添加、删除边框或指定添加、删除元素单侧边框。边框工具类可实现快速设置元素的边框、边框颜色样式、边框形状等，非常适用于图像、按钮或任何其他元素。

为元素添加边框可设置元素的类名为“border”，即通过基础类.border为元素添加默认的4条边框，该默认边框表现为浅灰色的细边框。当需要指定添加元素的某一侧边框时，可通过以下4种类进行实现。5.3边框类5.3.1边框设置类名说明.border-top为元素添加上边框.border-right为元素添加右边框.border-left为元素添加左边框.border-bottom为元素添加下边框1.边框添加在元素具有边框的前提下，当需要指定删除元素的全部或某一侧边框时，可通过以下5种边框样式类实现。5.3边框类5.3.1边框设置类名说明.border-0删除元素的所有边框，前提是需要删除的边框已经存在.border-top-0删除元素的上边框，前提是需要删除的边框已经存在.border-right-0删除元素的右边框，前提是需要删除的边框已经存在.border-left-0删除元素的左边框，前提是需要删除的边框已经存在.border-bottom-0删除元素的下边框，前提是需要删除的边框已经存在2.边框删除

边框样式类的语法格式如下所示。

<spanclass="border"></span>5.3边框类5.3.1边框设置3.边框样式类的语法格式4.边框样式类的应用演示案例介绍：在页面中设置4个块元素A、B、C和D，依次为它们应用边框样式类。为A元素添加4侧边框，为B元素添加左侧、右侧及下方的边框，为C元素添加4侧边框并删除上方边框，为D元素添加4侧边框并删除4侧边框。5.边框样式类的代码实现<divid="A"class="border"></div><divid="B"class="border-rightborder-bottomborder-left"></div><divid="C"class="borderborder-top-0"></div><divid="D"class="border-0"></div>主体代码

例5.10<style>div{width:100px;height:100px;float:left;margin-right:20px;background-color:whitesmoke;}</style>CSS代码

例5.105.3边框类5.3.1边框设置5.3边框类5.3.1边框设置6.边框样式类的实现效果设置元素的边框颜色，前提是要为元素应用边框基础类.border或单边基础类，确保元素已存在边框。1.边框颜色类介绍设置边框颜色可使用边框主题颜色类来实现，边框主题颜色类具体说明如表。5.3边框类5.3.2边框颜色类名说明.border-primary用于设计蓝色边框，表强调意义.border-secondary用于设计灰色边框，表次要意义.border-success用于设计绿色边框，表成功意义.border-danger用于设计红色边框，表危险意义.border-warning用于设计橘黄色边框，表警告意义.border-info用于设计浅蓝色边框，表信息意义.border-light用于设计白色边框，表高亮意义.border-dark用于设计黑色边框.border-white用于设计白色边框边框颜色类的语法格式如下所示。<spanclass="borderborder-primary"></span>5.3边框类5.3.2边框颜色2.边框颜色类的语法格式3.边框颜色类的应用演示案例介绍：在页面中设置9个块元素，依次为它们应用边框基础类.border以及上述9种边框颜色类。4.边框颜色类的代码实现<divclass="borderborder-primary">primary</div><divclass="borderborder-secondary">secondary</div><divclass="borderborder-success">success</div><divclass="borderborder-danger">danger</div><divclass="borderborder-warning">warning</div><divclass="borderborder-info">info</div><divclass="borderborder-light">light</div><divclass="borderborder-dark">dark</div><divclass="borderborder-white">white</div>主体代码

例5.11<style>div{width:100px;height:100px;float:left;margin-right:20px;margin-bottom:20px;/*设置背景颜色，突出边框颜色*/background-color:whitesmoke;text-align:center;line-height:100px;}</style>CSS代码

例5.115.3边框类5.3.2边框颜色5.3边框类5.边框颜色类的实现效果5.3.2边框颜色在Bootstrap4中为元素设置圆角边框，同样需要为元素应用边框基础类.border或单边基础类，确保元素已存在边框。设置元素的4个角均为圆角边框可使用.rounded类实现。当需要指定元素某一侧边框样式为圆角，设置元素边框形状为正圆形或胶囊形，取消元素的圆角边框，设置元素的圆角大小时，可通过以下几种边框类实现，具体说明如下表所示。5.3边框类5.3.3圆角边框5.3边框类类名说明.rounded设置元素四角为圆角，前提是需要设置的边框已经存在.rounded-top设置元素左上角和右上角为圆角边框，前提同上.rounded-right设置元素右上角和右下角为圆角边框，前提同上.rounded-left设置元素左上角和左下角为圆角边框，前提同上.rounded-bottom设置元素左下角和右下角为圆角边框，前提同上.rounded-circle设置元素边框为正圆形，前提同上.rounded-pill设置元素边框为胶囊形，前提同上.rounded-0取消元素的所有圆角边框，即设置元素四角为直角，前提同上.rounded-sm设置元素四角边框为小圆角，前提同上.rounded-lg设置元素四角边框为大圆角，前提同上1.圆角边框类的具体说明。5.3.3圆角边框

圆角边框类的语法格式如下所示。

<spanclass="borderrounded"></span>5.3边框类2.圆角边框类的语法格式3.圆角边框类的应用演示案例介绍：在页面中设置10个块元素，依次为它们应用边框基础类.border，以及上述10种圆角边框类。5.3.3圆角边框4.圆角边框类的代码实现<divclass="borderborder-darkrounded"></div><divclass="borderborder-darkrounded-top"></div><divclass="borderborder-darkrounded-left"></div><divclass="borderborder-darkrounded-right"></div><divclass="borderborder-darkrounded-bottom"></div><divclass="borderborder-darkrounded-0"></div><divclass="borderborder-darkrounded-circle"></div><divclass="borderborder-darkrounded-pill"style="width:200px;height:100px"></div><divclass="borderborder-darkrounded-lg"></div><divclass="borderborder-darkrounded-sm"></div>主体代码

例5.12<style>div{width:75px;height:75px;float:left;margin-right:20px;margin-bottom:10px;/*设置背景颜色，突出边框形状*/background-color:rgb(108,117,125);}</style>CSS代码

例5.125.3边框类5.3.3圆角边框5.圆角边框类的实现效果5.3边框类5.3.3圆角边框5.4边距类边距方向类边距距离类负边距类1.边距介绍5.4边距类元素之间的间距可通过margin或padding属性来实现，margin影响本元素与外界相邻元素之间的距离，即外边距；padding元素边框与元素内容之间的空间，即内边距。Bootstrap4中定义了许多关于边距的类，应用边距类可快速、便捷地设计网页外观，呈现出协调、美观的页面布局。2.Bootstrap中的边距基础类介绍5.4边距类前端开发人员通常使用CSS的margin属性和padding属性调节元素边距。在Bootstrap4中提供了简写的基础类名，基础类分别是“m”表示margin、“p”表示padding。3.边距方向类类名说明.{m|p}t用于设置元素的margin-top（上方外边距）或padding-top（上方内边距）.{m|p}b用于设置元素的margin-bottom（下方外边距）或padding-bottom（下方内边距）.{m|p}l用于设置元素的margin-left（左侧外边距）或padding-left（左侧内边距）.{m|p}r用于设置元素的margin-right（右侧外边距）或padding-right（右侧内边距）.{m|p}x用于设置元素左右两侧的外边距或左右两侧的内边距（x代表水平方向）.{m|p}y用于设置元素上下两侧的外边距或上下两侧的内边距（y代表垂直方向）.{m|p}用于设置元素上下左右四侧的外边距或内边距边距基础类不可单独使用，必须与边距的距离值结合应用；边距方向类也不可单独使用，必须与边距基础类以及距离值结合应用。下面介绍边距距离类。5.4边距类4.边距距离类类名说明.*-0用于设置元素的margin或padding距离为0rem，（*代表{m|p}或{m|p}方向）.*-1用于设置元素的margin或padding距离为0.25rem.*-2用于设置元素的margin或padding距离为0.5rem.*-3用于设置元素的margin或padding距离为1rem.*-4用于设置元素的margin或padding距离为1.5rem.*-5用于设置元素的margin或padding距离为3rem*-auto用于为固定宽度的块级元素实现水平居中边距基础类主要用于控制元素的边距偏移距离，下面介绍负边距类。5.4边距类5.负边距类类名说明.m{方向|空白}-n1用于设置元素的margin为-0.25rem.m{方向|空白}-n2用于设置元素的margin为-0.5rem.m{方向|空白}-n3用于设置元素的margin为-1rem.m{方向|空白}-n3用于设置元素的margin为-1.5rem.m{方向|空白}-n5用于设置元素的margin为-3remCSS中的负边距(NegativeMargin)是布局中一个常用技巧，Bootstrap也定义了5个负边距类用于实现负的margin样式。5.4边距类需要注意，在CSS中padding属性值是不允许为负值的，因此Bootstrap并未对padding的负边距类进行设置。边距类的语法格式如下所示。<divclass="m-4">文本内容</div><divclass="mx-auto">元素水平居中</div>6.边距类的语法格式7.边距类的应用演示案例介绍：在页面中设置6个块元素，其中前两个块元素是未应用边距类的正常块元素，主要发挥其对照组的作用，而余下4个块元素依次应用上述的基础边距类。5.4边距类8.边距类的代码实现<h2>边距类</h2><divclass="borderborder-primary">职业道德精神---(正常盒子)</div><divclass="borderborder-primary">忠于职守---(正常盒子)</div><!--设置本元素的上方外边距为2级，即0.5rem--><divclass="borderborder-dangermt-2">乐于奉献---(mt-2)</div><!--设置本元素的上方内边距为4级，即1.5rem--><divid="pt"class="borderborder-dangermt-2pt-4">尊职敬业---(mt-2、pt-2)</div><!--设置本元素水平居中--><divclass="borderborder-dangermt-2mx-auto">求真务实---(mx-auto)</div><!--设置本元素的左侧负内外距为3级，即-1rem--><divclass="borderborder-dangerml-n3mt-2">优质服务---(ml-n1、mt-2)</div>主体代码

例5.13<style>/*为块元素设置固定宽高*/div{width:300px;height:60px;}/*设置本元素，在宽度和高度之外绘制元素的内边距和边框*/#pt{box-sizing:content-box;}</style>CSS代码

例5.135.4边距类9.基础边距类的实现效果5.4边距类边距类与文本类相似，同样可与Bootstrap中的网格系统结合，根据响应断点定义的不同显示不同的边距值。响应式边距类的语法格式如下所示。<divclass="{m|p}{t|r|b|l|x|y}-{0|1|2|3|4|5}">文本内容</div><divclass="py-lg-3py-sm-2py-1">文本内容</div>9.响应式边距类5.4边距类5.5display属性显示或隐藏元素响应式地显示或隐藏元素1.显示或隐藏元素的display工具类5.5display属性显示或隐藏元素的本质是让一个元素在页面中隐藏或显示出来，在CSS中主要通过display属性、visibility可见性、overflow溢出等方法来实现。本节内容主要介绍Bootstrap4中的display工具类是如何控制元素的显示与隐藏的。Bootstrap4根据display属性的所有可能取值设置一个取值子集，最终实现了display工具类。5.5.1显示或隐藏元素2.display工具类的代码格式5.5display属性.d-{value}下面将介绍Bootstrap4中display工具类的value取值表。5.5.1显示或隐藏元素3.display工具类的value取值5.5display属性名称说明none隐藏元素inline显示为内联元素，元素前后没有换行inline-block显示为行内块元素block显示为块元素，元素前后带有换行符table将元素显示为块级表格，元素前后带有换行符table-cell元素将作为表格的一个单元格显示（类似于<td>和<th>）table-row元素将作为表格的一个行元素显示（类似于<tr>）flex将元素作为弹性伸缩盒子显示inline-flex将元素作为内联块级弹性收缩盒子显示5.5.1显示或隐藏元素<divclass="d-inline">d-inline</div>5.display类的应用演示案例介绍：在页面中为元素display工具类实现内联元素和块级元素的转换。4.display类的语法格式5.5display属性5.5.1显示或隐藏元素<h2>内联元素和块级元素的转换</h2><p>将div块元素显示为内联元素（使两个块元素在一行排列）</p><divclass="d-inlinebg-infotext-white">div元素应用d-inline类</div><divclass="d-inlineml-5bg-infotext-white">div元素应用d-inline类</div><p>将span内联元素显示为块级元素（使一个span元素独占一行）</p><spanclass="d-blockbg-dangertext-white">span元素应用d-block类</span><spanclass="d-blockbg-primarytext-white">span元素应用d-block类</span>主体代码

例5.145.5display属性6.display工具类的代码实现5.5.1显示或隐藏元素5.5.1显示或隐藏元素5.5display属性7.display工具类的实现效果1.响应式地显示或隐藏元素5.5display属性display工具类支持页面的响应式设计，可根据不同设备类型响应式地显示或隐藏元素，针对设备类型显示与隐藏不同的元素，即为同一个页面设计不同显示版本。2.在Bootstrap4中display工具类的响应式代码格式如下所示。.d-{sm|md|lg|xl}-{value}注意：当display工具类名称中间未设置设备类型（即sm、md、lg、xl等）时，当前元素的display设置可影响所有断点（即xs到xl）。5.5.2响应式地显示或隐藏元素3.响应式显示或隐藏类的应用技巧5.5display属性（1）当需要隐藏某个页面元素，只需使用.d-none类或.d-{sm,md,lg,xl}-none类即可。（2）当需要在给定的屏幕尺寸范围内显示某个页面元素时，可通过组合使用.d-*-none类和.d-*-*类实现。例如：.d-none、.d-md-block以及.d-xl-none类的组合效果，在中型设备（md）和大型设备（g）的屏幕上显示指定的页面元素，其余设备上全部隐藏该页面元素。5.5.2响应式地显示或隐藏元素4.显示类的组合应用5.5display属性在实际开发中，开发者可根据需要自由组合显示或隐藏类，开发者常用的组合类如下表所示。5.5.2响应式地显示或隐藏元素类名说明.d-none在所有尺寸的屏幕上隐藏该元素.d-none和.d-sm-block只在超小型（xs）尺寸的屏幕上隐藏该元素.d-sm-none和.d-md-block只在小型（sm）尺寸的屏幕上隐藏该元素.d-md-none和.d-lg-block只在中型（md）尺寸的屏幕上隐藏该元素.d-lg-none和.d-xl-block只在大型（lg）尺寸的屏幕上隐藏该元素.d-xl-none只在超大型（xl）尺寸的屏幕上隐藏该元素5.隐藏类的组合应用5.5display属性5.5.2响应式地显示或隐藏元素类名说明.d-block在所有尺寸的屏幕上显示该元素.d-block和.d-sm-none只在超小型（xs）尺寸的屏幕上显示该元素.d-none、.d-sm-block和.d-md-none只在小型（sm）尺寸的屏幕上显示该元素.d-none、.d-md-block和.d-lg-none只在中型（md）尺寸的屏幕上显示该元素.d-none、.d-lg-block和.d-xl-none只在大型（lg）尺寸的屏幕上显示该元素.d-none和.d-xl-block只在超大型（xl）尺寸的屏幕上显示该元素6.响应式display类的语法格式5.5display属性响应式display类的语法格式如下所示。<divclass="d-noned-lg-block">在小于lg尺寸的屏幕上隐藏</div>7.响应式display类的应用演示案例描述：在页面中为元素应用响应式display工具类，实现元素的响应式显示或隐藏效果。5.5.2响应式地显示或隐藏元素8.响应式display类的代码实现<h2>响应式地显示或隐藏</h2><divclass="d-md-noned-lg-blockbg-successtext-white">仅在md设备上隐藏本元素（绿色背景）</div><divclass="d-noned-md-blockd-lg-blockbg-dangertext-white">在md、lg、xl设备上显示本元素（浅红色背景）</div>主体代码

例5.155.5display属性5.5.2响应式地显示或隐藏元素9.响应式display类的案例讲解在上述代码中，将第1个div块元素的类名设为“d-md-none”、“d-lg-block”，从而实现第1个块元素在sm型设备上显示，在md型设备上隐藏，在lg及xl型设备上显示。将第2个div块元素的类名设为“d-none”、“d-md-block”、“d-lg-block”，从而实现第2个块元素在sm型设备上隐藏，在md型及以上的设备中隐藏。5.5display属性5.5.2响应式地显示或隐藏元素5.5display属性5.5.2响应式地显示或隐藏元素sm型设备上的显示效果md型设备上的显示效果10.响应式display类的实现效果5.5display属性5.5.2响应式地显示或隐藏元素lg型设备上的显示效果10.响应式display类的实现效果5.6浮动类浮动类介绍浮动类语法5.6浮动类使用Bootstrap4中提供的Float工具类可实现元素的快速浮动，Float工具类支持根据网格断点的不同实现响应式浮动，即根据当前设备型号将元素浮动到左侧、右侧或禁用浮动。在Bootstrap4中实现元素的左右浮动主要通过应用.float-left类以及.float-right类来实现，禁用元素浮动则通过.float-none类实现。5.6浮动类

1.Float浮动类介绍类名说明.float-left在所有设备类型上，元素均向左浮动.float-right在所有设备类型上，元素均向右浮动.float-none在所有设备类型上，元素均不浮动.float-{sm|md|lg|xl}-{left|right}在{sm|md|lg|xl}设备类型上，元素{左|右}浮动。浮动样式支持响应式设计，可根据不同的网格断点来设置不同的浮动样式5.6浮动类2.Float浮动类语法格式（1）基本浮动类的语法格式如下所示。<divclass="float-left">在所有设备类型上，元素均向左浮动</div>（2）响应式浮动类的应用语法格式如下所示。<divclass="float-sm-right">本元素在小型设备（sm）上向右浮动</div>5.6浮动类3.Float浮动类应用演示案例描述：在页面中为元素应用基本浮动类，实现一个网页导航菜单的设计。4.Float浮动类代码实现主体代码

例5.16<divclass="headers"><ulclass="text-centerclrearfix"><!--以下五个列表项向左浮动--><liclass="float-leftpl-1pl-md-2pl-lg-3">首页</li><liclass="float-leftpl-1pl-md-2pl-lg-3">示例</li><liclass="float-leftpl-1pl-md-2pl-lg-3">图标库</li><liclass="float-leftpl-1pl-md-2pl-lg-3">优站精选</li><liclass="float-leftpl-1pl-md-2pl-lg-3">免费模板</li><!--以下两个列表项，向右浮动--><liclass="float-rightpr-1pr-md-2pr-lg-3">官方精选</li><liclass="float-rightpr-1pr-md-2pr-lg-3">下载Bootstrap</li></ul></div>5.6浮动类5.Float浮动类实现效果需要注意，为子元素设置浮动后，出于对网页整体布局的考虑，需要清除浮动影响。在CSS中主要通过clear:both实现浮动清除，在Bootstrap4中将清除浮动的设置包装成一个具体的类，即.clearfix类。仅需在父元素中应用.clearfix类，即可快速清除浮动。5.7阴影类阴影类介绍阴影类语法5.7阴影类Bootstrap4中主要通过四个阴影类来设置元素的阴影样式，Bootstrap4的阴影类可用于添加阴影或去除阴影。Bootstrap4阴影类的具体说明如下表所示。类名说明.shadow-none用于去除本元素的阴影.shadow-sm用于设置小阴影.shadow用于设置常规阴影.shadow-lg用于设置大阴影1.阴影类语法格式阴影类的语法格式如下所示。<divclass="shadow-none">无阴影</div>2.阴影类的应用演示案例描述：在页面中为元素应用阴影类，依次实现上述4种阴影类。5.7阴影类3.阴影类的代码实现5.7阴影类主体代码

例5.17<h2>阴影类</h2><divclass="shadow-nonep-3mb-5bg-lightrounded">无阴影</div><divclass="shadow-smp-3mb-5bg-whiterounded">小阴影</div><divclass="shadowp-3mb-5bg-whiterounded">常规阴影</div><divclass="shadow-lgp-3mb-5bg-whiterounded">大阴影</div>4.阴影类的实现效果5.7阴影类5.8尺寸类相对于父元素的尺寸类相对于视口的尺寸类5.8尺寸类应用Bootstrap4中的尺寸类，即宽度（Width）和高度（Height）的相关工具类，可轻松实现对页面元素的高度和宽度的设定。在Bootstrap4中尺寸类分为两种，一种是相对于父元素的宽度和高度进行设置的尺寸类，主要使用百分比表示；另一种是相对于视口的宽度和高度进行设置的尺寸类，主要使用vw（ViewportWidth，视口宽度）和vh（ViewportHeight，视口高度）来表示。Bootstrap4中相对于父元素的尺寸类的具体说明如下表所示。5.8尺寸类5.8.1相对于父元素的尺寸类类名说明.w-25设置本元素的宽度为父元素宽度的25%.w-50设置本元素的宽度为父元素宽度的50%.w-75设置本元素的宽度为父元素宽度的75%.w-100设置本元素的宽度为父元素宽度的100%.w-auto设置本元素宽度自适应.h-25设置本元素的高度为父元素高度的25%.h-50设置本元素的高度为父元素高度的50%.h-75设置本元素的高度为父元素高度的75%.h-100设置本元素的高度为父元素高度的100%.h-auto设置本元素高度自适应1.相对于父元素的尺寸类语法格式相对于父元素的尺寸类的语法格式如下所示。<divclass="w-25p-3"style="background-color:#eee;">25%的宽度</div>2.相对于父元素的尺寸类的应用演示案例描述：在页面中为元素应用相对于父元素的尺寸类，依次实现上述10种尺寸类。5.8尺寸类5.8.1相对于父元素的尺寸类3.相对于父元素的尺寸类的代码实现主体代码

例5.18<h2>相对于父元素的尺寸类-宽度</h2><divclass="bg-secondarybordertext-whitemb-4font-weight-bold"><divclass="w-25p-3bg-infoborder">w-25</div><divclass="w-50p-3bg-infoborder">w-50</div><divclass="w-75p-3bg-infoborder">w-75</div><divclass="w-100p-3bg-infoborder">w-100</div><divclass="w-autop-3bg-infoboborderder-top">w-auto</div></div><h2>相对于父元素的尺寸类-高度</h2><divclass="sizes_heightbg-secondarybordertext-whitefont-weight-bold"><divclass="h-25d-inline-blockbg-infoborder">h-25</div><divclass="h-50d-inline-blockbg-infoborder">h-50</div><divclass="h-75d-inline-blockbg-infoborder">h-75</div><divclass="h-100d-inline-blockbg-infoborder">h-100</div><divclass="h-autod-inline-blockbg-infoboborderder-top">h-auto</div></div>5.8尺寸类5.8.1相对于父元素的尺寸类4.相对于父元素的尺寸类的实现效果5.8尺寸类5.8.1相对于父元素的尺寸类5.8尺寸类5.8.1相对于父元素的尺寸类除上述10种类以外，还可使用.mw-100和.mh-100这两个类。.mw-100类主要用于设置元素的的最大宽度，.mh-100类主要用于设置元素的的最大高度。使用上述两种类可避免出现因子元素尺寸过大撑破父元素的情况，从而设计出美观、合理的页面。vw、vh是基于视图窗口的单位，是CSS3新增的一部分。不论视图窗口如何改变，视口的宽度始终保持100vw，高度始终保持100vh。也就是将视口平均分为100份，1vw为一份，1vw始终等于视口宽度的1%，1vh始终等于视口高度的1%。5.8尺寸类5.8.2相对于视口的尺寸类类名说明.min-vw-100设置本元素的最小宽度等于视口宽度.min-vh-100设置本元素的最小高度等于视口高度.vw-100设置本元素的宽度等于视口宽度.vw-100设置本元素的高度等于视口高度需要注意，设置元素类名为“min-vw-100”，当元素的宽度大于视口宽度时，此元素将按照其自身的宽度大小来显示，且页面会出现横向的滚动条；当元素的宽度小于视口宽度时，此元素将按照视口的宽度大小来显示，并始终与视口宽度保持一致。设置元素类名为“min-vh-100”，当元素的高度大于视口高度时，此元素将按照其自身的高度大小来显示，且页面会出现纵向的滚动条；当元素的高度小于视口高度时，此元素将按照视口的高度大小来显示，并始终与视口高度保持一致。5.8尺寸类5.8.2相对于视口的尺寸类1.相对于视口的尺寸类语法格式相对于视口的尺寸类的语法格式如下所示。<divclass="min-vw-100">Min-width100vw</div>2.相对于视口的尺寸类的应用演示案例描述：在页面中为元素应用相对于视口的尺寸类，设置第1个div元素的宽度为2000px，类名为“min-vw-100”；设置第2个div元素的宽度为500px，类名为“min-vw-100”；设置第3个div元素的宽度为2000px，类名为“vw-100”。5.8尺寸类5.8.2相对于视口的尺寸类3.相对于视口的尺寸类的代码实现主体代码

例5.19<h3class="text-dark">相对于视口的尺寸类-宽度对比</h3><divclass="min-vw-100mt-2bg-info"style="width:1000px;">元素本身宽度为1000px----(min-vw-100)</div><divclass="min-vw-100mt-2bg-info"style="width:200px;">元素本身宽度为200px----(min-vw-100)</div><divclass="vw-100mt-2bg-info"style="width:200px;">元素本身宽度为200px----(vw-100)-与视口保持一致</div>5.8尺寸类5.8.2相对于视口的尺寸类4.相对于视口的尺寸类的实现效果5.8尺寸类5.8.2相对于视口的尺寸类5.9溢出类溢出类介绍溢出类语法格式5.9溢出类当一个盒子的内容（子元素）超过盒子本身的大小的时候，就会出现溢出现象。在CSS中通常使用overflow属性解决元素的内容溢出，而在Bootstrap4中则定义了两个溢出类来处理内容溢出。溢出类具体说明如下表所示。类名说明.overflow-auto在固定宽高的元素上，如果内容超出元素大小，将出现一个垂直滚动条，移动滚动条可查看被隐藏的全部内容.overflow-hidden在固定宽高的元素上，如果内容超出元素大小，溢出的部分将会被隐藏5.9溢出类1.溢出类语法格式溢出类的语法格式如下所示。<divclass="overflow-auto">文本内容</div>2.溢出类应用演示案例描述：在页面中为元素应用上述2种溢出类，对比两种溢出类的运行效果。3.溢出类代码实现主体代码

例5.20<h2class="text-center