BootStrap笔记-文字排版

如下代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CN_TEST1</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--    bootstrap css核心文件--><link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
<!--    bootstrap使用到了jquery，需要提前引用--><script src="js/jquery-3.5.1.min.js"></script>
<!--    弹窗、提示、下拉菜单--><script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
<!--    bootstrap核心文件--><script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script></head>
<body><div class="container-fluid" style="background: orangered"><h1>H1标题</h1><p>PPPPPPPPPPPPPPppppppppppppppp<mark>高亮</mark>ppp</p><h1 class="display-1">display-1<small>副标题</small></h1><h1 class="display-2">display-2<small>副标题</small></h1><h1 class="display-3">display-3<small>副标题</small></h1><h1 class="display-4">display-4<small>副标题</small></h1><p>ppppppppppppppppp<abbr title="Hello">虚线</abbr>ppppppppppppppppppppppp</p><br/><br/><blockquote class="blockquote"><p>pppppppppppppppppppppppppppppppppppppppppp</p></blockquote></div><br/><br/><div class="container-fluid"><h1>引用</h1><p>p数据</p><blockquote class="blockquote"><p>引用数据XXXXXXXXXXXXXXXXXXXXXXXXXX</p></blockquote></div><div class="container-fluid"><h1>Definition Lists</h1><p>定义列表</p><dl><dt>Item</dt><dd>没用的Item</dd><dt>Item</dt><dd>有用的Item</dd></dl></div><div class="container-fluid"><h1>代码片段</h1><p>如下</p><p>关键子<code>if</code>, <code>else</code></p></div><div class="container-fluid"><h1>用户输入</h1><p>按键<kbd>ctrl + p</kbd></p></div><div class="container-fluid"><h1>预定义格式文本</h1><pre>Hello World Hello World Hello World Hello World Hello WorldHello World Hello World Hello World Hello World Hello WorldHello World Hello World Hello World Hello World Hello WorldHello World Hello World Hello World Hello World Hello World</pre></div></body>
</html>

运行截图如下：

解释下：

①blockquote为一大块引用复述，可用于xxx说的话；

②dl为Definition Lists，定义列，他有2个小弟，一个是dt（Definition Term）一个是dd（Definition Description）；

③code为Code Fragemet，代码片段；

④kbd为User Input，也可以叫keyboard，按键相关的；

⑤pre为proformatted Text，格式化文本。

BootStrap笔记-文字排版相关推荐

Bootstrap笔记(八) 排版 - 程式碼
排版 - 程式碼 Bootstrap支援下列HTML元素用來排版程式碼範例1: 各元素的效果 <!DOCTYPE html> <html lang="en"&g ...
Bootstrap笔记(七) 排版 - 文字篇
排版 - 文字文字对齐大小写转换文字样式重设色彩去除文字装饰响应式字型大小文字对齐 Bootstrap提供了以下文字对齐类别範例: <!DOCTYPE html> < ...
Bootstrap笔记(五) 排版 - 标题
排版 - 标题主标题副标题加强标题主标题 Bootstrap支援 <h1> ~ <h6>等HTML标题元素,也提供 .h1 ~ .h6 类别用来设定标题1 ~ 标题6 ...
Bootstrap笔记(九) 排版 - 清單
排版 - 清單项目符号与编号清单定义清单项目符号与编号清单 Bootstrap支援以下HTML元素用来设定项目符号与编号清单 Bootstrap提供以下用来设定项目符号与编号清单範例: < ...
Bootstrap笔记(六) 排版 -段落与縮寫
段落与行内文字强调段落缩写强调段落若要强调网页上的某个段落,可以加上 .lead 类别. 範例: <!DOCTYPE html> <html lang="en&qu ...
amazeui学习笔记--css（基本样式3）--文字排版Typography
amazeui学习笔记--css(基本样式3)--文字排版Typography 一.总结 1.字体:amaze默认非衬线字体(sans-serif) 2.引用块blockquote和定义列表:引用块 ...
bootstrap世界探索1——山川河流（文字排版）
世界到底是什么?其实世界很简单,正所谓一花一世界,一树一菩提,世界就在我们身边.造物神是伟大的,在我看来无论是HTML,css,js都可以看作是一个世界,但是他们是构成宏观世界不可或缺的,正如IU框架 ...
Bootstrap4+MySQL前后端综合实训-Day02-AM【Bootstrap4(入门、环境搭建、文字排版、颜色、表格、图片、进度条、折叠、输入框组、模态框)、Font Awesome字体图标】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记] 目录 Typora语法 Day01-知识回顾 1.前端部分 flex布局 2.Bootstr ...
03Bootstrap5文字排版
03Bootstrap5文字排版 <!DOCTYPE html> <html lang="zh-CN"> <head><meta char ...

BootStrap笔记-文字排版

BootStrap笔记-文字排版相关推荐

最新文章

热门文章