<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<!-- Bootstrap 5 的设计目标是响应移动设备。移动优先的样式是核心框架的一部分。
为确保正确的渲染和触摸缩放，请在 <head> 元素内添加以下 <meta> 标记： -->
<meta charset="utf-8" name="viewport"
content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="bs5/css/bootstrap.css"/>
<script type="text/javascript" src="bs5/js/bootstrap.js"></script>
<style type="text/css">
div{
border: 1px solid red;
}
</style>
</head>
<body>
<!-- 通常容器无上下边距 -->
<div class="container pt-5">
<p>.container 类提供了一个响应式的固定宽度容器</p>
</div>
<div class="container-fluid pt-3">
<p>container-fluid 类提供了一个全宽容器，跨越视口的整个宽度</p>
</div>
<p>Bootstrap 5 网格系统 最多允许 12 列</p>
<div class="container mt-3">
<div class="row">
<!-- .row-*-*
第一颗星 (*) 代表响应度：sm、md、lg、xl 或 xxl，
而第二颗星代表数字，每行加起来应为 12。
也可以不加* 自动处理-->
<!-- 当宽度小于sm时 自动上下叠起来 -->
<div class="col-sm-4 p-3 bg-primary "></div>
<div class="col-sm-4 p-3 bg-black" ></div>
<div class="col-sm-4 p-3 bg-primary"></div>
</div>
</div>
<p>更突出的h 响应式 可以在其他元素上用.h1 作为h1</p>
<div class="container mt-3">
<h1>H1 title</h1>
<h2>H2 title</h2>
</div>
<p>比h更突出的display 响应式</p>
<div class="container mt-3">
<h1 class="display-1">display1 title</h1>
<h2 class="display-2">display2 title</h2>
</div>
<p>比h更小的small 辅助标题 响应式</p>
<div class="container mt-3">
<h1>H1 title<small> small text</small> </h1>
<h2>H2 title<small> small text</small></h2>
</div>
<p>使用.mark或mark标签来突出文字</p>
<div class="container mt-3">
<p>使用<mark>mark</mark>突出</p>
</div>
<p>使用abbr标签设置为底部带有虚线边框，悬停时带有问号的光标</p>
<div class="container mt-3">
<p>使用<abbr title="ABBR">abbr</abbr>带虚线</p>
</div>
<p>使用blockquote标签块引用</p>
<div class="container mt-3">
<blockquote>
For 50 years, WWF has been protecting the future of nature.
</blockquote>
</div>
<p>使用dl dt dd标签描述列表</p>
<div class="container mt-3">
<dl>
<dt>咖啡</dt>
<dd>- 黑色的热饮</dd>
<dt>牛奶</dt>
<dd>- 白色的冷饮</dd>
</dl>
</div>
<p>使用code标签添加代码</p>
<div class="container mt-3">
<code>
cout<<"Hello World";
</code>
</div>
<p>使用pre标签添加多行代码块</p>
<div class="container mt-3">
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.
</pre>
</div>
<p>使用kbd标签表示需要键盘输入的内容</p>
<div class="container mt-3">
<p>使用<kbd>ctrl+c</kbd>来复制</p>
</div>
</body>
</html>
