BootStrap笔记-文字排版
生活随笔
收集整理的這篇文章主要介紹了
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笔记-文字排版的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： uni怎么使用原生html标签,uni-
- 下一篇： css隐藏输入框的光标