《Web前端框架应用bootstrap》课件-项目三 基础样式_第1页
《Web前端框架应用bootstrap》课件-项目三 基础样式_第2页
《Web前端框架应用bootstrap》课件-项目三 基础样式_第3页
《Web前端框架应用bootstrap》课件-项目三 基础样式_第4页
《Web前端框架应用bootstrap》课件-项目三 基础样式_第5页
已阅读5页，还剩114页未读， 继续免费阅读

下载本文档

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

文档简介

任务1：基础样式简介、标题项目三基础样式主讲人：CONTENTS010203概述标题段落04文本内联标签课程导入排版主要是使用CSS对HTML元素进行样式设置及布局定位，排版在前端开发中的重要性不言而喻。Bootstrap提供了一套CSS样式，可以方便快速地帮助我们渲染修饰HTML元素，让页面排版变得更简单。概述/01概述概述在Bootstrap5中，元素使用rem尺寸单位。它根据节点<html>的字体大小进行计算。通常浏览器默认为16px。1rem为16px，2rem为32px。我们也可以通过变量$font-size-root来修改浏览器默认值。标题/02标题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。段落/03段落Bootstrap将页面的全局字体大小font-size设置为16px，行高line-height设置为1.5。<body>元素及段落<p>元素都被赋予了这些属性。另外，<p>元素还margin-top：0，margin-bottom：1rem（16px）基本段落在多个段落中，为了突出显示某一个段落作为强调的中心内容或引导主体内容，可以给该段落应用样式类.lead。这样可以得到更大更粗、行高更高的段落文本，但是有些浏览器不支持这一类。中心内容文本内联标签/04文本内联标签

Bootstrap对常用的Html5内联标签的样式进行了重新定义，对文本进行强化以突显重要内容，从而实现风格统一、布局美观的效果。标签描述标签描述<b><strong>文本加粗<mark>高亮文本<del><s>删除线<em><i>斜体<ins><u>下划线<small>小号文本，父元素字体的87.5%任务2：基础标签：hr、内联文本标签、缩略语、地址项目三基础样式主讲人：CONTENTS010203水平线hrcode缩略语04地址05引用水平线hr/01水平线hr

<hr>元素已被简化。与浏览器默认设置类似，＜hr＞通过边框顶部设置样式，具有默认的透明度：0.25，并通过颜色自动继承其边框颜色，包括通过父项设置颜色时。它们可以使用文本、边框和透明度工具类进行修改。水平线hrcode/02code01<code>：包裹内联样式的代码片段。02<kbd>：标记用户通过键盘输入的内容。03<pre>：显示多行代码，需要注意将尖括号做转义处理。04<var>：标记变量。05<samp>：标记程序输出的内容。code缩略语/03缩略语<abbr>标签用于缩略语，<abbr>元素的样式为带有较浅的虚线下边框，当鼠标悬停在上面时会变成带有“问号”的指针，同时会显示出完整的文本（必须为<abbr>的title属性添加了文本）。在abbr上使用.initialism，可以让字号略小一点，如有英文字母会变为大写。地址/04地址使用<address>标签可以在网页上显示联系信息。Bootstrap重置了＜address＞的样式，以将浏览器默认字体样式从斜体重置为普通。行高继承，并添加了margin-bottom:1rem。在该元素内，每行信息的结尾使用<br>来保留样式。引用/05引用将任何HTML元素包裹在<blockquoteclass="blockquote">中即可表现为引用样式。引用当需要提供引用来源时，将<blockquote>放在<figure>中，并使用<figcaptionclass="blockquote-footer">标签放置来源信息。这里figcaption元素可以换为任意块级元素。另外，请确保将来源作品的名称放在＜cite＞元素中获得斜体样式。引用引用默认左对齐，在<figure>上应用text-end或text-center，可以将应用右对齐或居中。居中右对齐任务3：

文本、背景颜色项目三基础样式主讲人：CONTENTS0102文本颜色背景颜色03透明度文本颜色/01文本颜色文本颜色文本颜色该颜色值在手风琴、列表组等组件中往往为活动状态时的背景色。文本颜色文本颜色不推荐文本颜色文本颜色透明度背景颜色/02背景颜色背景颜色背景颜色背景颜色渐变背景背景颜色文本背景颜色透明度/03透明度任务4：

文本类项目三基础样式主讲人：CONTENTS0102文本排列字号、字重、样式、行高03文本修饰、文本转换04其他类文本排列/01文本排列Bootstrap提供了.text-start、.text-end、.text-center、.text-X-*(其中X为屏幕宽度前缀sm、md、lg、xl、xxl，*为start、end、center)。字号、字重、样式、行高/02字号、字重、样式、行高字号字号、字重、样式、行高字重、样式字号、字重、样式、行高行高字号、字重、样式、行高行高字号、字重、样式、行高行高文本修饰、

文本转换/03文本修饰、文本转换文本修饰文本修饰、文本转换文本转换其他类/04其他类类名描述类名描述.text-monospace等宽字体.text-truncate内容裁剪.text-nowrap不换行.text-break单词换行.text-wrap换行其他类任务5：

列表、按钮项目三基础样式主讲人：CONTENTS0102列表链接03按钮列表/01列表列表标记的使用与html5的是一样的。bootstrap5同样的对列表的样式进行了重置。ol、ul设置了左边内边距2rem，去掉顶部外边距，添加底部外边距1rem。嵌套的时候，嵌套列表的底部外边距为0。类的定义.list-unstyle:可以移除默认的list-style样式。.list-inline:实现内联列表。list-inline应用在ul或ol上，.list-inline-item应用在li上。列表使用栅格系统水平排列，使用.text-truncate来截断文字。链接/02链接类名描述.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悬停时下划线的透明度按钮/03按钮预定义按钮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工具类来实现。他比之前更加灵活。按钮块级按钮课程小结

列表链接按钮任务6：

表格项目三基础样式主讲人：CONTENTS0102表格样式类表格主题颜色类03其他类表格样式类/01表格样式类类名描述.table基类，这是表格的基本样式.table-striped数据表的行条纹状显示.table-striped-columns数据表的列条纹状显示.table-bordered表格边框、可以配合边框工具改变颜色.table-borderless表格无边框.table-hover悬停效果.table-sm紧缩型表格表格主题颜色类/02表格主题颜色类类名描述.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，当小于对应宽度时，溢出会出现底部滚动条其他类/03其他类类名描述.table-group-divider表格分组直接的分割线.caption-top将表格标题移到表格上面.table-active高亮色:用于鼠标悬停效果，不同的主题的表格高亮不一样其他类水平对齐垂直对齐text-startalign-toptext-centeralign-middletext-endalign-bottomalign-baselinealign-text-topalign-text-bottom课程小结使用bootstrap框架可以快速制作出比较美观的表格。任务7：

图像、图文框项目三基础样式主讲人：CONTENTS0102图片样式类图像对齐0304picture元素图文框图片样式类/01图片样式类通过给图片<img>元素应用样式类.img-fluid或者定义max-width:100%、height：auto样式，可以让图片支持响应式布局。从而让图片在随着其父元素大小同步缩放。<imgsrc="img/pic.jpg"class="img-fluid"alt="响应式图像"/>图片样式类通过给图像<img>元素应用.img-thumnail样式类，来使图片自动被加上一个带圆角且1px边界的外框缩略图样式。使用边框工具中的.rounded-*类，来设置图片的边框样式。图像对齐/02图像对齐对于.block属性的块状图片，我们也可以使用浮动或文字对齐，来实现对图像的对齐、浮动控制，可以使用

.mx-auto

的进行居中。picture元素/03picture元素

<picture>

元素，它可以为

<img>指定多个<source>

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

.img-*

类需添加到

<img>

元素而不是

<picture>

元素上。图文框/04图文框如果我们需要显示的内容区包括了一个图片和一个可选的标题，可使用.figure、.figure-*相关的样式。将.figure类、.figure-caption类、.figure-img类分别应用在<figure>、<figcaption>、<img>元素上，可以得到一个图文组件。注意需要对img使用.img-fluid。课程小结

图片样式类

picture元素

图像对齐

图文框案例：少儿编程项目三基础样式主讲人：余璐CONTENTS0102少儿编程页面具体实现课程导入排版文本列表按钮表格课程导入少儿编程页面/01少儿编程页面类似巨幕效果按钮图片标题代码相关的标签使用了图标、列表、引用、按钮、大小写转换等元素和相关类使用了表格、块级按钮页脚部分，使用了图片、内联列表、地址具体实现/02具体实现

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

温馨提示

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

最新文档

评论

0/150

提交评论