- 页面入手练习
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 实例</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-success text-green text-center">//bg-primary/bg-success都是对颜色的描述
<h1>我的第一张 Bootstrap 页面</h1>
<p>请调整这张响应式页面的大小以查看效果！</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-md-4">//对列的描述
<h3>列 1</h3>
<p>胜日寻芳泗水滨，无边光景一时新。</p>
<p>等闲识得东风面，万紫千红总是春。</p>
</div>
<div class="col-md-4">
<h3>列 2</h3>
<p>纷纷红紫已成尘，布谷声中夏令新。</p>
<p>夹路桑麻行不尽，始知身是太平人。</p>
</div>
<div class="col-md-4">
<h3>列 3</h3>
<p>远上寒山石径斜，白云生处有人家。</p>
<p>停车坐爱枫林晚，霜叶红于二月花。</p>
</div>
</div>
</div>
2.网格基础练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
<title>bootstrap</title>
</head>
<body>
<div class="container-fluid mt-3">
<h1>三个等宽列</h1>
<P>提示：请尝试在行类中添加一个class="col"的新div将创建四个等宽的列></P>
<div class="row">
<div class="col p-3 bg-danger text-black">.col</div>
<div class="col p-3 bg-gradient text-black">.col</div>
<div class="col p-3 bg-info text-black">.col</div>
</div>
</div>
<br><br>
<div class="container-fluid mt-3">
<h1>响应式序列</h1>
<p>调整浏览器窗口大小可以查看效果</p>
<p>当屏幕宽度小于576像素，列将自动堆叠在一起。</p>
<div class="row">
<div class="col-sm-3 p-3 bg-gradient text-black">.col</div>
<div class="col-sm-4 p-4 bg-dark text-black">.col</div>
<div class="col-sm-5 p-5 bg-info text-black">.col</div>//col-sm是管理列宽的
</div>
</div>
</body>
</html>
3.网页排版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页排版</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<p class="h1">h1 Bootstrap 标题</p>
<p class="h2">h2 Bootstrap 标题</p>
<p class="h3">h3 Bootstrap 标题</p>
<p class="h4">h4 Bootstrap 标题</p>
<p class="h5">h5 Bootstrap 标题</p>
<p class="h6">h6 Bootstrap 标题</p>
</div>
<div class="container mt-3">
<h1>display 标题</h1>
<p>display标题用于更突出的显示</p>
<h1 class="display-1">display-1</h1>
<h1 class="display-2">display-2</h1>
<h1 class="display-3">display-3</h1>
</div>
<div class="container mt-3">
<h1>用黄色重点突出要表示的文本</h1>
<p>黄色字体部分重点突出<mark>今天也是非常开心快的一天</mark></p>
<h1>用虚线表示缩写</h1>
<P>abbr元素用于标记缩写或者是首字母缩写,The<abbr title="World Health Qrganization">WHO</abbr>was founded in 1984</P>
<h1>描述列表dl元素</h1>
<dl>
<dt>咖啡</dt>
<dd>- 黑色的热饮</dd>
<dt>牛奶</dt>
<dd>- 白色的冷饮</dd>
</dl>
<h1>用code标红</h1>
<p>这些元素可以标红<code>html</code>;<code>css</code>;<code>div</code></p>
</div>
<div class="container mt-3">
<h1>多行代码行</h1>
<p>对于多行代码，请使用 pre 元素：</p>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces
</body>
</html>
4.网页设计颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BS5颜色</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>上下文颜色</h1>
<p class="text-muted">文本</p>
<p class="text-primary">文本</p>
<p class="text-success">文本</p>
<br><br>
<h2>上下文背景</h2>
<p class="bg-danger text-primary">文本</p>
<p class="bg-gradient text-muted">文本</p>
</div>
</body>
</html> 
351
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
