Bootstrap从0-1

简介

Bootstrap是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及 JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网：https://www.bootcss.com/

使用步骤

下载

下载：Bootstrap V5中文文档 —> 进入中文文档 —> 下载 —> 下载Bootstrap生产文件

使用

1. 引入 Bootstrap CSS 文件
   <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
2. 调用类名：container 响应式布局版心类
   <div class="container">测试</div>

栅格系统

作用：响应式布局
栅格化是指将整个网页的宽度分成12等份，每个盒子占用的对应的份数
例如：一行排4个盒子，则每个盒子占3份即可（12 / 4 = 3）

• row类：行，可以让内容在一行排（Flex布局）
  响应式布局需要被row所包裹
  例如：

	<div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>

效果：

全局样式

按钮

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

类名

• btn：默认样式
• btn-success：成功
• btn-warning：警告
• 按钮尺寸：btn-lg / btn-sm

更多可前往：https://v5.bootcss.com/docs/components/buttons/

表格

<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>

<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="table-primary">...</td>
  <td class="table-secondary">...</td>
  <td class="table-success">...</td>
  <td class="table-danger">...</td>
  <td class="table-warning">...</td>
  <td class="table-info">...</td>
  <td class="table-light">...</td>
  <td class="table-dark">...</td>
</tr>

类名

• table：默认样式
• table-striped：隔行变色
• table-success：表格变色

更多可前往：https://v5.bootcss.com/docs/content/tables/

组件

1. 引入样式表
   <link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
2. 引入JS文件
   <script src="./Bootstrap/js/bootstrap.min.js"></script>
3. 复制结构，修改内容

字体图标

下载

导航 / Extend：图标库 —> 安装 —> 下载安装包

使用

1. 复制 fonts 文件夹到项目目录
2. 网页引入样式表
   <link rel="stylesheet" href="./Bootstrap/font/bootstrap-icons.css">
3. 调用 CSS 类名 （图标库对应的类名）
   <i class="bi-android2"></i>
   
   注意：随意点进图标即可看见