Bootstrap 基础用法
目录
Bootstrap 基础用法什么是Bootstrap？引入Bootstrap布局容器栅格系统表格样式表单样式text样式按钮样式图标
什么是Bootstrap？
Bootstrap是一个开源的前端框架，用于对HTML和CSS代码进行封装，因此可以直接在标签中加入现成的属性来实现需求
v3官方文档库：官方书写好了大量现成的CSS样式以及组件
引入Bootstrap
cdn引入（仅演示v3版本）：
// 引入jQuery
// 引入Bootstrap的CSS文件
// 引入Bootstrap的JavaScript文件
布局容器
Bootstrap 提供了三种类型的容器：
.container、.container-fluid 和 .container-xl
.container 是一个固定宽度的容器，其宽度根据不同设备的断点进行自适应调整
.container-fluid 是一个占据全部可用宽度的容器，适用于全屏或宽度铺满的布局需求
.container-xl 是一个额外宽度的容器，可以使用它来实现超出常规容器宽度的特殊布局
栅格系统
栅格系统的基本单位是行（row）和列（column）
使用 .row 类在容器内创建行，默认12列
使用 .col-*-* 类将行划分为不同的列，其中第一个星号表示列在小屏幕上的占比，第二个星号表示列在中等屏幕上的占比
col-xs：额外小屏幕col-sm：小屏幕col-md：中等屏幕col-lg：大屏幕 使用offset可以将列向右移动指定数量的列数
表格样式
.table 类创建基本的表格
| a | a | a |
| b | b | b |
.table-striped 为表格的每一行添加斑马纹样式。.table-bordered 创建带边框的表格.table-hover 在鼠标悬停时对表格行进行高亮显示.table-sm创建紧凑型的表格.table-responsive 创建响应式的表格，当表格内容超出容器宽度时会自动出现滚动条
表单样式
仅做部分演示，完整内容请前往v3官方文档库
在Bootstrap中表单样式优先考虑.form-control，但是对radio和checkbox无效
text样式
示例：
.text-primary：设置文本颜色为主要颜色
.text-secondary：设置文本颜色为次要颜色
.text-light：设置文本颜色为浅色（通常用于暗色背景）
.text-dark：设置文本颜色为深色（通常用于亮色背景）
.font-weight-bold：设置文本字体为粗体
.font-italic：设置文本字体为斜体
.text-uppercase：将文本转换为大写字母
.text-lowercase：将文本转换为小写字母
.text-capitalize：将每个单词的首字母转换为大写
.text-left：左对齐文本
.text-right：右对齐文本
.text-center：居中对齐文本
.text-justify：两端对齐文本
.text-nowrap：防止文本换行，使其保持在一行内显示
按钮样式
示例：
btn btn-default：默认样式
btn btn-primary：首选项
btn btn-success：成功
btn btn-info：一般信息
btn btn-warning：警告
btn btn-danger：危险
btn btn-link：连接
btn btn-primary btn-lg：大按钮
btn btn-default btn-lg：大按钮
btn btn-primary：默认尺寸
btn btn-default：默认尺寸
btn btn-primary btn-sm：小按钮
btn btn-default btn-sm：小按钮
btn btn-primary btn-xs：超小按钮
btn btn-default btn-xs：超小按钮
图标
图标类不能在同一个元素上与其他类共同存在应创建一个嵌套的 标签，并将图标类应用到这个 标签上
示例：
Star
具体示例请参考官方图标库