<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>这是容器container</h1>
</div>
<div class="container-fluid">
<h1>这是容器container</h1>
</div>
<div class="container p-5 my-5 border">
<h1>我的第一张 Bootstrap 页面</h1>
<p>这是一些文本。</p>
</div>
<div class="container p-5 my-5 bg-dark text-white">
<h1>我的第一张 Bootstrap 页面</h1>
<p>这是一些文本。</p>
</div>
<div class="container p-5 my-5 bg-primary text-white">
<h1>我的第一张 Bootstrap 页面</h1>
<p>这是一些文本。</p>
</div>
<div class="container">
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">2</div>
<div class="col-md-1">3</div>
<div class="col-md-1">4</div>
<div class="col-md-1">5</div>
<div class="col-md-1">6</div>
<div class="col-md-1">7</div>
<div class="col-md-1">8</div>
<div class="col-md-1">9</div>
<div class="col-md-1">10</div>
<div class="col-md-1">11</div>
<div class="col-md-1">12</div>
</div>
</div>
<div class="row">
<div class="col p-3 bg-primary text-white">.col</div>
<div class="col p-3 bg-black text-white">.col</div>
<div class="col p-3 bg-primary text-white">.col</div>
</div>
<div class="row">
<div class="col-sm-3 p-3 bg-primary text-white ">.col</div>
<div class="col-sm-3 p-3 bg-black text-white">.col</div>
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-black text-white">.col</div>
</div>
<div class="row">
<div class="col-sm-4 p-3 bg-primary text-white">.col</div>
<div class="col-sm-8 p-3 bg-black text-white">.col</div>
</div>
<h1>这是一个h1</h1>
<h1 class="display-1">display 1</h1>
<p>这是一个段落</p>
<p class="lead">这是另一个段落</p>
<h1>h1 heading <small>secondary text</small></h1>
<!-- mark突出显示 -->
<p>使用mark元素来<mark>突出显示</mark>文本</p>
<!-- 底部带有虚线 abbr -->
<p>The <abbr title="">WHO</abbr> was founded in 1948.</p>
<!-- 块引用 blockquote -->
<blockquote class="blockquote">
<p>For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</p>
<footer class="blockquote-footer">From WWF's website</footer>
</blockquote>
<!-- code -->
<p>这些html元素: <code>span</code>、<code>section</code>、<code>div</code></p>
<!-- kbd -->
<p>请使用<kbd>ctrl + p </kbd>打开打印对话框</p>
<!-- pre -->
<div> <P>多行代码，使用pre元素</P>
<pre>Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks.</pre>
</div>
<p>请使用上下文类来提供“由颜色表达的某种意义”。</p>
<p class="text-muted">此文本已静音。</p>
<p class="text-primary">此文字很重要。</p>
<p class="text-success">此文本表示成功。</p>
<p class="text-info">此文字代表了一些信息。</p>
<p class="text-warning">此文本表示警告。</p>
<p class="text-danger">此文字代表危险。</p>
<p class="text-secondary">次要文本。</p>
<p class="text-dark">此文字为深灰色。</p>
<p class="text-body">默认主体颜色。</p>
<p class="text-light">此文本为浅灰色</p>
<p class="text-white">此文本为白色</p>
<!-- text-white-50 为白色文本添加50%的不透明度 -->
<!-- text-black-50 为黑色文本添加50%的不透明度 -->
<p class="text-black-50">白色背景上不透明度为50的黑色字体</p>
<p class="text-white-50 bg-dark">黑色背景上不透明度为50的白色字体</p>
<p class="bg-primary text-white">此文本很重要。</p>
<p class="bg-success text-white">此文本表示成功。</p>
<p class="bg-info text-white">此文本代表了一些信息。</p>
<p class="bg-warning text-white">此文本表示警告。</p>
<p class="bg-danger text-white">此文本代表危险。</p>
<p class="bg-secondary text-white">次要背景颜色。</p>
<p class="bg-dark text-white">深灰色背景颜色。</p>
<p class="bg-light text-dark">浅灰色背景色。</p>
<table class="table table-striped table-dark table-hover table-bordered">
<!-- table-striped类将斑马条纹添加到表中 -->
<!-- hover鼠标悬停效果 -->
<!-- bordered带边框 -->
<!-- table-dark添加黑色背景 -->
<!-- table-boderless删除边框 -->
<thead>
<tr>
<th>Firstname</th>
<th>lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bill</td>
<td>Gates</td>
<td>bill@example.com</td>
</tr>
<tr>
<td>Steve</td>
<td>Jobs</td>
<td>steve@example.com</td>
</tr>
<tr>
<td>Elon</td>
<td>Musk</td>
<td>elon@example.com</td>
</tr>
</tbody>
</table>
<!-- rounded类将图片设为圆角 -->
<img src="./css/img/1.jpg" class="rounded-circle" >
<img src="css/img/2.jpg" class="img-thumbnail" width="600" height="400" >
<p>没有共产党就没有新中国</p>
<!-- 向左或向右浮动 -->
<img src="css/img/huawei.jpg" class="float-start" alt="">
<img src="css/img/huawei.jpg" class="float-end" alt="">
<!-- .mx-auto (margin:auto) 和 .d-block (display:block) 来使图像居中 -->
<img src="css/img/4.jpg" class="mx-auto d-block " style="width:50%">
<img src="css/img/alibaba.jpg" class="img-fluid" width="2000" height="1085">
<div class="mt-4 p-5 bg-primary text-white rounded">
<h2>Jumbotron 实例</h2>
<p>上海市，简称沪，别称申，是中华人民共和国直辖市，中国的经济、金融、贸易和航运中心，世界著名的港口城市，是中国人口第二多的城市。</p>
<p>上海位于中国东部弧形海岸线的正中间，长江三角洲最东部，东临东海，南濒杭州湾，西与江苏、浙江两省相接，北端的崇明岛处于长江入海口中，与周围的江苏、浙江、安徽三省多个城市共同构成世界级城市群长江三角洲城市群，是其重要的组成部分。</p>
</div>
<div class="alert alert-success" >
<strong>成功!</strong>您应该<a href="#" class="alert-link">阅读这条消息</a>
</div>
<div class="alert alert-info">
<strong>信息！</strong>您应该 <a href="#" class="alert-link">阅读这条消息</a>
</div>
<!-- alert-dismissible btn-close关闭警告框 -->
<div class="alert alert-success alert-dismissible">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>成功</strong>此警报框表示成功或积极的动作
</div>
<!-- fade和show类关闭警报时添加淡入淡出的效果 -->
<div class="alert alert-success alert-dismissible fade show">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>成功！</strong>此警报框表示成功或积极的动作。
</div>
<!--按钮-->
<button type="button" class="btn">基础</button>
<button type="button" class="btn btn-primary">主要</button>
<button type="button" class="btn btn-secondary">次要</button>
<button type="button" class="btn btn-success">成功</button>
<button type="button" class="btn btn-info">信息</button>
<button type="button" class="btn btn-warning">警告</button>
<button type="button" class="btn btn-danger">危险</button>
<button type="button" class="btn btn-dark">深色</button>
<button type="button" class="btn btn-light">浅色</button>
<button type="button" class="btn btn-link">链接</button>
<a href="https://www.csdn.net/" class="btn btn-success">链接按钮</a>
<button type="button" class="btn btn-success">按钮</button>
<button type="button" class="btn btn-success">输入按钮</button>
<button type="submit" class="btn btn-success">提交按钮</button>
<button type="reset" class="btn btn-success">重置</button>
<!-- gap设置块级按钮的间距 -->
<div class="d-grid gap-4">
<button type="button" class="btn btn-primary btn-block " >
全宽按钮
</button>
<button type="button" class="btn btn-primary btn-block " >
全宽按钮
</button>
<button type="button" class="btn btn-primary btn-block " >
全宽按钮
</button>
</div>
<button type="button" class="btn btn-primary" disabled>禁用按钮</button>
<a href="#" class="btn btn-primary disabled" >禁用链接</a>
<button class="btn btn-primary">
<span class="spinner-border spinner-border-sm"></span>
Loading..
</button>
<!-- btn-group类创建按钮组 -->
<div class="btn-group">
<button type="button" class="btn btn-primary">华为</button>
<button type="button" class="btn btn-primary">大疆</button>
<button type="button" class="btn btn-primary">小米</button>
</div>
<!-- 小型btn-group-lg -->
<h3>大型按钮：</h3>
<div class="btn-group btn-group-lg">
<button type="button" class="btn btn-primary">华为</button>
<button type="button" class="btn btn-primary">大疆</button>
<button type="button" class="btn btn-primary">小米</button>
</div>
<!-- btn-group-vertical垂直按钮 -->
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">华为</button>
<button type="button" class="btn btn-primary">大疆</button>
<button type="button" class="btn btn-primary">小米</button>
</div>
<!-- 嵌套按钮组创建下拉菜单 -->
<div class="btn-group">
<button type="button" class="btn btn-primary">华为</button>
<button type="button" class="btn btn-primary">大疆</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">小米</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">手机</a></li>
<li><a class="dropdown-item" href="#">平板电脑</a></li>
</ul>
</div>
</div>
<h2>徽章</h2>
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
<span class="badge bg-primary">主要</span>
<span class="badge bg-secondary">次要</span>
<h2>胶囊徽章</h2>
<span class="badge rounded-pill bg-primary">主要</span>
<span class="badge rounded-pill bg-secondary">次要</span>
<h2>按钮内的徽章</h2>
<button type="button" class="btn btn-primary">
消息 <span class="badge bg-danger">4</span>
</button>
<button type="button" class="btn btn-danger">
通知 <span class="badge bg-dark">7</span>
</button>
<div class="progress" >
<div class="progress-bar" style="width: 50%;"></div>
</div><br/>
<div class="progress" style="height:10px">
<div class="progress-bar" style="width:40%;height:10px"></div>
</div>
<br>
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:50%;height:20px"></div>
</div>
<br>
<div class="progress" style="height:30px">
<div class="progress-bar" style="width:60%;height:30px"></div>
</div>
<h2>带标签的进度条</h2>
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div><br>
<!-- 彩色进度条 -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div><br>
<!-- 条纹进度条 progress-bar-striped -->
<p>请使用 .progress-bar-striped 类向进度条添加条纹：</p>
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:30%"></div>
</div>
<br>
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
</div>
<p>请添加 .progress-bar-animated 类来制作进度条动画：</p>
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
</div>
<p>通过将多个进度条放入同一个 class="progress" 的 div，创建一个堆叠进度条：</p>
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
空闲空间
</div>
<div class="progress-bar bg-warning" style="width:10%">
警告
</div>
<div class="progress-bar bg-danger" style="width:20%">
危险
</div>
</div><br>
<div class="spinner-border text-info"></div>
<p>如果您希望 spinner/加载器增长而不是“旋转”，请使用 <code>.spinner-grow</code> 类：</p>
<div class="spinner-grow text-secondary"></div>
<p>请使用 <code>.spinner-border-sm</code> 或 <code>.spinner-grow-sm</code> 创建较小的加载器：</p>
<div class="spinner-border spinner-border-sm"></div>
<button class="btn btn-primary">
<div class="spinner-border spinner-border-sm"></div>
Loading
</button>
<!-- 分页 -->
<p>大型:</p>
<!-- pagination-sm为小型 -->
<ul class="pagination pagination-lg">
<!-- disabled类用于不可点击的链接 -->
<li class="page-item disabled"><a class="page-link" href="#">上一页</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<!-- active类用于突出显示当前页面 -->
<li class="page-item active"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">下一页</a></li>
</ul>
<p>请使用 utility 类来更改分页的对齐方式：</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页</a></li>
</ul>
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页</a></li>
</ul>
<ul class="pagination justify-content-end">
<li class="page-item"><a class="page-link" href="javascript:void(0);">上一页</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">下一页</a></li>
</ul>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">照片</a></li>
<li class="breadcrumb-item"><a href="#">2019年夏季</a></li>
<li class="breadcrumb-item"><a href="#">意大利</a></li>
<li class="breadcrumb-item active">罗马</li>
</ul>
<!-- 列表组list-group -->
<ul class="list-group">
<li class="list-group-item active">活动项目</li>
<li class="list-group-item">第一项</li>
<li class="list-group-item">第二项</li>
</ul>
<h2>包含链接项的列表组</h2>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">第一项</a>
<a href="#" class="list-group-item list-group-item-action">第二项</a>
<a href="#" class="list-group-item list-group-item-action">第三项</a>
</div>
<h2>包含禁用项目的列表组disabled类</h2>
<div class="list-group">
<a href="#" class="list-group-item disabled">第一项（被禁用的项目）</a>
<a href="#" class="list-group-item">第二项</a>
<a href="#" class="list-group-item">第三项</a>
</div><br>
<ul class="list-group list-group-flush">
<li class="list-group-item">第一项</li>
<li class="list-group-item">第二项</li>
<li class="list-group-item">第三项</li>
<li class="list-group-item">第四项</li>
</ul><br>
<ol class="list-group list-group-numbered">
<li class="list-group-item">第一项</li>
<li class="list-group-item">第二项</li>
<li class="list-group-item">第三项</li>
</ol><br>
<ul class="list-group list-group-horizontal">
<li class="list-group-item">第一项</li>
<li class="list-group-item">第二项</li>
<li class="list-group-item">第三项</li>
</ul>
<ul class="list-group">
<li class="list-group-item list-group-item-success">Success item</li>
<li class="list-group-item list-group-item-secondary">Secondary item</li> <br>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Action item</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Success item</a>
</div>
<p>将 .badge 类与 utility/helper 类结合起来，可在列表组中添加徽章：</p>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Inbox
<span class="badge bg-primary rounded-pill">12</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Ads
<span class="badge bg-primary rounded-pill">50</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Junk
<span class="badge bg-primary rounded-pill">99</span>
</li>
</ul>
<div class="card">
<div class="card-body">基础的卡片</div>
</div>
<h2>页眉和页脚</h2>
<div class="card">
<div class="card-header">页眉</div>
<div class="card-body">内容</div>
<div class="card-footer">页脚</div>
</div>
<div class="card">
<div class="card-body bg-dark text-white">card</div>
</div>
<div class="card">
<div class="card-body">
<h4 class="card-title">卡片标题</h4>
<a href="#" class="card-link">卡片链接</a>
<a href="#" class="card-link">另一个链接</a>
</div>
</div>
<div class="card" style="width:400px">
<img class="card-img-top" src="./css/img/avatar2.png" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">Bill Gates</h4>
<p class="card-text">Bill Gates 是一位程序员和工程师。一些示例文本。一些示例文本。</p>
<a href="#" class="btn btn-primary">查看个人资料</a>
</div>
<div class="card img-fluid " style="width:499px">
<img class="card-img-top" src="./css/img/avatar2.png" alt="Card image " style="width: 100%;">
<div class="card-img-overlay">
<h4 class="card-title">Bill Gates</h4>
<p class="card-text">一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。一些示例文本。</p>
<a href="#" class="btn btn-primary">查看个人资料</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">链接1</a></li>
<li><a href="#" class="dropdown-item">链接2</a></li>
<li><a href="#" class="dropdown-item">链接3</a></li>
</ul>
</div>
<br>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">链接1</a></li>
<li><a href="#" class="dropdown-item">链接2</a></li>
<li><a href="#" class="dropdown-item">链接3</a></li>
<li><hr class="dropdown-divider"></li>
<li><a href="#" class="dropdown-item">另一个链接</a></li>
</ul>
</div><br>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><h5 class="dropdown-header">下拉标题 1</h5></li>
<li><a href="#" class="dropdown-item">链接 1</a></li>
<li><a href="#" class="dropdown-item">链接 2</a></li>
<li><a href="#" class="dropdown-item">链接 3</a></li>
<li><h5 href="#" class="dropdown-header">下拉标题 2</h5></li>
<li><a href="#" class="dropdown-item">另一个链接</a></li>
</ul>
</div><br>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">普通的</a></li>
<li><a href="#" class="dropdown-item active">活动的</a></li>
<li><a href="#" class="dropdown-item disabled">禁用的</a></li>
</ul>
</div><br>
<!-- 下拉列表位置 -->
<div class="dropdown dropend">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
Dropend
</button>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">普通的</a></li>
<li><a href="#" class="dropdown-item active">活动的</a></li>
<li><a href="#" class="dropdown-item disabled">禁用的</a></li>
</ul>
</div><br>
<div class="dropdown dropstart text-end">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
dropstart
</button>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">普通的</a></li>
<li><a href="#" class="dropdown-item active">活动的</a></li>
<li><a href="#" class="dropdown-item disabled">禁用的</a></li>
</ul>
</div><br>
<p>使用.dropdown-menu-end 类可右对齐下拉菜单。</p>
<div class="dropdown dropdown-menu-end">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
用于演示此例的宽的下拉按钮
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><a class="dropdown-item" href="#">链接 2</a></li>
<li><a class="dropdown-item" href="#">链接 3</a></li>
</ul>
</div><br>
<div class="dropup">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
上拉按钮
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><a class="dropdown-item" href="#">链接 2</a></li>
<li><a class="dropdown-item" href="#">链接 3</a></li>
</ul>
</div><br>
<div class="container mt-3">
<p>嵌套按钮组可创建下拉菜单：</p>
<div class="btn-group">
<button type="button" class="btn btn-primary">华为</button>
<button type="button" class="btn btn-primary">大疆</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">小米</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">手机</a></li>
<li><a class="dropdown-item" href="#">平板电脑</a></li>
</ul>
</div>
</div>
</div><br>
<div class="container mt-3">
<h2>带下拉菜单的垂直按钮组</h2>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">华为</button>
<button type="button" class="btn btn-primary">大疆</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">小米</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">手机</a></li>
<li><a class="dropdown-item" href="#">平板电脑</a></li>
</ul>
</div>
</div>
</div>
<h2>折叠</h2>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">春日</button>
<div id="demo" class="collapse">
<p>胜日寻芳泗水滨，无边光景一时新。</p>
<p>等闲识得东风面，万紫千红总是春。</p>
</div><br>
</div> <button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#demo">春日</button>
<div id="demo" class="collapse show">
<p>胜日寻芳泗水滨，无边光景一时新。</p>
<p>等闲识得东风面，万紫千红总是春。</p>
</div>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="btn" data-bs-toggle="collapse" href="#collapseOne">
可折叠组项目 #1
</a>
</div>
<div id="collapseOne" class="collapse show" data-bs-parent="#accordion">
<div class="card-body">
<h3>春日</h3>
<p>胜日寻芳泗水滨，无边光景一时新。</p>
<p>等闲识得东风面，万紫千红总是春。</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseTwo">
可折叠组项目 #2
</a>
</div>
<div id="collapseTwo" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
<h3>初夏绝句</h3>
<p>纷纷红紫已成尘，布谷声中夏令新。</p>
<p>夹路桑麻行不尽，始知身是太平人。</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed btn" data-bs-toggle="collapse" href="#collapseThree">
可折叠组项目 #3
</a>
</div>
<div id="collapseThree" class="collapse" data-bs-parent="#accordion">
<div class="card-body">
<h3>山行</h3>
<p>远上寒山石径斜，白云生处有人家。</p>
<p>停车坐爱枫林晚，霜叶红于二月花。</p>
</div>
</div>
</div>
</div>
<h2>导航</h2>
<ul class="nav">
<li class="nav-item">
<a href="#" class="nav-link">链接</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">链接</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">禁用</a>
</li>
</ul>
<p>左对齐的导航（默认）：</p>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
<p class="text-center">居中的导航：</p>
<ul class="nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
<p class="text-end">右对齐的导航：</p>
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
<p>使用 .flex-column 类创建垂直导航：</p>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul><br>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">活动</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul><br>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">禁用</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul>
<p>使用 .nav nav-pills 类将导航菜单变成导航胶囊：</p>
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#" class="nav-link active">禁用</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">链接</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">链接</a>
</li>
</ul><br>
<p>请使用 .nav-justified 类（等宽）对齐标签/胶囊：</p>
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">活动</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul><br>
<h2>胶囊下拉菜单</h2>
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">活动</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">下拉列表</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><a class="dropdown-item" href="#">链接 2</a></li>
<li><a class="dropdown-item" href="#">链接 3</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul><br>
<h2>选项卡下拉菜单</h2>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">活动</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">下拉列表</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">链接 1</a></li>
<li><a class="dropdown-item" href="#">链接 2</a></li>
<li><a class="dropdown-item" href="#">链接 3</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="#">链接</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">禁用</a>
</li>
</ul><br>
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#home">春日</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu1">初夏</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#menu2">山行</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>春日</h3>
<p>胜日寻芳泗水滨，无边光景一时新。</p>
<p>等闲识得东风面，万紫千红总是春。</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>初夏绝句</h3>
<p>纷纷红紫已成尘，布谷声中夏令新。</p>
<p>夹路桑麻行不尽，始知身是太平人。</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>山行</h3>
<p>远上寒山石径斜，白云生处有人家。</p>
<p>停车坐爱枫林晚，霜叶红于二月花。</p>
</div>
</div><br>
<h2>网格</h2>
<div class="container">
<div class="row">
<div class="col-md-1">1</div>
<div class="col-md-1">2</div>
<div class="col-md-1">3</div>
<div class="col-md-1">4</div>
<div class="col-md-1">5</div>
<div class="col-md-1">6</div>
<div class="col-md-1">7</div>
<div class="col-md-1">8</div>
<div class="col-md-1">9</div>
<div class="col-md-1">10</div>
<div class="col-md-1">11</div>
<div class="col-md-1">12</div>
</div><br>
</div>
<div class="row">
<div class="col-sm-6 bg-primary text-white p-3">Lorem ipsum...
</div>
<div class="col-sm-6 bg-dark text-white p-3">
Sed ut perspiciatis...
</div>
</div><br>
<div class="container-fluid">
<div class="row">
<div class="col-sm bg-primary text-white">1 of 2</div>
<div class="col-sm bg-dark text-white">2 of 2</div>
</div><br>
<div class="row">
<div class="col-sm bg-primary text-white">1 of 4</div>
<div class="col-sm bg-dark text-white">2 of 4</div>
<div class="col-sm bg-primary text-white">3 of 4</div>
<div class="col-sm bg-dark text-white">4 of 4</div>
</div><br>
<div class="container-fluid">
<div class="row">
<div class="col-3 bg-primary">1</div>
<div class="col-9 bg-info">2</div>
</div><br>
<div class="container-fluid">
<div class="row">
<div class="col-4 bg-primary ">1</div>
<div class="col-8 bg-info ">2</div>
</div><br>
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="email">电子邮件:</label>
<input type="email" class="form-control" id="email" placeholder="请输入电子邮件地址" name="email">
</div>
<div class="mb-3">
<label for="pwd">密码：</label>
<input type="password" class="form-control" id="pwd" placeholder="请输入密码" name="pswd">
</div>
<div class="form-check mb-3">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember">记住我
</label>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<div class="container mt-3">
<h2>Textarea</h2>
<p>也可以使用 .form-control 类来设置 textarea 的样式：</p>
<form action="/action_page.php">
<div class="mb-3 mt-3">
<label for="comment">Comments:</label>
<textarea class="form-control" rows="5" id="comment" name="text">
</textarea><br>
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="请输入电子邮件地址" name="email">
</div>
<div class="col">
<input type="password" class="form-control" placeholder="请输入密码" name="pswd">
</div>
</div>
</form>
<h2>拾色器</h2>
<form>
<label for="maColor" class="form-label">拾色器</label>
<input type="color" class="form-control form-control-color"
id="myColor" value="#CCCCCC" title="请选择一种颜色">
</form><br>
<h2>选择菜单</h2>
<form action="/action_page.php">
<label for="sel1" class="form-label">选择菜单（选择一项）：</label>
<select class="form-select" id="sel1" name="sellist1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<br>
<label for="sel2" class="form-label">多选菜单（按住 ctrl 或 shift（或用鼠标拖动）可选择多个）：</label>
<select multiple class="form-select" id="sel2" name="sellist2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<button type="submit" class="btn btn-primary mt-3">提交</button>
</form><br>
<form action="/action_page.php">
<label for="browser" class="form-label">请从列表中选择您的浏览器：</label>
<input class="form-control" list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<button type="submit" class="btn btn-primary mt-3">提交</button>
</form><br>
<form action="/action_page.php">
<div class="form-check">
<input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>
<label class="form-check-label" for="radio1">选项 1</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">
<label class="form-check-label" for="radio2">选项 2</label>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" disabled>
<label class="form-check-label">选项 3</label>
</div>
<button type="submit" class="btn btn-primary mt-3">提交</button>
</form>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
