🌻Bootstrap

type
status
date
slug
summary
tags
category
icon
password
☀️
点击带三角形的标题可以展开收缩内容。

简介

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

安装

  • 下载：Bootstrap V5中文文档 → 进入中文文档 → 下载 →下载 Bootstrap 生产文件
  • 引入 Bootstrap CSS 文件
  • 调用类名： container 响应式布局版心类

使用

栅格系统

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

全局样式

按钮

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

表格

表格类名
  • table：默认样式
  • table-striped：隔行变色
  • table-success：表格颜色
  • ……
notion image
 
 
 
 
 
 

组件

  • 引入样式表
  • 引入 js 文件
  • 复制结构，修改内容

字体图标

下载

导航 / Extend：图标库 → 安装 → 下载安装包 → bootstrap-icons-1.X.X.zip

使用

  • 复制 fonts 文件夹到项目目录
  • 网页引入 bootstrap-icons.css 文件
  • 调用 CSS 类名（图标对应的类名）
 
🌻
欢迎在下方留言讨论~
SassAjax-Axios
Loading...
目录