关键词搜索

源码搜索 ×
×

BootStrap笔记-文字排版

发布2022-01-17浏览607次

详情内容

如下代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CN_TEST1</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8. <!--    bootstrap css核心文件-->
  9.     <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
  10. <!--    bootstrap使用到了jquery，需要提前引用-->
  11.     <script src="js/jquery-3.5.1.min.js"></script>
  12. <!--    弹窗、提示、下拉菜单-->
  13.     <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
  14. <!--    bootstrap核心文件-->
  15.     <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
  16.  
  17. </head>
  18. <body>
  19.     <div class="container-fluid" style="background: orangered">
  20.  
  21.         <h1>H1标题</h1>
  22.         <p>PPPPPPPPPPPPPPppppppppppppppp<mark>高亮</mark>ppp</p>
  23.         <h1 class="display-1">display-1<small>副标题</small></h1>
  24.         <h1 class="display-2">display-2<small>副标题</small></h1>
  25.         <h1 class="display-3">display-3<small>副标题</small></h1>
  26.         <h1 class="display-4">display-4<small>副标题</small></h1>
  27.         <p>ppppppppppppppppp<abbr title="Hello">虚线</abbr>ppppppppppppppppppppppp</p>
  28.  
  29.         <br/>
  30.         <br/>
  31.  
  32.  
  33.         <blockquote class="blockquote">
  34.             <p>pppppppppppppppppppppppppppppppppppppppppp</p>
  35.         </blockquote>
  36.     </div>
  37.     <br/>
  38.     <br/>
  39.  
  40.     <div class="container-fluid">
  41.         <h1>引用</h1>
  42.         <p>p数据</p>
  43.         <blockquote class="blockquote">
  44.             <p>引用数据XXXXXXXXXXXXXXXXXXXXXXXXXX</p>
  45.         </blockquote>
  46.     </div>
  47.  
  48.     <div class="container-fluid">
  49.         <h1>Definition Lists</h1>
  50.         <p>定义列表</p>
  51.         <dl>
  52.             <dt>Item</dt>
  53.             <dd>没用的Item</dd>
  54.             <dt>Item</dt>
  55.             <dd>有用的Item</dd>
  56.         </dl>
  57.     </div>
  58.  
  59.     <div class="container-fluid">
  60.         <h1>代码片段</h1>
  61.         <p>如下</p>
  62.         <p>关键子<code>if</code>, <code>else</code></p>
  63.     </div>
  64.  
  65.     <div class="container-fluid">
  66.         <h1>用户输入</h1>
  67.         <p>按键<kbd>ctrl + p</kbd></p>
  68.     </div>
  69.  
  70.     <div class="container-fluid">
  71.         <h1>预定义格式文本</h1>
  72.         <pre>
  73.             Hello World Hello World Hello World Hello World Hello World
  74.             Hello World Hello World Hello World Hello World Hello World
  75.             Hello World Hello World Hello World Hello World Hello World
  76.             Hello World Hello World Hello World Hello World Hello World
  77.         </pre>
  78.     </div>
  79.  
  80. </body>
  81. </html>

运行截图如下：

解释下：

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

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

③code为Code Fragemet，代码片段；

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

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

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载