Module 03 · Final Project and Assessment期末项目与评估
Cheatsheet: Developing Websites and Front-Ends with Bootstrap速查表：使用 Bootstrap 开发网站与前端界面
| Bootstrap 类/样式或其他标签 | 描述 | 代码示例 |
|---|---|---|
<link> |
用于指示在 HTML 文档中使用下载版本的 Bootstrap 时 bootstrap.min.css 的路径。 |
<link rel="stylesheet" href="css/bootstrap.min.css"> |
<script> |
用于在 HTML 文档中链接所需的 JavaScript 文件。 | <script src="js/bootstrap.min.js"></script><script src="js/bootstrap.bundle.min.js"></script> |
| Composer | 使用 Composer 安装 Bootstrap。 | composer require twbs/bootstrap |
| 显示工具 | 根据屏幕大小控制可见性和布局。 示例包括 d-none、d-block、d-flex、d-inline 和 d-inline-block |
<!-- 在小屏幕上隐藏元素 --><div class="d-none d-sm-block"> 该元素在小屏幕上是隐藏的。</div><div class="d-flex"> <div class="flex-fill">弹性 div 1</div> <div class="flex-fill">弹性 div 2</div></div> |
| Flexbox 工具 | 用于创建弹性容器。 示例包括 d-flex、flex-row-reverse、-flex-fill、flex-grow-1 和 flex-shrink-1 |
<!– 渲染三个元素的代码 --><div class="d-flex flex-row-reverse"> <div class="p-2">弹性项 1</div> <div class="p-2">弹性项 2</div> <div class="p-2">弹性项 3</div></div> |
| 浮动工具 | 通过将元素向左或向右浮动来水平对齐元素。 示例包括 float-right 和 float-left |
<div class="float-left">向左浮动！</div> |
| 表单和表单组件 | 使用表单组件创建一致且视觉上吸引人的表单。 示例包括 position-static、position-relative 和 position-fixed |
<!– 示例 1，包含 2 个输入字段 --><form class="form-inline"><label class="sr-only" for="inlineFormInputName">姓名</label><input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName" placeholder="简·多"><label class="sr-only" for="inlineFormInputGroupUsername">用户名</label><div class="input-group mb-2 mr-sm-2"> <div class="input-group-prepend"> <div class="input-group-text">@</div> </div> <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="用户名"></div><div class="form-check mb-2 mr-sm-2"> <input class="form-check-input" type="checkbox" id="inlineFormCheck"> <label class="form-check-label" for="inlineFormCheck">记住我</label></div><button type="submit" class="btn btn-primary mb-2">提交</button></form> |
| 带下拉组件的表单 | 在表单中使用下拉菜单的示例。 | <!– 示例 2，包含下拉字段 --><body> <nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <!-- <a class="navbar-brand" href="#">导航栏</a> --> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="切换导航"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">首页</a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于我们</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 帮助 </a> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">技术文档</a></li> <li><a class="dropdown-item" href="#">与我们联系</a></li> <!-- <li><hr class="dropdown-divider"></li> <li><a class="dropdown-item" href="#">其他内容</a></li> --> </ul> </li> <!-- <li class="nav-item"> <a class="nav-link disabled" aria-disabled="true">禁用</a> </li> --> </ul> <form class="d-flex" role="search"> <input class="form-control me-2" type="search" placeholder="搜索" aria-label="搜索"> <button type="button" class="btn btn-info">搜索</button> </form> </div> </div> </nav> <form> <div class="mb-3" style="margin: 30px;"> <label for="name" class="form-label"><b>全名</b></label> <input type="text" class="form-control" id="name" style="width: 500px;"> <label for="exampleInputEmail1" class="form-label"><b>电子邮件地址</b></label> <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" style="width: 500px;"> <div id="emailHelp" class="form-text">我们不会与其他人分享您的电子邮件。</div> </p> <label for="name" class="form-label"><b>联系的原因</b>: </label> <select id="cars" class="btn btn-secondary dropdown-toggle" style="background-color: rgb(255, 255, 255);color: black; text-align: center; width: 250px;" > <option value="billing" selected style=" text-align: left;">账单</option> <option value="techsupport" style=" text-align: left;">技术支持</option> <option value="feedback" style=" text-align: left;">投诉和反馈</option> <option value="others" style=" text-align: left;">其他</option> </select> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="#">账单</a></li> <li><a class="dropdown-item" href="#">技术支持</a></li> <li><a class="dropdown-item" href="#">投诉和反馈</a></li> </ul> </div> </p> <div class="mb-3" style="margin: 30px;"> <textarea name="message" id="message" cols="65" rows="10" style="resize: none;"></textarea> </div></p> <div class="mb-3" style="margin: 30px;"> <button type="submit" class="btn btn-primary">提交</button> <button type="reset" class="btn btn-secondary">重置</button> </div> </form></body> |
| 标题文本工具 | 使用所有 HTML 标题，从标题 1 到标题 6。 | <h1>h1. Bootstrap 标题</h1><h2>h2. Bootstrap 标题</h2><h3>h3. Bootstrap 标题</h3><h4>h4. Bootstrap 标题</h4><h5>h5. Bootstrap 标题</h5><h6>h6. Bootstrap 标题</h6><p class="h1">h1. Bootstrap 标题</p> |
| npm | Bootstrap 使用 npm 脚本作为其构建系统。 |
npm install Bootstrap |
| 定位工具 | 控制网页上元素的定位。 示例包括 position-static、position-relative 和 position-fixed |
<div class="position-relative"> <div class="position-absolute top-0 start-0"></div> <div class="position-absolute top-0 end-0"></div> <div class="position-absolute top-50 start-50"></div> <div class="position-absolute bottom-50 end-50"></div> <div class="position-absolute bottom-0 start-0"></div> <div class="position-absolute bottom-0 end-0"></div></div> |
| 响应式网格系统 | 使用户能够创建灵活且响应式的布局 | <title>响应式网格示例</title><!-- 添加 Bootstrap CSS 然后继续 --> <body> <!-- 第一行，单列跨越整个宽度，适用于超大屏幕 --> <div class="row"> <div class="col-xl-12 bg-success p-3 text-white text-center border"> <p>col-xl-12</p> </div> </div> <!-- 第二行，适用于大屏幕的两列（每列占用一半可用宽度） --> <div class="row"> <div class="col-lg-6 bg-primary p-3 text-white text-center border"> <p>col-lg-6</p> </div> <div class="col-lg-6 bg-primary p-3 text-white text-center border"> <p>col-lg-6</p> </div> </div> <!-- 第三行，适用于中等屏幕的三列（每列占用三分之一可用宽度） --> <div class="row"> <div class="col-md-4 bg-warning p-3 text-white text-center border"> <p>col-md-4 </p> </div> <div class="col-md-4 bg-warning p-3 text-white text-center border"> <p>col-md-4 </p> </div> <div class="col-md-4 bg-warning p-3 text-white text-center border"> <p>col-md-4 </p> </div> </div> <!-- 第四行，适用于小屏幕的四列（每列占用四分之一可用宽度） --> <div class="row"> <div class="col-sm-3 bg-danger p-3 text-white text-center border"> <p>col-sm-3</p> </div> <div class="col-sm-3 bg-danger p-3 text-white text-center border"> <p>col-sm-3</p> </div> <div class="col-sm-3 bg-danger p-3 text-white text-center border"> <p>col-sm-3</p> </div> <div class="col-sm-3 bg-danger p-3 text-white text-center border"> <p>col-sm-3</p> </div> </div></body> |
| 文本对齐工具 | 在容器或元素内主动对齐文本。 示例包括 text-text-center 和 text-left |
<!-- Center align a heading --> <div class="text-center"> <h1>Center Aligned Heading</h1> </div> <!-- Left align text --> <div class="text-left"> <p>Left Aligned text</p> </div> |
| 文本背景字体颜色工具 | 用于修改背景的字体颜色。 示例包括 bg-primary、bg-secondary、bg-success、bg-info、bg-warning 和 bg-danger |
<!-- 自动更新文本颜色 --><div class="bg-secondary text-white">次要背景颜色</div><!– 添加信息背景颜色 --><div class="bg-info"> 这个 div 有信息背景颜色。</div> |
| 文本装饰工具 | 用于为文本添加视觉强调。 示例包括 text-decoration-underline 和 text-decoration-none |
<p class="text-decoration-underline">文本下划线</p><p class="text-decoration-none">移除文本装饰</p> |
| 文本字体颜色工具 | 用于通过修改字体颜色来样式化文本。 示例包括 text-primary、text-secondary、text-info、text-danger 和 text-success |
<!-- 自动更新文本颜色 --><div class="row"> <div class="text-primary">主要</div> <div class="text-success">成功</div> <div class="text-info">信息</div></div><p class="text-success">此文本表示成功。</p> |
| 文本字体粗细工具 | 用于样式化和格式化文本内容。 示例包括 font-weight-bold 和 font-weight-normal |
<p class="font-weight-bold">粗体文本。</p> |
| 文本转换工具 | 用于改变文本的外观。 示例包括 text-lowercase、text-uppercase 和 text-capitalize |
<p class="text-lowercase">所有内容均为小写</p><p class="text-uppercase">所有内容均为大写</p> |
| 可见性工具 | 允许您根据屏幕大小隐藏或显示元素。 示例包括 invisible、visible-xs 和 visible-lg |
<!– 在视口中隐藏元素 --><div class="d-lg-none">在大于 lg 的屏幕上隐藏</div><!– 在打印布局中隐藏元素 --><div class="d-print-none">仅屏幕（仅在打印时隐藏）</div> |