BootStrap5

Bootstrap5

使用Bootstrap框架快速开发响应式网页，Bootstrap是由Twitter公司开发维护的前端UI框架，他提供了大量编写好的CSS样式，允许开发者结合一定HTML结构以及Javascript，快速编写功能完善的网页及常见交互效果

1. 下载：Bootstrap中文网 (bootcss.com)
   首页—>Bootstrap3中文文档—>下载Bootstrap—>下载基于生产环境的Bootstrap

2. 引入到HTML文件。

   <link rel="stylesheet" herf="./bootstrap-3.3.7/css/bootstrap.min.css">
   

3. 在相应的标签上引入类名即可

栅格系统

栅格化是指将整个网页的宽度分成12等分，每个盒子占用的对应的份数

例如：一行排4个盒子，则每个盒子占3份即可

使用：

1. 给最外部盒子添加类 container

2. 子级盒子应用类 row

3. 内部盒子应用类col-size-wdith

   size参数:

   Name	Size	Width
   Extra	None	<576px
   Small	sm	≥576
   Medium	md	≥768px
   Large	lg	≥992px
   Extra large	xl	≥1200px
   Extra extra large	xxl	≥1400px

   wdith参数：分成几份就用12除以几；分成3份—> 12/3=4 wdith值设置为4

   插件：css代码提示插件

按钮样式

给button标签应用类：

• btn：清楚按钮/默认样式

• 按钮样式

  • btn-success：成功样式按钮
  • btn-warning：警告样式按钮
  • 

• 按钮尺寸：

  • btn-lg：大按钮
  • btn-sm：小按钮

表格样式

给table标签应用类：

• table：清除表格默认样式

• 表格样式（应用给tr 标签，使该行变色）

  • table-striped：隔行变色（斑马线表格）
  • table-success：自定义表格颜色
    • 

• table-hover：鼠标悬停行变深色

组件

1. 引入样式表
2. 引入js文件（动态效果）
3. 复制结构，修改内容

Eg：轮播图

1.引入css
2.复制轮播图代码
	
<div id="carouselExampleIndicators" class="carousel slide">
  <div class="carousel-indicators">
      //控制第几个轮播图显示，可新增，注意data-bs-slide-to 和aria-label的 值需要递增
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

3.在html尾部引入js

字体图标

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

使用：

1. 复制fonts文件夹到项目目录
2. 网页引入bootstrap-icons.css文件
3. 调用css类名（图标对应的类名）