第4章-Bootstrap页面内容

第4章Bootstrap页面内容3.1

排版3.2代码风格3.3表格3.4表单3.5图片3.6画像3.7实战:后台管理系统页面掌握Bootstrap中页面各组成元素的排版掌握Bootstrap中代码、表格及表单的设计掌握Bootstrap中画像及图片的设计引言网页的组成复杂而丰富，包括文字、图片、视频等。进行页面设计时必须按照一定的顺序合理编排页面元素。页面编排的好坏直接决定网站的整体风格，也影响页面的美观度。在Bootstrap中，页面的编排应立足于全局，实现元素风格的统一化。本章主要介绍Bootstrap的页面内容，包括页面排版、代码风格、表格、表单、画像、图片等样式。4.1排版常用排版类强调引用列表4.1排版4.1.1常用排版类类名名称说明.h{1|2|3|4|5|6}标题类这些标题类可为HTML文本标签赋予标题样式，等同于HTML中所有的标题标签。HTML中所有的标题标签，如<h1>到<h6>在Bootstrap中均可使用.small副标题开发者可在标题内应用<small>标签或为内嵌元素赋予.small类，从而实现为标题添加副标题（也称辅助标题）.display{1|2|3|4}显示标题可使用.display类将标题文字放大。Bootstrap4提供.display1到.display4的显式标题类.lead段落类通过添加.lead类可以让段落突出显示。突出显示的段落文本其font-size变为1.25rem，font-weight变为300.initialism缩略语缩略语元素带有title属性，title属性可用于存放完整文本，缩略语的提示框外观展现为背景呈白色的线框，当鼠标移至缩写词上时提示框会带有“问号”。<abbr>标签用于缩略词和首字母缩略词的实现，.initialism类用于实现一个字体略小的缩写词。1.常用标题的语法格式（1）标题标签的语法格式如下所示。<h1>h1.heading</h1>（2）标题类的语法格式如下所示。<pclass="h1">h1.Bootstrap标题</p>（3）副标题类的语法格式如下所示。<h3>主标题<smallclass="text-muted">副标题</small></h3>（4）显示标题的语法格式如下所示。<h1class="display-1">Display1</h1>4.1排版4.1.1常用排版类1.常用标题的代码实现使用标题类实现依次输出6级标题，使用.small类依次输出3级标题及其副标题，使用.display类实现依次输出4级显式标题。4.1排版4.1.1常用排版类<!--.h1-.h6标题类的应用--><pclass="h1">h1.中国特色大国外交</p><pclass="h2">h2.坚持习近平外交思想</p><pclass="h3">h3.坚持独立自主和平外交政策</p><pclass="h4">h4.坚持走和平发展道路</p><pclass="h5">h5.推动建设新型国际关系</p><pclass="h6">h6.推动构建人类命运共同体</p><!--常规标题--对照组--><h1>领悟人生真谛<smallclass="text-muted">把握人生方向</small></h1><h2>追求远大理想<smallclass="text-muted">坚定崇高信念</small></h2><h3>继承优良传统<smallclass="text-muted">弘扬中国精神</small></h4><h1class="display-1">Display1把握人生方向</h1><h1class="display-2">Display2坚定崇高信念</h1><h1class="display-3">Display3弘扬中国精神</h1><h1class="display-4">Display4亲民爱民艰苦奋斗</h1>主体代码

例5.31.常用标题的实现效果4.1排版4.1.1常用排版类2.段落的语法格式（1）.lead类的语法格式如下所示。4.1排版4.1.1常用排版类<pclass="lead">这是一个引导段落，它从常规段落中脱颖而出。</p>2.段落的代码实现使用.lead类突出显示赞美长城的诗句。4.1排版4.1.1常用排版类<p>长城是世界上修建时间最长、工程最大的一项古代防御工程，它是一道高大、坚固而且连绵不断的长垣。</p><pclass="lead">“望长城内外,惟余莽莽;大河上,顿失滔滔。”</p><p>1952年,国家组织开展了第一批长城保护维修工程。正是一代又一代长城人的专注、传承,才让我们在今天依然能够感受到万里长城的磅礴气势。</p>主体代码

例4.22.段落的实现效果4.1排版4.1.1常用排版类3.缩略语的语法格式（1）缩略语的语法格式如下所示。4.1排版4.1.1常用排版类<p><abbrtitle="完整文本">缩略词</abbr></p><p><abbrtitle="完整文本"class="initialism">字体略小的缩略词</abbr></p>3.缩略语的代码实现使用缩略语标签与initialism类为文本实现缩略语样式。4.1排版4.1.1常用排版类<p>社会主义核心价值体系是由有关<abbrtitle="马克思主义指导思想">指导思想</abbr><abbrtitle="中国特色社会主义理想">一个理想</abbr><abbrtitle="以爱国主义为核心的民族精神和以改革开放为核心的时代精神">两种精神</abbr><abbrtitle="社会主义荣辱观">一个道德观念</abbr>组成的</p><p><abbrtitle="社会主义核心观是社会主义核心价值体系的内核"class="initialism">社会主义核心价值观</abbr></p>主体代码

例4.33.缩略语的实现效果4.1排版4.1.1常用排版类HTML5中的内联样式同样适用于Bootstrap，Bootstrap框架强调实现页面样式时，直接使用HTML元素标签并辅助一些样式即可，辅助样式包括<mark>、<del>、<s>、<u>、<u>、<strong>、<em>等。实现强调样式，可使用Bootstrap默认的排版标签显示文字效果，并在需要特别标注的文字内容前后加入强调标签即可。强调样式的语法格式如下所示。4.1排版4.1.2强调<p>你可以使用mark标签去<mark>高亮</mark>文本.</p>代码实现分别使用强调标签与强调类为文本添加强调样式。4.1排版<h2>强调文本</h2><p> mark >标签-重点标记：<mark>标记的重点内容</mark></p><p> .mark 类：<spanclass="mark">标记的重点内容</span></p><p> del >标签-删除：<del>删除的文本</del></p><p> s >标签-不再准确中划线：<s>不再准确的文本</s></p><p> ins >标签-补充文本：<ins>对文档的补充文本</ins></p><p> u >标签-下划线：<u>添加下划线的文本</u></p><p> strong >标签-粗体：<strong>粗体文本</strong></p><p> em >标签-斜体：<em>斜体文本</em></p>主体代码

例4.44.1.2强调强调的实现效果4.1排版4.1.2强调4.1排版4.1.3引用以学术网站为例，其页面中包含大量的文献、论文或文章资源，因此在页面中标注引用是必不可少的。Bootstrap框架通过<blockquote>标签实现引用样式增强，在正文中添加引用文字，可使用引用块包裹引用文字，而引用块则通过带有.blockquote类的<blockquote>标签实现。1.引用的结构组成引用块中主要有三个可用标签。（1）<blockquote>引用块标签。（2）<cite>引用块内容来源的标注标签。（3）<footer>包含引用来源与作者的标签。其中，<footer>标签要配合.blockquote-footer类和<cite>标签组合使用。4.1.3引用4.1排版2.引用的语法格式引用样式的语法格式如下所示。4.1.3引用4.1排版<blockquoteclass="blockquote"><pclass="mb-0">引用文字</p><footerclass="blockquote-footer">引用来源-作者署名<citetitle="SourceTitle">源作品的名称</cite></footer></blockquote>。代码实现使用引用块标签实现诗歌赏析，并应用.text-ight类实现文本右对齐。4.1排版<blockquote><p>红军不怕远征难，万水千山只等闲。</p><p>五岭逶迤腾细浪，乌蒙磅礴走泥丸。</p><p>金沙水拍云崖暖，大渡桥横铁索寒。</p><p>更喜岷山千里雪，三军过后尽开颜。</p><footerclass="blockquote-footertext-right">—选自毛泽东的<cite>《七律·长征》</cite></footer></blockquote>主体代码

例4.54.1.3引用强调的实现效果4.1排版4.1.3引用Bootstrap框架针对列表同样实现了样式增强，包括有序列表、无序列表、无样式列表、内联式列表、描述性列表等。4.1排版4.1.4列表类名名称说明.list-unstyled无样式列表删除list-style列表项的默认样式和左边距（仅限直接子项）。这仅适用于直接子列表项，这意味着需要为所有嵌套列表添加list-unstylede类.list-inline内联式列表内联列表把垂直列表变成水平列表，且去掉项目符号，保持水平显示。实现内联列表需要将.list-inline类与.list-inline-item类结合，需要为列表项添加.list-inline-item类

.list-inline-item内联式列表.dl-horizontal描述性列表描述性列表由<dl></dl>、<dt></dt>、<dd></dd>标签组成，Bootstrap可为<dl>标签添加.dl-horizontal类使列表实现水平显示效果.text-truncate截断文本类用省略号截断文本。可与描述性列表组合使用，对于较长的术语，可视情况为<dt>添加.text-truncate类，从而应用省略号截断文本。1.无样式列表-语法格式无样式列表的语法格式如下所示。4.1排版4.1.4列表<ulclass="list-unstyled"><li>列表项</li><li>列表项</li></ul>使用无样式列表分别嵌套两个列表，对比嵌套列表是否应用.list-unstyled类的效果。1.无样式列表-演示说明<ulclass="list-unstyled"><li>担当复兴大任成就时代新人</li><li>我们处在中国特色社会主义新时代</li><li>新时代呼唤担当民族复兴大任的时代新人</li><li>领悟人生真谛把握人生方向<ul><!--嵌套列表未加list-unstyled类--><li>人生观是对人生的总看法</li><li>树立正确的人生观</li><li>创造有意义的人生</li></ul></li><li>坚定信仰信念信心<ulclass="list-unstyled"><!--嵌套列表添加list-unstyled类--><li>增强对马克思主义、共产主义的信仰</li><li>增强对中国特色社会主义的信念</li><li>增强对实现中华民族伟大复兴的信心</li></ul></li></ul>主体代码

例4.64.1排版4.1.4列表1.无样式列表-实现效果4.1排版4.1.4列表2.内联式列表-语法格式内联式列表的语法格式如下所示。4.1排版4.1.4列表内联式列表的语法格式如下所示。<ulclass="list-inline"><liclass="list-inline-item">列表项</li><liclass="list-inline-item">列表项</li></ul>使用内联式列表为社会主义核心价值观实现水平导航效果。2.内联式列表-演示说明<ulclass="list-inline"><liclass="list-inline-item">富强</li><liclass="list-inline-item">民主</li><liclass="list-inline-item">文明</li><liclass="list-inline-item">和谐</li><liclass="list-inline-item">自由</li><liclass="list-inline-item">平等</li><liclass="list-inline-item">公正</li><liclass="list-inline-item">爱国</li><liclass="list-inline-item">敬业</li><liclass="list-inline-item">诚信</li><liclass="list-inline-item">友善</li></ul>主体代码

例4.74.1排版4.1.4列表2.内联式列表-实现效果4.1排版4.1.4列表3.描述性列表-语法格式描述性列表的语法格式如下所示。4.1排版4.1.4列表<dlclass="dl-horizontal"><dt>描述列表</dt><dd>描述列表非常适合定义术语</dd><dtclass="text-truncate">被截断的术语</dt><dd>这在空间紧张时很有用。在末尾添加一个省略号。</dd></dl>Bootstrap框架的描述性列表与HTML5的基本一致，Bootstrap对描述性列表标签进行了功能增强。Bootstrap调整其行间距、外边距以及字体加粗效果。结合描述性列表与网格系统水平对齐术语和描述，实现名词解释效果。3.描述性列表-演示说明dlclass="row"><dtclass="col-sm-3">十三五</dt><ddclass="col-sm-9">一般指中华人民共和国国民经济和社会发展第十三个五年规划纲要</dd><dtclass="col-sm-3">十四五</dt><ddclass="col-sm-9"><p>一般指中华人民共和国国民经济</p><p>和社会发展第十四个五年规划和2035年远景目标纲要。</p></dd><dtclass="col-sm-3text-truncate">三保三保三保三保三保三保</dt><ddclass="col-sm-9">保基本民生、保工资、保运转</dd></dl>主体代码

例4.74.1排版4.1.4列表3.描述性列表-实现效果4.1排版4.1.4列表4.2代码风格行内代码与代码块其他代码1.代码标签介绍4.2代码风格代码标签是HTML5的新增标签，可在文本中保持显示代码样式。Bootstrap框架增强了代码标签的功能，主要包括<code>标签、<pre>标签、<var>标签、<kbd>标签和<smap>标签。1.代码标签介绍标签名称说明<code>行内代码<code>标签包裹行内代码片段，实现内联式的代码样式。需要确保转义HTML代码中的尖括号，通过“<”转译左尖括号，通过“>”转译右尖括号<pre>代码块<pre>标签可包裹多行代码。同样需要确保转义HTML代码中的尖括号，以便正确展示代码。可选择性地添加.pre-scrollable类，实现垂直滚动的代码块效果<var>其他代码标签<var>标签包裹并标识变量<kbd>

<kbd>标签通常用于标明需要键盘输入的字符<smap>

<samp>标签指示程序的示例输出结果4.2代码风格2.行内代码与代码块文本内容<code><section></code>文本内容.

代码块的语法格式如下所示。<pre>

<code><p>示例代码...</p><p>换行代码...</p>

</code></pre>行内代码的语法格式4.2代码风格使用行内代码标签与代码块标签分别输出单行代码及多行代码。2.行内代码与代码块<div>行内代码：<code><code></code>标签可实现展示行内代码片段。</div><p>行内代码：<code>alert('thisisinlinecode')</code></p><div>代码块:<preclass="pre-scrollable">varx=1;vary=2;alert(x+y);varx=1;vary=2;alert(x+y);varx=1;vary=2;alert(x+y);</pre></div>主体代码

例4.94.2代码风格2.行内代码与代码块-实现效果4.2代码风格3.其他代码的语法格式如下所示。//<var>标签<var>y</var>=<var>m</var><var>x</var>+<var>b</var>//<kbd>标签文本内容<kbd>cd</kbd>文本内容.<br>文本内容<kbd><kbd>ctrl</kbd>+<kbd>,</kbd></kbd>//<samp>标签<samp>输出内容.</samp>其他代码的语法格式如下所示。4.2代码风格变量标签用于包裹变量，输入标签用于标明键盘输入，输出标签用于以示例的形式输出程序的示例输出代码。这些代码标签用法基本一致，即使用双标签将代码进行包裹。使用变量标签、用户输入标签、示例输出标签实现代码展示。3.其他代码<!--<var>标签--><var>int</var><var>x</var>=5;<br><var>int</var><var>y</var>=3;<br><var>int</var><var>sum</var>;<br><var>sum</var>=<var>x</var>+<var>y</var><br><br><!--<kbd>标签--><p>对代码进行全选操作时，请输入：<kbd>ctrl</kbd>+<kbd>a</kbd></p><br><!--<samp>标签-->document.write("helloworld")<p>运行程序后，其示例结果为：<samp>helloworld</samp></p>主体代码

例4.104.2代码风格3.其他代码-实现效果4.2代码风格3.1Bootstrap布局基础3.1.2代码风格2.容器的分类-container-fluid（1）.container-fluid容器.container-fluid容器是保持width为100%、占据全部视口（viewport）的容器，它在所有断点处均保持width为100%。container-fluid容器自动设置容器宽度为外层视窗的100%，可用于实现全屏设置、保持100%宽度设置。为一个元素添加.container-fluid类，可实现一个元素保持跨越整个视口的宽度。4.3表格表格的结构标签表格的个性化风格4.3表格4.3.1表格的结构标签Bootstrap框架定义丰富的表格样式类，增强表格的功能，优化表格的结构标签，使得表格在页面中呈现出简洁、美观的特点。4.3表格4.3.1表格的结构标签1.表格的常用结构标签介绍名称说明<table>表格容器<thead>表格的表头容器<tbody>表格的主体容器<tr>表格的行结构<td>表格的单元格<th>表格的表头容器中的单元格<caption>表格的标题容器4.3表格4.3.1表格的结构标签1.表格的常用结构标签介绍Bootstrap框架实现以上标签的样式优化，使表格风格更加统一。在HTML结构中一些应用频率较少的表格标签，如<tfoot>、<colgroup>等，Bootstrap框架仍支持这些标签的使用，但并不为其提供样式优化与增强。4.3表格4.3.2表格的个性化风格Bootstrap定义了丰富的表格样式类，开发者可应用丰富、多样的表格类设计个性化表格。2.表格的常用类4.3表格4.3.2表格的个性化风格名称适用标签说明.table<tbody>表格的默认风格，对每个td增加padding，相邻之间的td也会有一些间隔，并且增加了水平方向的分割线.table-borderless<tbody>无边框风格，设计没有边框的表格.table-striped<tbody>条纹状风格，设计条纹、斑马纹状的表格.table-bordered<tbody>边框风格，设计表格具备边框.table-hover<tbody>指针悬停风格，使表格产生行悬停效果，将鼠标移至行上时，改变底纹颜色.table-sm<tbody>紧凑风格，将表格的padding值缩减一半，使表格紧凑.table-primary<tbody>、<thead>、<tr>、<td>用于设计表格背景颜色，蓝色，表重要操作.table-success适用标签与.table-primary一致用于设计表格背景颜色，绿色，表示可执行操作.table-danger适用标签与.table-primary一致用于设计表格背景颜色，红色，表示危险操作.table-info适用标签与.table-primary一致用于设计表格背景颜色，浅蓝色，表示表示内容变更.table-warning适用标签与.table-primary一致用于设计表格背景颜色，橘色，表示需要注意的操作.table-active适用标签与.table-primary一致用于设计表格背景颜色，灰色，用于鼠标悬停效果.table-secondary适用标签与.table-primary一致用于设计表格背景颜色，灰色，表示内容不重要.table-light适用标签与.table-primary一致用于设计表格背景颜色，浅灰色.table-dark适用标签与.table-primary一致用于设计表格背景颜色，深灰色4.3表格4.3.2表格的个性化风格3.表格的语法格式以条纹状表格为例，语法格式如右侧所示。<tableclass="tabletable-striped"><thead><tr><th>#</th><th>分类</th></tr></thead><tbody><tr><th>1</th><td>类型1</td></tr><tr><th>2</th><td>类型2</td></tr></tbody></table>4.3表格4.3.2表格的个性化风格4.表格的应用演示以表格的颜色风格与指针悬停风格为例进行演示。主体代码

例4.11<tableclass="tabletable-borderedtable-hovertext-center"><caption>24节气</caption><!--蓝色背景--><theadclass="table-primary"><tr><th>#</th><th>春</th><th>夏</th><th>秋</th><th>冬</th></tr></thead><tbody><!--浅蓝色背景--><trclass="table-info"><th>1</th><td>立春</td><td>立夏</td><td>立秋</td><td>立冬</td></tr>

<!--绿色背景--><trclass="table-success"><th>2</th><td>雨水</td><td>小满</td><td>处暑</td><td>小雪</td></tr><trclass="table-info"><th>3</th><td>惊蛰</td><td>芒种</td><td>白露</td><td>大雪</td></tr><trclass="table-success"><th>4</th><td>春分</td><td>夏至</td><td>秋分</td><td>冬至</td></tr>

<trclass="table-info"><th>5</th><td>清明</td><td>小暑</td><td>寒露</td><td>小寒</td></tr><trclass="table-success"><th>6</th><td>谷雨</td><td>大暑</td><td>霜降</td><td>大寒</td></tr></tbody></table>4.3表格4.3.2表格的个性化风格4.表格的实现效果在上述代码中，首先为<table>标签应用.table类保持Bootstrap表格的默认样式，其次为<table>标签应用.table-hover类、.table-bordered类、.text-right类，分别使表格保持鼠标悬停变色，为表格添加边框样式，使表格内容水平居中，即可完成此个性化表格设计。4.4表单表单控件基本结构常用表单控件类表单控件应用4.4表单表单包括表单域、输入框、单选按钮、复选框等控件，Bootstrap4进一步扩展了表单样式，使表单在浏览器和设备之间的呈现更具一致性，本节将详细些介绍表单控件的应用。4.4表单1.表单控件基本结构介绍4.4.1表单控件基本结构在Bootstrap4中，为文本表单控件（如<input>、<textarea>、<select>）添加.form-control类，可使文本表单控件获得统一的全局样式，如宽度100%、浅灰色的边框，4px的圆角等。在组合使用<label>标签和表单控件时，可将标签与表单控件放置在.form-group类定义的表单组中，从而使表单组内的元素在视觉呈现上获得最佳的排列样式。<form><divclass="form-group"><labelfor="name">用户名</label><inputtype="email"class="form-control"id="name"></div><divclass="form-group"><labelfor="pwd">密码</label><inputtype="password"class="form-control"id="pwd"></div><buttontype="submit"class="btnbtn-primary">提交</button></form>1.表单控件基本结构介绍表单控件的基本结构如下所示。4.4表单4.4.1表单控件基本结构1.常用表单控件类介绍Boottsrap4中内置了大量表单控件类，可用于控制表单的尺寸、状态、输入范围等。4.4表单4.4.2常用表单控件类4.3表格4.3.2表格的个性化风格名称说明名称.form-control为文本表单控件设置统一样式，如宽度100%、浅灰色的边框，4px的圆角等。.form-control.form-control-{lg|sm}用于设置表单控件的尺寸，如设置大号、小号表单等。.form-control-{lg|sm}.form-control-plaintext用于将应用了readonly属性的表单控件样式化为只读的纯文本。.form-control-plaintext.form-control-range用于设置水平的范围输入效果，范围输入效果早不同的浏览器中效果不同。.form-control-range.form-text用于创建表单的帮助文本。.form-text.form-check单选按钮、复选框的父容器，应用位置与.form-group类一致。可实现单选按钮、复选框堆叠效果。.form-check容器内的控件需应用.form-check-input类。.form-check.form-check-input.form-check容器内的<input>控件需应用.form-check-input类。.form-check-input.form-check-label.form-check容器内的<label>控件需应用.form-check-label类。.form-check-label.form-check-inline应用于.form-check容器，可使容器内的单选按钮和复选框实现水平排列效果。.form-check-inline.disabled用于设置单选按钮与复选框的禁用状态，<input>的禁用状态则通过diaabled属性来实现。.disabled.form-row表单行。表单控件不仅可与网格布局（row、col）组合使用，建立更复杂的布局。还可借助Bootstrap4定义的.form-row类使表单获得更紧凑的布局。.form-row4.4表单4.4.3表单控件应用表单控件的应用演示“实践是检验真理的唯一标准”。应用上述表单控件的常用工具类来展示其不同的显示效果。主体代码

例4.12<form><!--表单行--><divclass="form-row"><!--网格布局的列元素--><divclass="col"><labelfor="Firstname">用户名：</label><!--大号输入框--><inputtype="text"class="form-controlform-control-lg"placeholder="Firstname"id="Firstname"></div><divclass="col"><labelfor="Pwd">密码：</label><!--小号输入框--><inputtype="password"class="form-controlform-control-sm"placeholder="Lastname"id="Pwd"><!--帮助文本--><smallclass="form-text">帮助文本-请输入6位密码</small></div></div>主体代码

例4.11<!--表单组--><divclass="form-group"><labelfor="Mail">邮箱：</label><!--输入框的只读纯文本模式--><inputtype="text"readonlyclass="form-control-plaintext"id="Mail"value="email@"></div><divclass="form-group"><labelfor="Range">输入范围</label><!--输入范围--><inputtype="range"class="form-control-range"id="Range"></div><h3>单选按钮与复选框的布局类应用</h3>性别：<!--堆叠效果--><divclass="form-check"><inputtype="radio"class="form-check-input"name="sex"id="sex1"><labelclass="form-check-label"for="sex1">男</label></div><divclass="form-check"><inputtype="radio"class="form-check-input"name="sex"id="sex2"><labelclass="form-check-label"for="sex2">女</label></div>爱好：<!--水平排列--><divclass="form-checkform-check-inline"><inputtype="checkbox"class="form-check-input"name="hobby"id="hobby1"><labelclass="form-check-label"for="hobby1">阅读</label></div><divclass="form-checkform-check-inline"><inputtype="checkbox"class="form-check-input"name="hobby"id="hobby2"><labelclass="form-check-label"for="hobby2">运动</label></div><divclass="form-checkform-check-inline"><inputtype="checkbox"class="form-check-input"name="hobby"id="hobby3"><labelclass="form-check-label"for="hobby3">唱歌</label></div></form>表单控件的应用演示4.4表单4.4.3表单控件应用表单的实现效果表单控件类的显示效果如图所示。4.4表单4.4.3表单控件应用4.5图片

图片类图片对齐方式Bootstrap框架增强了图片功能，为图片提供响应式行为。开发者在项目中引用图片将更加便捷且图片元素更加稳定。4.5图片4.5.1图片类1.图片的常用类介绍名称说明.img-fluid响应式图片.img-thumbnail缩略图，给图片加上一个圆角且1px的边界的边框样式.rounded图片样式，图片实现圆角矩形样式.rounded-circle图片样式，图片实现圆角50%样式以响应式图片为例进行介绍，通过Bootstrap4所提供的.img-fluid类使其支持响应式布局。其原理是将max-width:100%、height:auto赋予图片，实现响应式布局，图片将随父元素同步缩放。响应式图片的语法格式如下所示。4.5图片4.5.1图片类1.图片的常用类介绍2.图片的语法格式<imgsrc="..."class="img-fluid"alt="...">使用.img-fluid类使图片与父元素保持同步缩放。4.5图片<bodyclass="container"><imgsrc="images/respon.jpg"class="img-fluid"alt=""></body>主体代码

例4.134.5.1图片类2.图片类的应用演示当用户改变浏览器窗口的尺寸时，该图片将随浏览器窗口的变化而同步缩放。4.5Bootstrap布局基础4.5.2图片对齐方式1.Bootstrap中实现图片对齐的常用方式如下。（1）浮动类。使用浮动类.float-left或.float-right分别实现图片的左浮动与右浮动。（2）文本对齐类。使用.text-left类、.text-center类、.text-right类分别实现水平居左、水平居中、水平居右对齐。（3）外边距类。使用外边距类.mx-auto来实现水平居中，需要注意，必须通过.d-block类将<img>标签转换成块级元素。4.5Bootstrap布局基础4.5.2图片对齐方式2.图片对齐方式的应用演示<!--父元素清除浮动影响--><divclass="clearfix"><!--左浮动--><imgsrc="images/align.jpg"class="float-leftrounded"width="200"><spanclass="float-left">浮动类实现左浮动</span><!--右浮动--><imgsrc="images/align.jpg"class="float-rightimg-thumbnail"width="200"><spanclass="float-right">浮动类实现右浮动</span></div><!--浮动类实现左右对齐--><divclass="text-center"><imgsrc="images/align.jpg"class="rounded-circle"width="200"><pclass="text-center">文本类实现水平居中</p></div><!--外边距类实现水平居中--><div><imgsrc="images/align.jpg"class="mx-autod-block"width="200"><pclass="text-center">外边距类实现水平居中</p></div>主体代码

例4.14结合图片类，通过一个案例来演示图片对齐方式的设置。4.5Bootstrap布局基础4.5.2图片对齐方式3.图片类的实现效果4.6画像

画像介绍画像语法画像应用实践4.6画像1.画像介绍任何时候需要为图片显示一段内容时，如带有可选标题的图片，均可使用<figure>标签进行设计。.figure类、.figure-img类、.figure-caption类为HTML5的<figure>和<figcaption>元素实现了样式增强。当<figure>标签内所包含的图片没有明确设置尺寸时，必须为<img>标签添加.img-fluid类，使其支持响应式布局。4.6画像2.画像的语法格式画像的语法格式如下所示。<figureclass="figure"><imgsrc="图片地址"class="figure-imgimg-fluidrounded"alt="..."><figcaptionclass="figure-caption">画像对应标题</figcaption></figure>3.画像应用-演示说明项目资源引入

例4.15<figureclass="figure"><imgsrc="images/briage.jpg"class="figure-imgimg-fluidrounded"alt="..."><figcaptionclass="figure-caption">传统的桥,古朴的美</figcaption></figure><figureclass="figure"><imgsrc="images/mountain.jpg"class="figure-imgimg-fluidrounded"alt="..."><figcaptionclass="figure-caption">一重山,两重山。</figcaption></figure><figureclass="figure"><imgsrc="images/river.jpg"class="figure-imgimg-fluidrounded"alt="..."><figcaptionclass="figure-caption">岁月是一条蜿蜒的河</figcaption></figure><figureclass="figure"><imgsrc="images/briage.jpg"class="figure-imgimg-fluidrounded"alt="..."><figcaptionclass="figure-caption">传统的桥,古朴的美</figcaption></figure>

主体代码

例4.154.6画像4.画像应用-实现效果4.6画像4.7实战--后台管理系统页面4.7.1页面结构分析简图中国传统文化是不断传承下来的丰厚遗产，曾长期处于世界领先的地位。中国传统文化的范围较广，以诸子百家经典为例进行介绍，诸子百家经典包含《论语》、《孟子》、《道德经》、《孙子兵法》等。本节以诸子百家经典为题材设计页面，使用Bootstrap的页面排版、表格风格、图片风格等技术实现一个简单的响应式书籍管理页面。1.项目介绍4.7.1页面结构分析简图首页主要分为头部标题、页面主图、表单操作项以及页面主体四部分。利用排版的标题类制作页面头部标题，利用图片类使页面主图保持响应式设计，通过表单元素设计表单操作项，根据表格风格类设计出美观、合理的表格样式。表格主要由复选框、书籍编