<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="./css/bootstrap.css">
<link rel="stylesheet" href="./css/my.css">
</head>
<body>
<div class="container">
<!-- 标题 -->
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
<!-- 可以通过 .small来定义副标题 -->
<h1>标题1 <small>副标题1</small></h1>
<h2>标题2 <small>副标题2</small></h2>
<h3>标题3 <small>副标题3</small></h3>
<h4>标题4 <small>副标题4</small></h4>
<h5>标题5 <small>副标题5</small></h5>
<h6>标题6 <small>副标题6</small></h6>
<!-- 页面主体 -->
<p>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.
<br />
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
<br />
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
</p>
<!-- 中心内容 -->
<p class="lead">中心内容区域</p>
<!-- 标记文本 -->
<p>你可以使用<mark>高亮</mark>的标记文本</p>
<!-- 被删除的文本 -->
<del>这是一段被删除的文本</del>
<!-- 无用文本<s>这个标签 -->
<s>对于没用的文本使用</s>
<!-- 额外插入文本 -->
<ins>这是一段插入文本</ins>
<!-- 带下划线的文本 -->
<u>这是一段带下划线的文本</u>
<!-- 小号字体文本 字体大小为父文本大小的85% -->
<small>这是一段比较小号的文本</small>
<!-- 着重强调的一段文本 -->
<strong>通过增加font-weight值强调一段文本</strong>
<!-- 斜体 -->
<em>用斜体强调一段文本</em>
<div class="row">
<!-- 文字对齐方式 -->
<p class="text-left">靠左对齐的文本</p>
<!-- 最常用的是居中对齐的文本 -->
<p class="text-center">居中对齐的文本</p>
<p class="text-right">靠右对齐的文本</p>
<p class="text-justify">合理的文本</p>
<p class="text-nowrap">Left aligned text.</p>
</div>
<!-- 改变文本大小写 -->
<!-- 改变成小写 -->
<p class="text-lowercase">Lowercased text.</p>
<!-- 改变成大写 -->
<p class="text-uppercase">Uppercased text.</p>
<!-- 改变成大写字母 -->
<p class="text-capitalize">Capitalized text</p>
<!-- 缩略语 -->
<abbr title="attribute">attr</abbr>
<!-- 地址 -->
<address>
<strong>Twitter,Inc.</strong>
</address>
<address>
<strong>Full Name</strong>
<a href=mailto:#"">793881873@qq.com</a>
</address>
<!-- 在文档中引用其他来源的内容 -->
<blockquote>
<p>这个段落是引用的</p>
</blockquote>
<!-- 命名来源的引用 -->
<blockquote>
<p>这个是段落的引用</p>
<footer>来源<cite title="Source Title">Source Title</cite></footer>
</blockquote>
<!-- 无序列表 -->
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Nulla volutpat aliquam velit</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>梨</li>
</ol>
<!-- 无样式列表 -->
<ul class="list-unstyled">
<li>数据1</li>
<li>数据2</li>
<li>数据3</li>
<li>数据4</li>
<li>数据5</li>
</ul>
<!--
内联列表 通过设置display: inline-block
添加少量的内补padding,将所有元素放在同一行
-->
<ul class="list-inline">
<li>数据1</li>
<li>数据2</li>
<li>数据3</li>
<li>数据4</li>
<li>数据5</li>
</ul>
<!-- 带有描述的短语列表 -->
<dl>
<dt>数据1</dt>
<dd>数据1的描述</dd>
<dt>数据2</dt>
<dd>数据2的描述</dd>
<dt>数据3</dt>
<dd>数据3的描述</dd>
</dl>
<!-- 水平排列的描述 -->
<dl class="dl-horizontal">
<dt>Description lists</dt>
<dd>A description list is perfect for defining terms.</dd>
<dt>Euismod</dt>
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.</dd>
<dt>Malesuada porta</dt>
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
</dl>
</div>
<script src="./js/jquery.js"></script>
<script src="./js/bootstrap.js"></script>
</body>
</html>
最后修改：2021 年 02 月 04 日
© 允许规范转载