BS 标签 

<!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>
posted @   lwx_R  阅读(47)  评论(0)  编辑  收藏  举报
相关博文：
·  html 文本
·  ElementPlus
·  html的标签
·  HTML-超文本标记语言
·  HTML标签以及HTML新增标签和扩展
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律
点击右上角即可分享
微信分享提示
AI IDE Trae