Bootstrap 排版强调
想要强调某个段落的文本，可以为它加上 class="lead" 让它突出显示，这会使段落文本稍稍变大、变粗，行高也被显著放大。如：
<p class="lead">Vivamus sagittis lacus vel augue ….</p>
效果如图 3‑3所示：
图3-3 强调段落
HTML中的 <small> 标签用来标识不需要强调的文本，对于不需要强调的行内文本或块级文本，建议使用 <small> 标签。为文本添加这个标签后，文本会缩小到原来大小的 85%。如：
<p><small>This line of text is meant to be treated as fine print.</small></p>
效果如图 3‑4所示：
图3-4 强调内容
HTML中的 <strong> 标签用来标识从语义上强调的文本，它们一般会被加粗显示，即给相应文本应用 font-weight:bold;。如：
<p>The following snippet of text is <strong>rendered as bold text.</strong></p>
效果如图 3‑5所示：
图3-5 强调内容加粗显示
HTML中的 <em> 标签用来标识从语义上强调的文本，它们一般会被渲染为斜体，即给相应文本应用 font-style: italic;。如：
<p>The following snippet of text is <em>rendered as italicized text.</em></p>
效果如图 3‑6所示：
图3-6 强调内容斜体显示
说明：
有人可能要问，为什么不使用 <b> 或 <i>，而非要用 <strong> 和 <em> 呢？
在 HTML5 中，<b> 的语义是仅仅突出显示某些词或短语，但不代表它们更重要，比如一些关键词或人名。而 <i> 主要用于表示不同的语言、技术术语、内部对话等。
除了上述这些强调外，Bootstrap 还提供了一些表示强调的工具类，它们是给文本应用特殊的颜色来表示强调：
- muted：提示，浅灰色
- text-warning：警告，黄色
- text-error：错误，红色
- text-info：信息，浅蓝色
- text-success：成功，浅绿色
这些工具类可以应用于 <p> 或 <span> 元素。如：
<p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p><p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p><p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p><p class="text-info">Aenean eu leo quam. Pellentesque … venenatis.</p><p class="text-success">Duis mollis, est non commodo … porttitor ligula.</p>
效果如图 3‑7所示：
图3-7 强调工具类
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。
Bootstrap 排版强调相关推荐
- Bootstrap排版之标题
Bootstrap排版之标题 1.定义标题样式 2.运行效果 3.定义 4.运行效果,表面上看是差不多的,但其实你看这两个的源代码,第二种样式是没有定义margin-top和 marging-bott ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：移除默认的列表样式
<!DOCTYPE html> <html><head><title>菜鸟教程(runoob.com)</title> <meta n ...
- Bootstrap 排版
2019独角兽企业重金招聘Python工程师标准>>> Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设定文本对齐,段落中超出屏幕部分文字自动换行...
<!DOCTYPE html> <html><head><title>菜鸟教程(runoob.com)</title> <meta n ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版：设置浮动和偏移
<!DOCTYPE html> <html><head><title>菜鸟教程(runoob.com)</title> <meta n ...
- Bootstrap 排版正文
对正文排版,Bootstrap定义的默认字体栈为 "Helvetica Neue".Helvetica.Arial. sans-serif,它们也是主流操作系统默认支持的标准字体. ...
- Bootstrap 排版和链接
Bootstrap 为屏幕.排版和链接专门设置了以下全局样式: 移除了body的 margin,这样内容就会紧贴浏览器窗口的边缘: 设置了 body 的背景颜色 background-color: w ...
- Bootstrap ——排版、表格、表单、图片、button 学习博客（二）
Bootstrap中的排版 1. 排版 标题部分 文本部分 对齐 .text-left :文字左对齐 .text-center :文字居中对齐 .text-right :文字右对齐 .text-low ...
- 使用bootstrap排版
今天用bootstrap框架排出主页面和增加界面,我们这使用的是bootstrap5,以下是bootstrap5官网链接. 简介 · Bootstrap v5 中文文档 v5.1 | Bootstra ...
- bootstrap排版实战
bootstrap+angular实战 CASE-01:页面总体排版 说明:页面排版整体分为三个部分(见产品图):上导航条(红色区域).左导航条(紫色区域).内容区域(蓝色区域).左导航条的区域是由整 ...
最新文章
- R语言使用Rtsne包进行TSNE分析：提取TSNE分析结果合并到原dataframe中、可视化tsne降维的结果、并圈定降维后不匹配的数据簇（tSNE identifying mismatch)
- 康宁玻璃ct值计算公式_CT原理（一）
- SQLITE中原子提交的实现
- 利用kinect检测任意平面
- JavaScript~~自调用方法
- Linux常用命令大全(新手入门)
- LOJ dfs序1234
- 为什么回归问题用MSE？
- sqlserver 分组合并列_哪个“三人组”是历史最强组合？数据显示最均衡组合令人意外...
- anaconda prompt 此处不应有_麻辣酷评，两厢思域哪个版本买了不吃亏？
- 2015/8/26 Python基础(1)：基本规则及赋值
- 速修复！Netgear交换机曝3个严重的认证绕过漏洞
- 设计模式那点事读书笔记(2)----抽象工厂模式
- java连接zookeeper服务器出现“KeeperErrorCode = ConnectionLoss for ...”
- Foxmail中的文件夹丢失解决方法
- php压力比例混合器图片,教你认识各种泡沫比例混合器
- 【C++实训】基于MVC模型开发的高校教务管理系统【附完整报告+示例程序+日记+源码】
- 阿里云发布的数加是什么鬼
- HER608-ASEMI整流二极管R-6轴向插件封装
- GCD(i,j)求和