03Bootstrap5文字排版
2024-04-17 01:56:48
03Bootstrap5文字排版
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>菜鸟教程Bootstrap5文字排版</title><link rel="stylesheet" href="../css/bootstrap.min.css">
</head>
<body>
<!--
Bootstrap 5 默认设置
Bootstrap 5 默认的 font-size 为 16px, line-height 为 1.5。
默认的 font-family 为 "Helvetica Neue", Helvetica, Arial, sans-serif。
此外，所有的 <p> 元素 margin-top: 0 、 margin-bottom: 1rem (16px)。
-->
<!--Bootstrap 中定义了所有的 HTML 标题（h1 到 h6）的样式-->
<div class="container mt-3"><p>字体大小会随着屏幕的变化而变化，可以重置浏览器大小查看效果。</p><h1>h1 Bootstrap 标题</h1><h2>h2 Bootstrap 标题</h2><h3>h3 Bootstrap 标题</h3><h4>h4 Bootstrap 标题</h4><h5>h5 Bootstrap 标题</h5><h6>h6 Bootstrap 标题</h6>
</div><!--通过.h1到.h6类设置元素样式-->
<div class="container mt-3"><p>字体大小会随着屏幕的变化而变化，可以重置浏览器大小查看效果。</p><p class="h1">h1 Bootstrap 标题</p><p class="h2">h2 Bootstrap 标题</p><p class="h3">h3 Bootstrap 标题</p><p class="h4">h4 Bootstrap 标题 </p><p class="h5">h5 Bootstrap 标题</p><p class="h6">h6 Bootstrap 标题</p>
</div><!--
Display 标题类
Bootstrap 还提供了四个 Display 类来控制标题的样式:
.display-1, .display-2, .display-3, .display-4。
Display 标题可以输出更大更粗的字体样式。
-->
<div class="container mt-3"><h1>Display 标题</h1><p>Display 标题可以输出更大更粗的字体样式。</p><h1 class="display-1">Display 1</h1><h1 class="display-2">Display 2</h1><h1 class="display-3">Display 3</h1><h1 class="display-4">Display 4</h1><h1 class="display-5">Display 5</h1><h1 class="display-6">Display 6</h1>
</div><!--
<small>
在 Bootstrap 5 中 HTML <small> 元素用于创建字号更小的颜色更浅的文本:
-->
<div class="container"><h1>更小文本标题</h1><p>small 元素用于字号更小的颜色更浅的文本:</p><h1>h1 标题 <small>副标题</small></h1><h2>h2 标题 <small>副标题</small></h2><h3>h3 标题 <small>副标题</small></h3><h4>h4 标题 <small>副标题</small></h4><h5>h5 标题 <small>副标题</small></h5><h6>h6 标题 <small>副标题</small></h6>
</div><!--
<mark>
Bootstrap 5 定义 <mark> 标签及 .marked 类为黄色背景及有一定的内边距:
-->
<div class="container"><h1>高亮文本</h1><p>使用 mark 元素来<mark>高亮</mark>文本。</p>
</div><!--
<abbr>
Bootstrap 5 定义 HTML <abbr> 元素的样式为显示在文本底部的一条虚线边框:
-->
<div class="container"><h1>Abbreviations</h1><p><abbr>元素的样式为显示在文本底部的一条虚线边框:</p><p>The <abbr title="abbr设置了文本底部的虚线">WHO</abbr> was founded in 1948.</p>
</div><!--
<blockquote>
对于引用的内容可以在 <blockquote> 上添加 .blockquote 类 :
-->
<div class="container"><h1>Blockquotes</h1><p>blockquote用于包裹一个引用的内容</p><blockquote class="blockquote"><p>春江潮水连海平，海上明月共潮生。<br>滟滟随波千万里，何处春江无月明！<br>江流宛转绕芳甸，月照花林皆似霰；<br>空里流霜不觉飞，汀上白沙看不见。<br>江天一色无纤尘，皎皎空中孤月轮。<br>江畔何人初见月？江月何年初照人？<br>人生代代无穷已，江月年年望相似。<br>不知江月待何人，但见长江送流水。<br>白云一片去悠悠，青枫浦上不胜愁。<br>谁家今夜扁舟子？何处相思明月楼？<br>可怜楼上月裴回，应照离人妆镜台。<br>玉户帘中卷不去，捣衣砧上拂还来。<br>此时相望不相闻，愿逐月华流照君。<br>鸿雁长飞光不度，鱼龙潜跃水成文。<br>昨夜闲潭梦落花，可怜春半不还家。<br>江水流春去欲尽，江潭落月复西斜。<br>斜月沉沉藏海雾，碣石潇湘无限路。<br>不知乘月几人归，落月摇情满江树。<br></p><footer class="blockquote-footer">张若虚</footer></blockquote>
</div><!--
<dl>
Bootstrap 5 定义 HTML <dl> 元素的样式如下:
-->
<div class="container"><h1>描述列表</h1><p>dl 元素表示一个描述列表：</p><dl><dt>李白</dt><dd>中国诗人</dd><dt>你好</dt><dd>一句问候语</dd></dl>
</div>
<!--
html中:
<em>强调文本</em><br>
<strong>加粗文本</strong><br>
<dfn>定义项目</dfn><br>
<code>一段电脑代码 print("Hello World")</code><br>
<samp>计算机样本</samp><br>
<kbd>键盘输入</kbd><br>
<var>变量</var><code>
Bootstrap 5 定义 HTML <code> 元素的样式,颜色为红色
如下:
-->
<div class="container"><h1>代码片段</h1><p>可以将一些代码元素放到 code 元素里面:</p><p>以下 HTML 元素:<code>span</code>,<code>section</code>, 和<code>div</code>用于定义部分文档内容。</p>
</div><!--
<kbd>
Bootstrap 5 定义 HTML <kbd> 元素的样式如下:
-->
<div class="container"><h1>Keyboard Inputs</h1><p>要指示通常通过键盘打印，请使用kbd元素:</p><p>使用 <kbd>ctrl + p</kbd> 打开 “打印” 对话框。</p>
</div><!--
-----------------更多排版类文本标签------------
.lead 让段落更突出
.small 指定更小文本 (为父元素的 85% )
.text-left 左对齐
.text-center 居中
.text-right 右对齐
.text-justify 设定文本对齐,段落中超出屏幕部分文字自动换行
.text-nowrap 段落中超出屏幕部分不换行
.text-lowercase 设定文本小写
.text-uppercase 设定文本大写
.text-capitalize 设定单词首字母大写
.initialism 显示在 <abbr> 元素中的文本以小号字体展示，且可以将小写字母转换为大写字母
.list-unstyled 移除默认的列表样式，列表项中左对齐 ( <ul> 和 <ol> 中)。 这个类仅适用于直接子列表项 (如果需要移除嵌套的列表项，你需要在嵌套的列表中使用该样式)
.list-inline 将所有列表项放置同一行
-->
</body>
</html>
03Bootstrap5文字排版相关推荐
- dev c++自动排版_再也不头疼文字排版了
前言 在办公时,我们经常会需要用到Word,经常需要到网上查找一些资料然后整理排版,如果想提高文字排版.整理的效率.那么小编给你推荐Gidot Typesetter 这款非常好用的排版软件. Word ...
- (转)iOS7界面设计规范(10) - UI基础 - 文字排版与配色
明天就是周四了.貌似前几天还在恨周一呢.话说今天几乎开了一整天的会,正经事情没做多少:这种感觉比一整天从早到晚12个小时的忙碌于一件事情还要让人感到疲惫的对叭?那今天的iOS7设计规范更新又是一篇很简 ...
- css网页布局中文字排版的属性和用法
前段时间,学习了几个大的网站的图文混排的方法.今天总结下, css网页布局中文字排版的相关属性以及用法 .包括:设定字体.颜色.大小.段落空白,首字下沉.首行缩进.中文字的截断.固定宽度词内折行(wo ...
- Bootstrap4+MySQL前后端综合实训-Day02-AM【Bootstrap4(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程 博客汇总表 详细笔记] 目 录 Typora语法 Day01-知识回顾 1.前端部分 flex布局 2.Bootstr ...
- iOS UIlabel文字排版（改变字间距行间距）分类
在iOS开发中经常会用到UIlabel来展示一些文字性的内容,但是默认的文字排版会觉得有些挤,为了更美观也更易于阅读我们可以通过某些方法将UIlabel的行间距和字间距按照需要调节. 比如一个Labe ...
- amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非 衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
- html:(33):文字排版粗体和斜体
文字排版--粗体 我们还可以使用css样式来改变文字的样式:粗体.斜体.下划线.删除线,可以使用下面代码实现设置文字以粗体样式显示出来. p span{font-weight:bold;} 在这里大家 ...
- 竖向图片插入_Word小技巧：让你的图片文字排版更有创意
想在头条中发表文章或者写论文,插入的图片太单调?今天小编就简单跟大家分享几个小技巧,图片搭配文字让你的版面更有可读性. 第一种:最简单的横向文字排版 具体做法:在word中插入图片后,插入一个文本框后 ...
- 文字 竖排居中_学会了这几招，瞬间就搞定PPT文字排版问题！
hello,大家好啊,我是summer! 毫不夸张的说PPT中用的最多的元素就是文字! 基本每一页PPT都会有文字存在. 但是文字排版要是没搞好,就很有可能成为下面这个鬼样子: 那么今天,我就来给大 ...
最新文章
- nginx limit_rate突然限速失败
- PHP 面向对象：类的属性
- 泛型通用函数的一些特殊问题的解决方法
- [原创]android使用代码生成LayerDrawable的方法和注意事项
- 程序员谈谈我的职场观（二）
- 【c++】构造函数初始化列表中成员初始化的次序性
- NOX的使用之学习篇【三】
- Spring帖子汇总
- ubuntu安装uvlayout
- android显示新界面,Android 12首个预览版发布 新界面新功能来袭
- 聊聊我在腾讯和字节工作感受
- python实现图形旋转_图像随机旋转及坐标进行旋转原理及Python实现
- CKA 认证考试必过技巧分享
- 编程题：用for循环嵌套，输出下列图形：
- 天基实业怎样投资理财收益稳定
- 伪元素写竖线_[CSS] 用伪元素:after实现分割线和气泡
- 2017年计算机二级考试的word的答案,2017年3月全国计算机考试等级考试二级《MS Office高级应用》真题及答案...
- 记录重新安装微软商店过程
- 图解 Vue3.0 编译器核心原理（Vue3.0源码解析）
- 误删了计算机桌面回收站,如何解决电脑回收站被误删故障 电脑回收站被误删的两种解决方法...