版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
任务4基本排版与工具类应用Bootstrap响应式网站开发Bootstrap基础排版1
排版主要是针对HTML元素进行样式设置及布局定位，排版在前端开发十分重要，Bootstrap提供了一套CSS样式，可以方便快速地渲染HTML元素，让页面排版更加便捷。Bootstrap基础排版
Bootstrap中可以使用HTML中<h1>~<h6>这六个标题标签，并赋予了它们半粗体属性及由大到小的字体font-size属性。Bootstrap基础布局--基础排版标
题h1~h6标签<h1>中国十大博物馆（h1标题）</h1><h2>中国十大博物馆（h2标题）</h2><h3>中国十大博物馆（h3标题）</h3><h4>中国十大博物馆（h4标题）</h4><h5>中国十大博物馆（h5标题）</h5><h6>中国十大博物馆（h6标题）</h6>【实例4-1】标题的使用，代码如下运行【实例4-1】代码，页面效果如图所示。图
h1~h6标签
Bootstrap除了基础的<h1>~<h6>这六个标题标签，还提供了.h1~.h6六个样式类，使用它们可以给内联属性的文本赋予不同级别的标题样式。Bootstrap基础布局--基础排版使用样式类.h1~.h6<spanclass="h1">中国十大博物馆（h1标题）</span><spanclass="h2">中国十大博物馆（h2标题）</span><spanclass="h3">中国十大博物馆（h3标题）</span><spanclass="h4">中国十大博物馆（h4标题）</span><spanclass="h5">中国十大博物馆（h5标题）</span><spanclass="h6">中国十大博物馆（h6标题）</span>【实例4-2】标题的使用，代码如下运行【实例4-2】代码，页面效果如图所示图
使用.h1~.h6样式类
Bootstrap基础布局--基础排版Display标题类Bootstrap还提供了.display-1、.display-2、.display-3、.display类来控制标题的样式。Display标题可以输出更大更粗的字体样式。小标题以.display-1类为例，分辨率大于等于1200像素时，文字大小为5rem，当分辨率小于1200像素时，文字大小设置为：font-size:calc(1.625rem+4.5vw)。
Bootstrap将页面body中的全局字体大小font-size设置为16px，行高line-height设置为1.5。<body>和<p>元素都被赋予了这些属性。另外<p>元素还被设置了等于1rem行高(16px)的底部外边距（margin-bottom）。Bootstrap基础布局--基础排版段落1.基本段落2.中心内容Bootstrap中为了突出多个段落中的某一个段落，也就是强调文本，则可以添加class="lead"，这将得到更大更粗、行高更高的文本。.lead{font-size:1.25rem;font-weight:300;}
Bootstrap基础布局--基础排版文本样式1.内联文字元素HTML网页中，为了让文字富有变化，或者为了着重强调某一部分，例如为文字设置粗体、斜体或下划线效果，为此Bootstrap针对文本格式化标签的样式进行了重新定义，表列出了常用的格式标签。标签名称说明标签名称说明<small>…</small>字体大小是父元素的0.85<strong>…</strong>表示强调，一般为粗体<mark>…</mark>用于突出显示高亮的文本<em>…</em>表示强调，一般为斜体<del>…</del>删除线<b>…</b>粗体，表示高亮单词<s>…</s>对于没有用的、不相关的内容<i>…</i>斜体，表示发言、技术词汇<ins>…</ins>额外插入的文本<sup>…</sup>上标<u>…</u>专有名词（人名、地名、朝代等）<sub>…</sub>下标
Bootstrap基础布局--基础排版1.文本的基本样式与颜色Bootstrap针对文本的对齐提供了.text-start、.text-end、.text-center、.text-nowrap等文本对齐类，表列出了常用的格式标签。类说明类说明.text-start向左对齐文本.text-primary表示重要强调色.text-end向右对齐文本.text-success表示成功强调色.text-center居中对齐文本.text-info表示信息强调色.text-nowrap内容不换行.text-warning表示警告强调色.text-body默认颜色，为黑色.text-danger表示危险强调色.text-dark表示深灰色文字.text-secondary表示次要的.text-muted表示内容减弱.text-light表示浅灰色文本
Bootstrap基础布局--基础排版2.文本的对齐方式与强调Bootstrap针对文本的对齐提供了.text-left、.text-right、.text-center、.text-nowrap等文本对齐类，表4-5列出了常用的格式标签。类说明类说明.text-left向左对齐文本.text-primary表示重要强调色.text-right向右对齐文本.text-success表示成功强调色.text-center居中对齐文本.text-info表示信息强调色.text-nowrap内容不换行.text-warning表示警告强调色.text-muted内容减弱.text-danger表示危险强调色表4-5常用文本对齐与强调样式
Bootstrap基础布局--基础排版2.文本的对齐方式与强调图
常用文本对齐与强调样式演示
Bootstrap基础布局--基础排版3.
字体大小演示Bootstrap中的字体大小与HTML的标题元素相匹配，因此随着数量的增加，它们的大小也会减小。共定义了6个字体大小类.fs-1、.fs-2、.fs-3、.fs-4、.fs-5、.fs-6。以.fs-1类为例。.fs-1{font-size:calc(1.375rem+1.5vw);}@media(min-width:1200px){.fs-1{font-size:2.5rem!important;}}
Bootstrap基础布局--基础排版4.
字母大小写与缩写演示Bootstrap提供了.text-lowercase（将大写转换为小写）、.text-uppercase（将小写转换为大写）、.text-capitalize（将首字母转换为大写）几个类方便地改变文本的字母大小写。Bootstrap定义<abbr>元素的样式为显示在文本底部的一条虚线边框，当鼠标悬停在上面时会显示完整的文本，实现方式是为<abbr>的title属性添加了文本说明。<pclass="text-lowercase">将大写转换为小写:博物馆（MUSEUM）</p><pclass="text-uppercase">将小写转换为大写:博物馆（Museum）</p><pclass="text-capitalize">将首字母转换为大写:博物馆（museum）</p><p>层叠样式表<abbrtitle="CascadingStyleSheets">CSS</abbr></p>类说明类说明.fst-italic斜体.fw-normal正常的文本.fst-normal正常的文本.lh-1行高为1.fw-lighter细体文本（相对于父元素）.lh-sm行高为1.25.fw-light细体文本.lh-base行高为1.5.fw-bold粗体正文.lh-lg行高为2.fw-bolder粗体正文（相对于父元素）
Bootstrap基础布局--基础排版5.
字体斜体、粗细与行高演示
使用这些实用程序可以快速更改文本的font-weight或font-style。font-style实用程序缩写为.fst-*，font-weight实用程序缩写为.fw-*。字体粗细和斜体类与说明如表4-3所示列表2
Bootstrap基础布局—列表有序列表和无序列表有序列表是指以数字或其他有序字符开头的列表。无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。演示
Bootstrap基础布局--列表如果不想给有序或无序列表显示这些着重号，可以使用
.list-unstyled
类来移除样式。还可以通过使用
.list-inline类把所有的列表项放在同一行中。内联列表演示
Bootstrap基础布局--列表定义列表
定义列表（definitionlist）是指带有描述的短语列表。定义列表多用于对术语或名词的描述，同时，定义列表项前面无任何项目符号。<dl>标签用于结合
<dt>
（定义列表中的项目）和
<dd>
（描述列表中的项目）。Bootstrap还可以使用.dl-horizontal类让
<dl>
内的短语及其描述排在一行。<h2>一个定义列表：</h2><dl><dt>中国画</dt><dd>汉族传统绘画形式是用毛笔蘸水、墨、彩作画于绢或纸上，这种画种被称为“中国画”，简称“国画”。</dd></dl><h2>一个水平定义列表：</h2><dlclass="dl-horizontal"><dt>中国书法</dt><dd>中国书法是一门古老的汉字的书写艺术，从甲骨文、石鼓文、金文（钟鼎文）演变而为大篆、小篆、隶书，至定型于东汉、魏、晋的草书、楷书、行书等，书法一直散发着艺术的魅力。</dd></dl>有序列表和无序列表的使用演示工具类3
背景色Bootstrap可以使用任意背景色设置元素的背景。这些样式也可以应用于链接，并会像默认链接样式一样在悬停时变暗。Bootstrap基础布局—背景色演示
显示（Display)Bootstrap基础布局使用响应display实用程序类更改display属性的值。Display应用能覆盖超小设备、平板、桌面显示器、大桌面显示器、特大桌面显示器、超大桌面显示器各个断点，定义如下。display实用程序类使用以下格式命名。.d-{value}
用于
xs；.d-{breakpoint}-{value}
用于
sm,
md,
lg,
xl,和
xxl。为了高效开发，使用响应显示类按设备显示和隐藏元素，根据每个屏幕大小相应地隐藏元素，相对应的类的作用与含义如表所示。类含义类含义.d-none所有屏幕上隐藏.d-block所有屏幕上显示.d-none.d-sm-block仅在超小屏幕上隐藏.d-block.d-sm-none仅在超小屏幕上显示.d-sm-none.d-md-block仅在小屏幕上隐藏.d-none.d-sm-block.d-md-none仅在小屏幕上显示.d-md-none.d-lg-block仅在平板上隐藏.d-none.d-md-block.d-lg-none仅在平板上显示.d-lg-none.d-xl-block仅在桌面显示器上隐藏.d-none.d-lg-block.d-xl-none仅在桌面显示器上显示.d-xl-none仅在特大桌面显示器上隐藏.d-none.d-xl-block.d-xxl-none仅在特大桌面显示器上显示.d-xxl-none仅在超大桌面显示器上隐藏.d-none.d-xxl-block仅在超大桌面显示器上显示
Bootstrap基础布局<divclass="container"> <pclass="d-md-noned-lg-blockbg-warning">故宫博物院</p> <pclass="d-noned-md-blockd-lg-nonebg-info">中国国家博物馆</p></div>display实用程序类的使用分辨率大于等于992像素的效果分辨率大于等于768像素小于992像素的效果分辨率小于768像素的效果演示
使用边框工具可以快速设置元素的边框和边框半径的样式。非常适合图像、按钮等元素。使用边框工具添加或删除元素的边框。从所有边框中选择或一次选择一个边框。Border工具类与含义如表4-5所示。边框Bootstrap基础布局—边框类含义类含义.border四周应用1像素浅灰色实线边框.border-primary蓝色边框.border-top顶部应用1像素浅灰色实线边框.border-secondary灰色边框.border-end右侧应用1像素浅灰色实线边框.border-success蓝色边框.border-bottom底部应用1像素浅灰色实线边框.border-danger红色边框.border-start左侧应用1像素浅灰色实线边框.border-warning橘黄色边框.border-0删除四周边框.border-info浅蓝色边框.border-top-0删除顶部边框.border-light亮灰色边框.border-end-0删除右侧边框.border-dark黑色边框.border-bottom-0删除底部边框.rounded边界圆角.border-start-0删除左侧边框.rounded-top顶部边界圆角.border-1边框宽度1像素.rounded-end右侧边界圆角.border-2边框宽度2像素.rounded-bottom底部边界圆角.border-3边框宽度3像素.rounded-start左侧边界圆角.border-4边框宽度4像素.rounded-circle椭圆形圆角.border-5边框宽度5像素.rounded-pill胶囊行圆角
边框Bootstrap基础布局—边框演示
Bootstrap的间距（Spacing）包括边距（margin）和填充（padding）程序类，用于修改元素的外观。对于xs，类的命名格式为
{property}{sides}-{size}；对于
sm,
md,
lg,
xl
和
xxl，类的命名格式为
{property}{sides}-{breakpoint}-{size}
。其中属性是以下之一。m代表对于设置margin的类p代表对于设置
padding的类其中边
是以下之一。t代表对于设置
margin-top
或
padding-top的类。b代表对于设置
margin-bottom
或
padding-bottom的类。s代表对于设置
margin-left
或
padding-left的类,
margin-right
或
padding-right的类。e代表对于设置
margin-right
或
padding-right的类,
margin-left
或
padding-left的类。x
代表对于设置
*-left
和
*-right的类。y代表对于设置
*-top
和
*-bottom的类。blank
-用于在元素的所有4个边上设置
margin
或
padding的类。其中
size是以下之一。值0对于通过将其设置为0来消除
margin
或
padding的类。值1在默认情况下，对于将
margin
或
padding
设置为
$spacer*.25的类值2在默认情况下，对于将
margin
或
padding
设置为
$spacer*.5的类值3在默认情况下，对于将
margin
或
padding
设置为
$spacer的类值4在默认情况下，对于将
margin
或
padding
设置为
$spacer*1.5的类值5在默认情况下，对于将
margin
或
padding
设置为
$spacer*3的类值auto表示对于将
margin
设置为
auto的类。间距Bootstrap基础布局—间距
间距Bootstrap基础布局—间距演示
应用display实用程序创建flexbox容器并将直接子元素转换为flex项。.d-flex
和
.d-inline-flex也存在响应式变化，其所对应类与含义如表所示。FlexBootstrap基础布局—Flex类含义类含义.d-flex定义flexbox容器，并将其子项转换为flex项.d-lg-flex屏幕宽度大于或者等于992像素时，定义为flexbox容器.d-inline-flex定义为行内flexbox容器.d-lg-inline-flex屏幕宽度大于或者等于992像素时，定义为行内flexbox容器.d-sm-flex屏幕宽度大于或者等于576像素时，定义为flexbox容器.d-xl-flex屏幕宽度大于或者等于1200像素时，定义为flexbox容器.d-sm-inline-flex屏幕宽度大于或者等于576像素时，定义为行内flexbox容器.d-xl-inline-flex屏幕宽度大于或者等于1200像素时，定义为行内flexbox容器.d-md-flex屏幕宽度大于或者等于768像素时，定义为flexbox容器.d-xxl-flex屏幕宽度大于或者等于1400像素时，定义为flexbox容器.d-md-inline-flex屏幕宽度大于或者等于768像素时，定义为行内flexbox容器.d-xxl-inline-flex屏幕宽度大于或者等于1400像素时，定义为行内flexbox容器1定义flexbox容器
使用方向实用程序设置flex容器中flex项的方向。.flex-row设置弹性子元素水平显示，这是默认值；.flex-row-reverse
类用于设置右对齐显示，即与
.flex-row
方向相反。.flex-column类用于设置弹性子元素垂直方向显示,.flex-column-reverse用于翻转子元素。此外，方向实用程序设置也存在响应式变化。FlexBootstrap基础布局—Flex2.设定方向在flexbox容器上使用justify-content实用程序可以更改弹性项在主轴上的对齐方式（开始时为主轴，如果是flex-direction:column，则为交叉轴）。从start（浏览器默认设置）、end、center、between、around或evenly中进行选择。同样justify-content也有响应式的变化，可以设置在不同断点上的对齐方式的变化。3.设定主轴上的对齐方式演示
使用flexbox容器上的
align-items
实用程序可以更改主轴（开始时为交叉轴，如果时flex-direction:column则为主轴）上的flex项目对齐方式。从
start、
end、
center、
baseline或
stretch
（默认）中选择。同样align-items
也有响应式的变化，可以设置在不同断点上的对齐项目对齐方式的变化。FlexBootstrap基础布局—Flex4.设定交叉轴上对齐方式使用flexbox项目上的
align-self
工具，可以单独更改它们在横轴上的对齐方式（开始时为交叉轴，如果是flex-direction:column，则为主轴）。从与
align-items相同的选项中选择：start、end、center、baseline
或stretch（默认）。5.
设定自身对齐方式对一系列同级元素使用.flex-fill类，将它们强制为与其内容相等的宽度（如果内容没有超出边框，则为相等宽度），同时占用所有可用的水平空间。6.
设定等宽填充演示
使用.flex-grow-*实用程序切换flex项的增长能力以填充可用空间。使用.flex-grow-1类元素使用了它所能使用的所有可用空间，同时允许其余两个flex项使用它们所需的空间。使用.flex-shrink-*实用程序在必要时切换flex项的收缩能力。使用.flex-shrink-1类的元素能根据实际情况进行“收缩”。flex-grow
和
flex-shrink也存在响应变化。FlexBootstrap基础布局—Flex7.扩大与收缩当将flex对齐和自动边距混合在一起时，三个通过自动边距控制flex项的示例：默认（无自动边距）、向右推动两个项（.me-auto）和向左推动两个项（.ms-auto）。8.自动边距弹性容器中包裹子元素可以使用以下三个类：.flex-nowrap（默认），.flex-wrap或.flex-wrap-reverse。设置flex容器是单行或者多行，flex-wrap也存在响应变化。9.包裹演示
Bootstrap使用.align-content-*控制在垂直方向上堆叠子元素，包含的有：.align-content-start，.align-content-end，.align-content-center，.align-content-between，.align-content-around和.align-content-stretch。这些类在只有一行的弹性子元素中是无效的。FlexBootstrap基础布局—Flex10.内容对齐使用一些order实用程序更改特定flex项的视觉顺序。由于order
采用0到5之间的任何整数值，因此需要为任何其他值添加自定义CSS。常用的次序类包括.order-first、.order-1、.order-2、.order-3、.order-4、.order-5、.order-last。响应式
.order-first
和
.order-last
类也存在响应变化。11.次序
浮动Bootstrap基础布局—浮动响应式浮动实用程序，可以在任何断点上的任何元素上切换浮动。这些实用程序类使用float属性根据当前视口大小将元素向左或向右浮动，或者禁用浮动。它们使用与网格系统相同的视口断点。请注意float实用程序对flex项目没有影响。浮动类包括.float-start、.float-end、.float-none三个类，每个
float
值也存在响应变化。<divclass="containerbg-light"> <divclass="float-startbg-info">故宫博物院</div><br> <divclass="float-endbg-warning">南京博物院</div><br> <divclass="float-nonebg-success">上海博物馆</div></div>演示
溢出Bootstrap基础布局—溢出元素溢出设置主要包括.overflow-auto、.overflow-hidden、.overflow-visible、.overflow-scroll这4个类。演示
定位Bootstrap基础布局—定位
使用定位（Position）可以快速配置元素的位置。快速定位类包括.position-static、.position-relative、.position-absolute、.position-fixed、.position-sti
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 《GBT 23635-2009限定性有害生物检测与鉴定规程的编写规定》专题研究报告深度
- 《GBT 15452-2009工业循环冷却水中钙、镁离子的测定 EDTA滴定法》专题研究报告深度
- 2026年税务师考试模拟试题及答案
- 《CBT 4113-2016船舶不锈钢管对焊接技术要求》专题研究报告
- 2026年泌尿科护士面试题及答案
- 2026年中煤科工重庆设计研究院(集团)有限公司招聘备考题库及参考答案详解一套
- 2026年翻译专员面试题库及参考翻译
- 2026年培训工程师面试题及答案
- 2026年电商运营岗位面试要点与考点详解
- 2026年品牌策划与推广岗位试题集
- 底料采购协议书
- (2025年)初级电工证考试试题附答案
- 星巴克门店运营管理标准流程手册
- 2025山西大地环境投资控股有限公司社会招聘116人参考笔试题库及答案解析
- 2025版32375电石生产安全技术规范
- 供热管网施工技术规范
- 提高约束带使用规范率
- 阿扎胞苷课件
- 沈阳市行道树栽植现状分析与发展对策
- 建筑工程智能防火系统设计与应用考核试卷
- 健康体检重要异常结果管理专家共识2025
评论
0/150
提交评论