Bootstrap基础教程（第3版）（微课版）课件 第三章 CSS布局_第1页
Bootstrap基础教程（第3版）（微课版）课件 第三章 CSS布局_第2页
Bootstrap基础教程（第3版）（微课版）课件 第三章 CSS布局_第3页
Bootstrap基础教程（第3版）（微课版）课件 第三章 CSS布局_第4页
Bootstrap基础教程（第3版）（微课版）课件 第三章 CSS布局_第5页
已阅读5页，还剩82页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第3章CSS布局Bootstrap基础教程（第3版）（微课版）赵丙秀目录CONTENTS678910按钮表格图像图文框案例12345排版颜色类文本类列表超链接课程导入排版主要是使用CSS对HTML元素进行样式设置及布局定位，排版在前端开发中的重要性不言而喻。Bootstrap提供了一套CSS样式，可以方便快速地帮助我们渲染修饰HTML元素，让页面排版变得更简单。1排版排版排版在Bootstrap5中，元素使用rem尺寸单位。它根据节点<html>的字体大小进行计算。通常浏览器默认为16px。1rem为16px，2rem为32px。我们也可以通过变量$font-size-root来修改浏览器默认值。标题1．<h1>-<h6>标签Bootstrap5重新定义了<h1>到<h6>标题标签的样式标题1．<h1>-<h6>标签当设备宽度>=1200px时，标题字号为固定值，<1200px时，标题字号与视口宽度有关。标题1．<h1>-<h6>标签标题2.类.h1-.h6.h1到.h6六个样式类，使用它们可以给内联属性的文本赋予不同级别标题的样式。标题3.副标题当一个标题内含有副标题时，可以在该标题内嵌套添加<small>元素或者给小标题元素应用样式类.small，这样可以得到一个字号更小的文本，即副标题。通常，在与.text-body-secondary类一起使用时，将副标题的颜色变浅。标题4.Display标题

.display1~.display6可以得到更大的font-size样式。字号的大小与视口宽度相关，当视口宽度大于或等于1200px时，字号大小分别为：5rem、4.5rem、4rem、3.5rem、3rem、2.5rem。段落Bootstrap将页面的全局字体大小font-size设置为16px，行高line-height设置为1.5。<body>元素及段落<p>元素都被赋予了这些属性。另外，<p>元素还margin-top：0，margin-bottom：1rem（16px）基本段落在多个段落中，为了突出显示某一个段落作为强调的中心内容或引导主体内容，可以给该段落应用样式类.lead。这样可以得到更大更粗、行高更高的段落文本，但是有些浏览器不支持这一类。中心内容段落实例展示文本内联标签

Bootstrap对常用的Html5内联标签的样式进行了重新定义，对文本进行强化以突显重要内容，从而实现风格统一、布局美观的效果。标签描述标签描述<b><strong>文本加粗<mark>高亮文本<del><s>删除线<em><i>斜体<ins><u>下划线<small>小号文本，父元素字体的87.5%文本内联标签实例展示水平线hr和垂直线vr

<hr>元素已被简化。与浏览器默认设置类似，＜hr＞通过边框顶部设置样式，具有默认的透明度：0.25，并通过颜色自动继承其边框颜色，包括通过父项设置颜色时。它们可以使用文本、边框和透明度工具类进行修改。水平线水平线hr和垂直线vrhr实例展示水平线hr和垂直线vr

Bootstrap5中专门定义垂直线工具类.vr，以下代码为.vr的样式定义。同样可以使用文本、边框、透明度等工具类进行定制水平线。垂直线

.vr{display:inline-block;align-self:stretch;width:var(--bs-border-width);min-height:1em;background-color:currentcolor;opacity:0.25;}水平线hr和垂直线vrvr实例展示代码01<code>：包裹内联样式的代码片段。02<kbd>：标记用户通过键盘输入的内容。03<pre>：显示多行代码，需要注意将尖括号做转义处理。04<var>：标记变量。05<samp>：标记程序输出的内容。代码实例展示缩略语<abbr>标签用于缩略语，<abbr>元素的样式为带有较浅的虚线下边框，当鼠标悬停在上面时会变成带有“问号”的指针，同时会显示出完整的文本（必须为<abbr>的title属性添加了文本）。在abbr上使用.initialism，可以让字号略小一点，如有英文字母会变为大写。地址使用<address>标签可以在网页上显示联系信息。Bootstrap重置了＜address＞的样式，以将浏览器默认字体样式从斜体重置为普通。行高继承，并添加了margin-bottom:1rem。在该元素内，每行信息的结尾使用<br>来保留样式。引用将任何HTML元素包裹在<blockquoteclass="blockquote">中即可表现为引用样式。默认样式的引用引用当需要提供引用来源时，将<blockquote>放在<figure>中，并使用<figcaptionclass="blockquote-footer">标签放置来源信息。这里figcaption元素可以换为任意块级元素。另外，请确保将来源作品的名称放在＜cite＞元素中获得斜体样式。引用中添加其他选项引用引用默认左对齐，在<figure>上应用text-end或text-center，可以将应用右对齐或居中。引用中添加其他选项2颜色类颜色类文本颜色该颜色值在手风琴、列表组等组件中往往为活动状态时的背景色。不推荐颜色类文本透明度颜色类背景颜色颜色类背景透明度颜色类浅色背景颜色类渐变背景颜色类文本背景颜色3文本类文本类Bootstrap提供了.text-start、.text-end、.text-center、.text-X-*(其中X为屏幕宽度前缀sm、md、lg、xl、xxl，*为start、end、center)。文本排列文本类文本转换文本类字号文本类字重、样式文本类实例展示文本类行高文本类行高实例展示其他类类名描述类名描述.text-monospace等宽字体.text-truncate内容裁剪.text-nowrap不换行.text-break单词换行.text-wrap换行.text-decoration-{none|underline|line-through}无下划线、下划线、过文本的线其他类行高实例展示4列表列表列表标记的使用与html5的是一样的。bootstrap5同样的对列表的样式进行了重置。ol、ul设置了左边内边距2rem，去掉顶部外边距，添加底部外边距1rem。嵌套的时候，嵌套列表的底部外边距为0。类的定义.list-unstyle:可以移除默认的list-style样式。.list-inline:实现内联列表。list-inline应用在ul或ol上，.list-inline-item应用在li上。列表行高实例展示列表行高实例展示列表行高实例展示列表行高描述列表<dl>

<dt>厨余垃圾</dt>

<dd>含有极高的水分与有机物，很容易腐坏，产生恶臭。经过妥......</dd><dt>有害垃圾</dt><dd>对人体健康或者自然环境造成直接或者潜在危害生活的废弃物......</dd>

......</dl>列表使用栅格系统水平排列，使用.text-truncate来截断文字。行高描述列表-水平排列5超链接链接类名描述.link-color链接颜色，color的取值为8种主题色加一个body强调色。与文本颜色.text-*不同，这些类具有:hover、:focus状态.link-underline-color下划线颜色，color的取值为8个主题色.link-opacity-value链接颜色的透明度。value取值：10、25、50、75、100，值越小越透明.link-opacity-value-hover悬停时链接的透明度.link-offset-value设置下划线与文本的距离，value的取值：1、2、3.link-offset-value-hover悬停时下划线与文本的距离.link-underline-opacity-value下划线的颜色透明度，value的取值：0、10、25、50、75、100.link-underline-opacity-value-hover悬停时下划线的透明度链接行高实例展示6按钮按钮预定义按钮Bootstrap为按钮提供了一个基本样式类.btn，所有按钮元素都使用它。此外，还提供了一些预定义样式类.btn-{color}，可以用来定义不同风格的按钮，其中color的取值：primary、secondary、success、danger、warning、info、light、dark、link。按钮按钮边框如果需要一个按钮，但不需要很深的背景颜色，则可以使用.btn-outline-*类来代替btn-*，其中*的取值为：primary、secondary、success、danger、warning、info、light、dark。btn-outline-*类中定义了按钮的边框、浅色背景、按钮文字的颜色、鼠标滑过的效果、获得焦点的效果等。按钮按钮标签

btn和.btn-*除了可以应用在<button>元素上外，还可以用在

<a>、

<input>

元素上，同样可以得到对应的按钮效果。按钮按钮状态、尺寸按钮状态.active激活状态.disabled禁用状态按钮尺寸.btn-lg大号按钮.btn-sm小号按钮按钮块级按钮在Bootstsrap4中，有一个类btn-block，可以将按钮拉伸至其父元素宽度的100%，称为块级按钮。Bootstsrap5中没有这个类了。块级按钮的实现借助display、gap工具类来实现。他比之前更加灵活。按钮块级按钮7表格类名描述.table基类，这是表格的基本样式.table-striped数据表的行条纹状显示.table-striped-columns数据表的列条纹状显示.table-bordered表格边框、可以配合边框工具改变颜色.table-borderless表格无边框.table-hover悬停效果.table-sm紧缩型表格表格表格样式表格表格样式表格类名描述.table-primary蓝色:指定这是一个重要的操作.table-success绿色:指定这是一个允许执行的操作.table-danger红色:指定这是可以危险的操作.table-info浅蓝色:表示内容已变更.table-warning橘色:表示需要注意的操作.table-secondary灰色:表示内容不怎么重要.table-light浅灰色，可以是表格行的背景.table-dark深灰色，可以是表格行的背景主题颜色类可以用在table的各级元素上，如table、tr、td、thead、tbody、tfooter用来改变其背景颜色。应用了主题色后，前面的条纹色、悬停时的颜色、都会相应的跟着主题色进行变化。表格颜色类表格响应式表格类名描述.table-responsive溢出时出现底部滚动条.table-responsive-**取值sm、md、lg、xl、xxl，当小于对应宽度时，溢出会出现底部滚动条表格类名描述.table-group-divider表格分组直接的分割线.caption-top将表格标题移到表格上面.table-active高亮色:用于鼠标悬停效果，不同的主题的表格高亮不一样其他类表格个性化表格在<link>语句的后面添加<style>样式重置了.table-striped、.table-hover、.table-group-divider类的定义。8图像图像通过给图片<img>元素应用样式类.img-fluid或者定义max-width:100%、height：auto样式，可以让图片支持响应式布局。从而让图片在随着其父元素大小同步缩放。<imgsrc="img/pic.jpg"class="img-fluid"alt="响应式图像"/>响应式图像通过给图像<img>元素应用.img-thumnail样式类，来使图片自动被加上一个带圆角且1px边界的外框缩略图样式。使用边框工具中的.rounded-*类，来设置图片的边框样式。图像图像边框对于.block属性的块状图片，我们也可以使用浮动或文字对齐，来实现对图像的对齐、浮动控制，可以使用

.mx-auto

的进行居中。图像图像对齐

<picture>

元素，它可以为

<img>指定多个<source>

。利用<picture>元素可实现<img>在不同屏幕下显示不同的图片。图片样式

.img-*

类需添加到

<img>

元素而不是

<picture>

元素上。图像picture元素图文框如果我们需要显示的内容区包括了一个图片和一个可选的标题，可使用.figure、.figure-*相关的样式。将.figure类、.figure-caption类、.figure-img类分别应用在<figure>、<figcaption>、<img>元素上，可以得到一个图文组件。注意需要对img使用.img-fluid。10少儿编程页面课程导入少儿编程页面类似巨幕效果按钮图片标题代码相关的标签使用了图标、列表、引用、按钮、大小写转换等元素和相关类使用了表格、块级按钮页脚部分，使用了图片、内联列表、地址具体实现

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论