Bootstrap框架简单入门

概述

Bootstrap框架是一个开源的前端框架，主要用于构建响应式布局的网站和Web应用程序。它是由Twitter的开发者创建并维护的，可以在各种设备和屏幕尺寸上提供最佳的用户体验。

---

Bootstrap框架

简介

Bootstrap框架提供了许多用于构建网站和Web应用程序的组件和工具，包括导航栏、下拉菜单、表格、表单、按钮、图片等。它还支持响应式设计，可以根据不同的屏幕尺寸和设备类型自动调整布局和样式。

Bootstrap框架使用HTML、CSS和JavaScript编写，可以轻松地与jQuery等JavaScript库集成。它还提供了许多自定义的CSS类和JavaScript插件，使用户可以轻松地创建自己的主题和定制化功能。

中文官网: https://www.bootcss.com/

下载

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

下载解压后

将我们需要的文件引入项目

比如常用的

bootstrap.css、bootstrap.min.css

bootstrap.js、bootstrap.min.js

使用

1. 引入 Bootstrap CSS 和 JS 文件

<link rel="stylesheet" href="./css/bootstrap.min.css">

<script src="./js/bootstrap.min.js"></script>

2. 调用类名： container 响应式布局版心类

<div class="container">测试</div>

查看用法可以查看官方文档：https://v5.bootcss.com/docs/getting-started/introduction/

下面会列举几个用法

栅格系统

https://v5.bootcss.com/docs/layout/containers/

作用：响应式布局

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

例如：一行排4个盒子，则每个盒子占 3份 即可（12 / 4 = 3）

row 类：行，可以让内容在一行排（flex布局）

<!-- 
        视口宽度大于等于1200px，一行排4个
        视口宽度大于等于768px，一行排2个
        视口宽度大于等于576px，一行排1个

    -->
    <!-- 版心 -->
    <div class="container">
        <div class="row">
            <div class="col-xl-3 col-md-6 col-sm-12">1</div>
            <div class="col-xl-3 col-md-6 col-sm-12">2</div>
            <div class="col-xl-3 col-md-6 col-sm-12">3</div>
            <div class="col-xl-3 col-md-6 col-sm-12">4</div>
        </div>
    </div>

全局样式

按钮

https://v5.bootcss.com/docs/components/buttons/

类名

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

<button class="btn">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-link">按钮</button>
<button class="btn btn-link btn-lg">按钮</button>
<button class="btn btn-link btn-sm">按钮</button>

表格

https://v5.bootcss.com/docs/content/tables/

表格类：

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

<table class="table table-striped table-hover">
    <tr class="table-success">
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>张三丰</td>
        <td>46</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李小花</td>
        <td>34</td>
        <td>女</td>
    </tr>
    <tr>
        <td>王二狗</td>
        <td>13</td>
        <td>男</td>
    </tr>
    <tr>
        <td>欧阳锋</td>
        <td>67</td>
        <td>男</td>
    </tr>
</table>

组件

1.引入样式表

<link rel="stylesheet" href="./css/bootstrap.min.css">

2.引入 js 文件

<script src="./js/bootstrap.min.js"></script>

3.复制结构，修改内容

注意：带js的需要导入js文件，不需要js效果的不用导入js文件

只需要在对应的功能界面复制代码，粘贴进自己的页面，再修改内容即可，自己后期根据需求修改

导航栏：https://v5.bootcss.com/docs/components/navbar/

轮播图：https://v5.bootcss.com/docs/components/carousel/

…

字体图标

下载

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

解压后

注意：

新版本的 bootstrap-icons.css文件与.svg文件一同在根目录下，在一堆svg文件中间要留神找

老版本的 bootstrap-icons.css文件直接在font目录下

使用

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

对应的图标：https://icons.bootcss.com/

找到图标后，点击

<i class="bi-android2"></i>

Bootstrap还有很多的属性和样式方法可以参考官方文档

https://www.bootcss.com/