11.25-11.27
自主学习了Bootstrap5的容器、网格基础及排版
11.28-11.30
自主学习了Bootstrap5的颜色表格和图像
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 实例</title><!--Bootstrap 5 在页面开头包含 HTML5 doctype，以及 lang 属性和正确的标题、字符集-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--width=device-width 设置了页面的宽度以跟随设备的 screen-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>
<!--.container 类提供了一个响应式的固定宽度容器.container-fluid 类提供了一个全宽容器，跨越视口的整个宽度-->
<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>
<!--Bootstrap 的网格系统是用 flexbox 构建的，页面上最多允许 12 列-->
<!--.col- (超小型设备 - 屏幕宽度小于 576px).col-sm- (小型设备 - 屏幕宽度等于或大于 576px).col-md- (中型设备 - 屏幕宽度等于或大于 768 像素)
.col-lg- (大型设备 - 屏幕宽度等于或大于 992 像素).col-xl- (xlarge 设备 - 屏幕宽度等于或大于 1200px).col-xxl- (xxlarge 设备 - 屏幕宽度等于或大于 1400px)-->
<div class="container-fluid mt-3">
<h1>响应式列</h1>
<p>调整浏览器窗口大小可查看效果。</p>
<p>当屏幕宽度小于 576 像素时，列将自动堆叠在一起。</p>
<div class="row">
<div class="col-sm-3 p-3 bg-primary text-white">.col</div>
<div class="col-sm-3 p-3 bg-dark 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-dark text-white">.col</div>
</div>
</div>
<!--颜色-->
<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>
<h1 class="display-1">Display</h1><!--dispaly用于比普通标题更突出-->
<h1>h1 heading <mark><small>secondary text</small></mark></h1><!--small用于在任何标题中创建较小的辅助文本,mark用来突出文本-->
<!--abbr 元素用于标记缩写或首字母缩略词-->
<p><abbr title="Angle Scans Bound">ASB</abbr></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>
<p class="text-black-50">白色背景上不透明度为 50% 的黑色文本</p>
<p class="text-white-50 bg-dark">黑色背景上不透明度为 50% 的白色文本</p>
<!--争对背景的颜色用.bg-*颜色与字体颜色相对应,配合.text-*使用-->
<p class="bg-warning text-light">你马上要考数据结构,Java,概率论,毛概和四级还有科二</p>
<p class="bg-success text-white-50">祝你好运!</p>
</div>
<!--表格-->
<!--基础表格,一个基本的 Bootstrap 5 表格有一点内边距，以及水平分隔线,.table类添加样式-->
<div class="container mt-3">
<table class="table table-sm table-hover"><!--table-striped 类将斑马条纹添加到表中 table-bordered类为表格和单元格的所有边添加边框 -->
<thead><!--table-hover类在表格行上添加悬停效果（灰色背景色）table-dark 类为表格添加黑色背景 table-borderless 类从表格中删除边框-->
<tr class="table-dark"><!--table-sm 类通过将单元格填充减半来使表格变小,table-responsive 类在需要时向表格添加滚动条（当它在水平方向上太大时）-->
<th>Name</th>
<th>Color</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>Primary</td>
<td>蓝色</td>
<td>表示重要动作</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>绿色</td>
<td>表示成功或积极的动作</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>红色</td>
<td>表示危险或潜在的负面行为</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>浅蓝色</td>
<td>表示中性的信息更改或操作</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>橙色</td>
<td>表示可能需要注意的警告</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>灰色</td>
<td>将悬停颜色应用于表格行或表格单元格</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>灰色</td>
<td>表示不太重要的动作</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>绿色</td>
<td>表示成功或积极的动作</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>浅灰色</td>
<td>浅灰色表格或表格行背景</td>
</tr>
<tr class="table-dark">
<td>Dark</td>
<td>深灰色</td>
<td>深灰色表格或表格行背景</td>
</tr>
</tbody>
</table>
<!--图像-->
<!--rounded 类为图像添加圆角,rounded-circle 类将图像塑造为圆形,img-thumbnail 类将图像塑造为缩略图（带边框),float-start 类将图像向左浮动，或使用 .float-end 向右浮动-->
<!--utility 类 .mx-auto (margin:auto) 和 .d-block (display:block)使图像居中, 响应式图像.img-fluid 类会自动调整以适应屏幕尺寸-->
<img src="flower-1.jpg" class="rounded-circle float-start img-fluid" alt="flower">
<img src="R-C.jpg" class="rounded float-end img-fluid height="400px" width="500px" alt="view">
</div>
</body>
</html>
简略制作了我的页面（第四次作业）
<!DOCTYPE html>
<html lang="en">
<head>
<title> Bootstrap</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>
<style type="text/CSS">
div{
margin: 100px,50px;
}
</style>
</head>
<body>
<div class="nav navbar justify-content-center navbar-expand-sm bg-success text-light fixed-top container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="#">Bootstrap</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 " href="#表格">表格</a>
</li>
</ul>
</div>
<div id="排版"class="container-fluid mt-3 container pt-5 my-8 border">
<table class="table table-hover table-borderless table-striped">
<thead>
<tr>
<th>Name</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>h1-h6</td>
<td>设置为有更粗的 font-weight 以及响应式的 font-size</td>
</tr>
<tr>
<td>display</td>
<td>用于比普通标题更突出（更大的 font-size 和更细的 font-weight）</td>
</tr>
<tr>
<td>small</td>
<td>用于在任何标题中创建较小的辅助文本</td>
</tr>
<tr>
<td>mark</td>
<td>使用黄色背景颜色和一些内边距来设置 mark 的样式</td>
</tr>
<tr>
<td>abber</td>
<td>为底部带有虚线边框，悬停时带有问号的光标</td>
</tr>
<tr>
<td>blockquote</td>
<td>当引用其他来源的内容块,使用 .blockquote-footer 类</td>
</tr>
<tr>
<td>.lead</td>
<td>突出段落</td>
</tr>
<tr>
<td>text-left</td>
<td>规定左对齐文本</td>
</tr>
<tr>
<td>text-break</td>
<td>防止长文本破坏布局</td>
</tr>
<tr>
<td>text-center</td>
<td>规定居中对齐的文本</td>
</tr>
</tbody>
</table>
</div>
<div class="container-fluid mt-3 container-xl pt-5 my-6 border"id="颜色">
<table class="table table-hover table-bordered">
<thead>
<tr class="table-dark">
<th>Name</th>
<th>Color</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr class="table-primary">
<td>Primary</td>
<td>蓝色</td>
<td>表示重要动作</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>绿色</td>
<td>表示成功或积极的动作</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>红色</td>
<td>表示危险或潜在的负面行为</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>浅蓝色</td>
<td>表示中性的信息更改或操作</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>橙色</td>
<td>表示可能需要注意的警告</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>灰色</td>
<td>将悬停颜色应用于表格行或表格单元格</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>灰色</td>
<td>表示不太重要的动作</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>绿色</td>
<td>表示成功或积极的动作</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>浅灰色</td>
<td>浅灰色表格或表格行背景</td>
</tr>
<tr class="table-dark">
<td>Dark</td>
<td>深灰色</td>
<td>深灰色表格或表格行背景</td>
</tr>
</tbody>
</table>
</div>
<div id="表格"class="container-fluid mt-3 container pt-5 my-8 container-xl ">
<table class="table table-hover table-borderless table-dark">
<thead>
<tr class="table-secondary">
<th>Name</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>table-striped</td>
<td>将斑马条纹添加到表中</td>
</tr>
<tr>
<td>table-bordered</td>
<td>表格和单元格的所有边添加边框</td>
</tr>
<tr>
<td>table-hover</td>
<td>在表格行上添加悬停效果（灰色背景色）</td>
</tr>
<tr>
<td>table-dark</td>
<td>为表格添加黑色背景</td>
</tr>
<tr>
<td>table-dark 和 .table-striped</td>
<td>创建深色的条纹表格</td>
</tr>
<tr>
<td>table-borderless</td>
<td>从表格中删除边框</td>
</tr>
<tr>
<td>table-sm</td>
<td>通过将单元格填充减半来使表格变小</td>
</tr>
<tr>
<td>table-responsive</td>
<td>在需要时向表格添加滚动条（当它在水平方向上太大时）</td>
</tr>
</tbody>
</table>
</body>
</html>
420
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
