Bootstrap笔记(八) 排版

排版 - 程式碼

Bootstrap支援下列HTML元素用來排版程式碼

範例1: 各元素的效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap CDN --><!-- CSS only --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"><!-- JavaScript Bundle with Popper --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script><title>特殊文字排版</title>
</head>
<body><div class="container"><p>超小螢幕裝置使用<code>.col-1 ~ .col-12</code>類別</p><p>按<kbd>F2</kbd>可以將檔案重新命名</p><p><var>y</var> =a<var>x</avar>+b</p><p><samp>This text is sample output from a computer program.</samp></p></div>
</body>
</html>

範例2: pre表示程式碼效果

由於瀏覽器會忽略HTML元素之間的空白字元和換行，導致在輸入某些內容時很不方便(ex. 程式碼)，此時可以使用<pre>預先將內容格式化。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap CDN --><!-- CSS only --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous"><!-- JavaScript Bundle with Popper --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script><title>程式碼排版</title>
</head>
<body><div class="container"><pre>def Welcome():print("Hello World!")Welcome()</pre></div>
</body>
</html>

Bootstrap笔记(八) 排版 - 程式碼相关推荐

Bootstrap笔记(七) 排版 - 文字篇
排版 - 文字文字对齐大小写转换文字样式重设色彩去除文字装饰响应式字型大小文字对齐 Bootstrap提供了以下文字对齐类别範例: <!DOCTYPE html> < ...
Bootstrap笔记(五) 排版 - 标题
排版 - 标题主标题副标题加强标题主标题 Bootstrap支援 <h1> ~ <h6>等HTML标题元素,也提供 .h1 ~ .h6 类别用来设定标题1 ~ 标题6 ...
Bootstrap笔记(九) 排版 - 清單
排版 - 清單项目符号与编号清单定义清单项目符号与编号清单 Bootstrap支援以下HTML元素用来设定项目符号与编号清单 Bootstrap提供以下用来设定项目符号与编号清单範例: < ...
BootStrap笔记-文字排版
如下代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
Bootstrap笔记(六) 排版 -段落与縮寫
段落与行内文字强调段落缩写强调段落若要强调网页上的某个段落,可以加上 .lead 类别. 範例: <!DOCTYPE html> <html lang="en&qu ...
(翻譯) 註解程式碼的13個建議 (C/C++)
摘要 :轉載13個註解程式碼的方法,讓程式碼更容易看懂 Introduction轉載出處 : http://www.cnblogs.com/oomusou/archive/2008/04/26/117 ...
BootStrap笔记参考（全）-优极限
目录 BootStrap 1.主要内容 2.BootStrap的安装和使用 2.1BootStrap介绍 2.2BootStrap特点 2.3下载与使用 3.布局容器和栅格网格系统 3.1布局容器 3 ...
[Tool]靜態程式碼分析－FxCop
前言這一篇文章要介紹免費的靜態程式碼分析工具是FxCop,可以幫助我們快速的瞭解系統是否符合較好的設計原則,有哪一些原則可能是沒注意到的,有哪一些原則可能是可以加強的設計. 靜態程式碼分析的工具也需 ...
ReactJS学习笔记八：动画
ReactJS学习笔记八:动画分类: react学习笔记 javascript2015-07-06 20:27 321人阅读评论(0) 收藏举报 react动画目录(?)[+] 这里只讨论Re ...

Bootstrap笔记(八) 排版 - 程式碼

排版 - 程式碼

Bootstrap笔记(八) 排版 - 程式碼相关推荐

最新文章

热门文章