1 显示段落
在HTML中，段落使用p标签包起来，重要的文字使用strong标签，em标签。<em> 标签告诉浏览器把其中的文本表示为强调的内容。对于所有浏览器来说，这意味着要把这段文字用斜体来显示。而在BootStramp中通过添加 .lead 类可以让段落突出显示。
<h1>标签添加一个.page-header，可以为内容添加合适的边距，并且在下方显示一条灰色的边线。
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/index.css" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="icon" href="./img/index.png"> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1 class="page-header">CSS<small>常用的CSS</small></h1> <p> 在 Bootstrap 2 中，我们对框架中的某些关键部分增加了对移动设备友好的样式。而在 <strong>Bootstrap 3</strong> 中，我们重写了<em>整个框架</em> 使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式，而是直接融合进了框架的内核中。也就是说，Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。 </p> <p class="lead">使其一开始就是对移动设备友好的。这次不是简单的增加一些可选的针对移动设备的样式</p> </div> </body> </html>
也可以使用blockquote标签来引入重点凸显的内容。
<blockquote > <p> 一个知识点，你自己看懂了，那是一个层次；你会用，是另外一个层次； </p> <footer>引自 <cite title="信平的小屋">信平的小屋</cite></footer></blockquote>
可以添加 引入的内容显示的顺序，从右向左。在blockquote标签添加类.blockquote-reverse
<blockquote class="blockquote-reverse"> <p> 一个知识点，你自己看懂了，那是一个层次；你会用，是另外一个层次； </p> <footer>引自 <cite title="信平的小屋">信平的小屋</cite></footer></blockquote>
2 无序列表,有序列表,内联列表，描述雷彪
Bootstrap已经设定好了列表显示行的间距，样式和字体大小。
无序列表：列表里的内容没有固定的顺序。
<ul> <li>...</li> </ul>
有序列表：列表里的内容有固定顺序。
<ol> <li>...</li> </ol>
内联列表： 通过设置 display: inline-block; 并添加少量的内补（padding），将所有元素放置于同一行。
<ul class="list-inline"> <li>...</li> </ul>
描述列表： 解释词汇的标签。
<dl> <dt>...</dt> <dd>...</dd> </dl>
BootStrap列表例子：
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/index.css" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="icon" href="./img/index.png"> <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1 class="page-header">CSS<small>无序列表,有序列表,内联列表,描述列表</small></h1> <h2>无序列表</h2> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <h2>有序列表</h2> <ol> <li>111</li> <li>222</li> <li>333</li> </ol> <h2>内联列表</h2> <ul class="list-inline"> <li>111</li> <li>222</li> <li>333</li> </ul> <h2>描述列表</h2> <dl> <dt>Description lists</dt> <dd>A description list is perfect for defining terms.</dd> </dl> </div> </body> </html>
显示效果如下图所示：
3 代码
1)内联代码
通过 <code> 标签包裹格式化的代码片段，要对code标签里的特殊字符进行转移比如( <字符转换为<； >字符转换为> )
举例来说<code><section></code> 包括引入的代码块。
<br/>
使用<code> <h1> </code> 加粗标题
2)通过 <kbd> 标签标记用户通过键盘输入的内容。
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
3）代码块
多行代码可以使用 <pre> 标签。为了正确的展示代码，注意将尖括号做转义处理。
<pre><p>Sample text here...</p></pre>
还可以使用 .pre-scrollable 类，其作用是设置 max-height 为 350px ，并在垂直方向展示滚动条。
4）变量
通过 <var> 标签标记变量。
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>
5）程序输出
通过 <samp> 标签来标记程序输出的内容。
<samp>This text is meant to be treated as sample output from a computer program.</samp>
资料参考：
http://v3.bootcss.com/css/#type
时间： 2024-10-05 05:41:48