Bootstrap（6）前端-CSDN博客

本文链接：https://blog.csdn.net/qq_34516746/article/details/124596691

Bootstrap是一款由Twitter开发的前端框架，它基于HTML、CSS和JavaScript，提供了优雅的HTML规范和响应式设计。Bootstrap4引入了Sass、改进的网格系统、卡片组件等，支持现代浏览器，不再支持IE8。使用Bootstrap可以通过快速导入CSS和JS文件，利用预定义的组件快速搭建页面。Bootstrap的网格系统允许创建12列的响应式布局，还有导航栏、轮播图等丰富的UI组件，大大简化了网页开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 介绍

Bootstrap是美国**Twitter公司**的设计师Mark Otto和Jacob Thornton合作**基于HTML、CSS、JavaScript**开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。 Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。

boostrap中文网：https://www.bootcss.com/
boostrap4下载地址：https://v4.bootcss.com/docs/getting-started/download/

目前使用较广的是版本2、3和4，其中2的最新版本的是2.3.2，3的最新版本是3.4.1，4的最新版本是4.5.1,在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版，4的最主要变化包括以下方面：
（1）从 Less 迁移到 Sass
（2）改进网格系统
（3）缺省弹性框支持
（4）Dropped wells, thumbnails, and panels for cards
（5）合并所有 HTML resets 到一个新的模块中：Reboot
（6）全新自定义选项
（7）不再支持 IE8
（8）重写所有的 JavaScript 插件
（9）改进工具提示和 popovers 的自动定位
（10）改进文档

bootstrap的优点：
（1）移动设备优先。
（2）自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。
（3）各种浏览器的支持。
（4）容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。
（5）快速开发：bootstrap给我提供了大量的样式，布局解决方案和插件库，可以让程序员从基本的样式设计和调试上解放，快速搭建项目。同时bootstrap还给我们提供了大量的常用网页组件，可以让我们直接复制代码后,简单修改即可使用。ctrl-c ctrl-v
（6）响应式设计：Bootstrap的响应式 CSS 能够自适应于台式机、平板电脑和手机。
（7）它为开发人员创建接口提供了一个简洁统一的解决方案。
（8）包含了功能强大的内置组件，易于定制。
（9）提供了基于 Web 的定制。
（10）完全开源。

2 使用方法

（1）先去官网下载相应的CSS和JavaScirpt封装的Bootstrap包

（2）解压数据，然后复制到自己的web项目中

（3）创建你要编写的页面，然后用<script>标签导入CSS和JS文件。（如果不想，也可以直接用<script>引入Bootstrap的CDN静态资源库）

普通导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>

</body>
</html>

demo
cdn方式

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-p1KAotb3W9ndluCsqePPYnjRm3c6abdnIjo0tQwYUv83VsbsYd43RuofnFAaDo0E" crossorigin="anonymous">
<!-- jQuery and JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-E5Sj1saJVFNzWWK3YIJB4LEDEEVEGaOdfmCprPDkfWUo+xkb6Ep52Q1TMEtgcFwi" crossorigin="anonymous"></script>

（4）从官网中招相应你想要的组件，然后复制相应的代码到自己的项目中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>

效果就出来了，如下图
在这里插入图片描述

总结:

（1）bootstrap是一款优秀的前端框架，它能够让我们快速搭建项目，现有大量样式库可以供我们使用，可以帮助我们实现快速开发，使用bootstrap的感受基本上就是ctrl+c然后ctrl+v ，修改一下就可以实现前端页面的快速开发。
（2）bootstrap在导入js文件时，要求顺序是先导入jQuery，然后是popper.js(包含于bootstrap.bundle.min.js中)，最后是bootstrap.min.js
（3）不同的版本对于jQuery版本的要求时不一致的，导入时要注意jQuery的版本。

3 流容器和固定容器

什么是容器？
Bootstrap 4 需要一个容器元素来包裹网站的内容，说白了就是要用一些标签来装其他的标签，这样便于我们对网页做整体的布局设计，一般我们选择用div来做容器，对应的容器类有两个，一个是固定容器 .container 一个是流容器 .container-fluid。

容器类介绍
（1）.container 类用于固定宽度并支持响应式布局的容器。
（2）.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器（会自适应变化）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h1 style="background-color: gainsboro;">我的第一个 Bootstrap 页面</h1>
    <p>这是一些文本。</p>
</div>

<div class="container-fluid">
    <h1 style="background-color: gainsboro;">我的第一个 Bootstrap 页面</h1>
    <p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p>
</div>
</body>
</html>

demo
两者区别：
（1）固定容器的响应式布局规则是当窗口大小变化时，在指定的宽度范围内使用固定的宽度。
（2）流容器的响应式布局规则是随着窗口大小的变化一同变化，横向全部占满。

固定容器的阈值如下图:
demo

4 栅格系统

Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。我们也可以根据自己的需要定义列数。

Bootstrap 4 网格系统有以下 5 个类:
（1）.col- 针对所有设备
（2）.col-sm- 平板 - 屏幕宽度等于或大于 576px
（3）.col-md- 桌面显示器 - 屏幕宽度等于或大于 768px)
（4）.col-lg- 大桌面显示器 - 屏幕宽度等于或大于 992px)
（5）.col-xl- 超大桌面显示器 - 屏幕宽度等于或大于 1200px)

网格系统规则:
（1）网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。
（2）使用行来创建水平的列组class=row。
（3）内容需要放置在列中，并且只有列可以是行的直接子节点。
（4）预定义的类如 .row 和 .col-sm-4 可用于快速制作网格布局。
（5）列通过填充创建列内容之间的间隙。这个间隙是通过 .rows 类上的负边距设置第一行和最后一列的偏移。
（6）网格列是通过跨越指定的 12 个列来创建。（例如，设置三个相等的列，需要使用三个.col-sm-4 来设置。）
（7）Bootstrap 3 和 Bootstrap 4 最大的区别在于 Bootstrap 4 现在使用 flexbox（弹性盒子）而不是浮动。 Flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列。如果您想了解有关Flexbox的更多信息，可以阅读我们的CSS Flexbox教程。

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--移动端优先的配置-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--bootstrap的样式库-->
    <link rel="stylesheet" href="css/bootstrap.min.css" >
    <!--jQuery-->
    <script src="js/jquery.min.js"></script>
    <!--popper-->
    <script src="js/bootstrap.bundle.min.js" ></script>
    <!--核心js文件-->
    <script src="js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container">

    <div class="row">
        <div class="col-sm-2" style="background-color: lavender;border:1px solid #117A8B;">
            One of three columns
        </div>
        <div class="col-sm-8" style="background-color: lavender;border:1px solid #117A8B;">
            One of three columns
        </div>
        <div class="col-sm-2" style="background-color: lavender;border:1px solid #117A8B;">
            One of three columns
        </div>
    </div>

    <div class="row">
        <div class="col-sm-1" style="background-color: lavender;border:1px solid #117A8B;">
            One of three columns
        </div>
        <div class="col-sm-4" style="background-color: lavender;border:1px solid #117A8B;">
            One of three columns
        </div>
        <div class="col-sm-7" style="background-color: lavender;border:1px solid #117A8B;">
            One of three columns
        </div>
    </div>
    
</div>
</body>
</html>

demo

5 导航栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--移动端优先的配置-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--bootstrap的样式库-->
    <link rel="stylesheet" href="css/bootstrap.min.css" >
    <!--jQuery-->
    <script src="js/jquery.min.js"></script>
    <!--popper-->
    <script src="js/bootstrap.bundle.min.js" ></script>
    <!--核心js文件-->
    <script src="js/bootstrap.min.js" ></script>
</head>
<body>
<div class="container">
    <h2>欢迎学习导航栏</h2>
    <br>
    <!-- Nav pills -->
    <ul class="nav nav-pills" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="pill" href="#home">主页</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="pill" href="#menu1">导航栏1</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="pill" href="#menu2">导航栏2</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="pill" href="#menu3">导航栏3</a>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div id="home" class="container tab-pane active" style="border: 10px solid red;"><br>
            <h3>主页</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        <div id="menu1" class="container tab-pane fade" style="border: 10px solid green;"><br>
            <h3>导航栏1</h3>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        <div id="menu2" class="container tab-pane fade" style="border: 10px solid yellow;"><br>
            <h3>导航栏2/h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
        <div id="menu3" class="container tab-pane fade" style="border: 10px solid blueviolet;"><br>
            <h3>优秀学员</h3>
            <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
        </div>
    </div>
</div>
</body>
</html>

demo

6 轮播图

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--移动端优先的配置-->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--bootstrap的样式库-->
    <link rel="stylesheet" href="css/bootstrap.min.css" >
    <!--jQuery-->
    <script src="js/jquery.min.js"></script>
    <!--popper-->
    <script src="js/bootstrap.bundle.min.js" ></script>
    <!--核心js文件-->
    <script src="js/bootstrap.min.js" ></script>
</head>
<body>

<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="3"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>江河</h5>
                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>山川</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>公路</h5>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
        </div>

        <div class="carousel-item">
            <img src="https://www.12306.cn/index/images/pic/banner0619.jpg" class="d-block w-100" alt="...">
            <div class="carousel-caption d-none d-md-block">
                <h5>火车</h5>
                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>
</body>
</html>