首页 > 代码库 > bootstrap学习总结-03 常用标签
bootstrap学习总结-03 常用标签
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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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
bootstrap学习总结-03 常用标签
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。