初识 Bootstrap4（前端开发框架）

BinaryMoon

已于 2023-01-21 13:06:24 修改

阅读量1.8k

点赞数

分类专栏：前端文章标签： bootstrap 前端 javascript 框架基础

于 2023-01-19 15:18:08 首次发布

本文链接：https://blog.csdn.net/qq_44879989/article/details/128733588

版权

前端专栏收录该内容

36 篇文章 2 订阅

订阅专栏

初识 Bootstrap（前端开发框架）

参考
Bootstrap
准备工作

参考

项目	描述
Bootstrap 官方教程	https://getbootstrap.net/docs/getting-started/introduction/
百度百科	https://baike.baidu.com/
搜索引擎	Bing
哔哩哔哩	Bootstrap4从入门到实战

Bootstrap

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作，基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

Bootstrap

特点

Bootstrap 集成了各种前端组件库，用于创建图像、下拉菜单以及导航等内容。
Bootstrap 可以用于构建响应式前端布局，移动设备优先的 WEB 项目的开发中。
Bootstrap 提供了许多实用性的 jquery 插件，这些插件能使开发者快速开发 Web 中各种常见的特效。你可以逐个包含这些插件，也可以直接将这些插件全部包含。
开发人员可以通过定制 Bootstrap 中的组件、LESS 变量以及 jQuery 插件来得到一套自定义的 Bootstrap 。

获取

官网

其中：

源码包包含了编译版中的所有文件并在此基础上有所扩充，这里我将下载 Bootstrap 的编译版本。

npm install bootstrap

在 Bootstrap 官方下载页 中还存在其他获取方式，欢迎前往。

目录结构

获取到编译版本后的文件将其解压缩后得到的目录结构为（不同版本的 Bootstrap 文件的目录结构可能略有不同）：

bootstrap-4.4.1-dist
    ├── css
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   ├── bootstrap-grid.css
    │   ├── bootstrap-grid.css.map
    │   ├── bootstrap-grid.min.css
    │   ├── bootstrap-grid.min.css.map
    │   ├── bootstrap.min.css
    │   ├── bootstrap.min.css.map
    │   ├── bootstrap-reboot.css
    │   ├── bootstrap-reboot.css.map
    │   ├── bootstrap-reboot.min.css
    │   └── bootstrap-reboot.min.css.map
    └── js
        ├── bootstrap.bundle.js
        ├── bootstrap.bundle.js.map
        ├── bootstrap.bundle.min.js
        ├── bootstrap.bundle.min.js.map
        ├── bootstrap.js
        ├── bootstrap.js.map
        ├── bootstrap.min.js
        └── bootstrap.min.js.map

jQuery 与 Popper

在使用 Bootstrap 时，你需要包含 jQuery 及 Popper （ Popper 用于支持工具提示 tooltip 和弹出框 popover 功能，如果你用不到这些功能，可以不选择导入 Popper）的 JavaScript 文件。在导入时需要按照如下顺序进行导入：

jQuery > Popper > Bootstrap

当然，你可以选择使用含有 bundle 字段的 Bootstrap 的 JavaScript 文件并包含 jQuery 的 JavaScript 文件。Bootstrap 中的部分版本存在含有 bundle 字段的 Bootstrap 的 JavaScript 文件，这类文件中包含了 Popper 的 JavaScript 文件。

JS File	Popper	jQuery
bootstrap.bundle.js	包含	不包含
bootstrap.bundle.min.js	包含	不包含
bootstrap.js	不包含	不包含
bootstrap.min.js	不包含	不包含

准备工作

如果你需要在你的 WEB 项目中使用 Bootstrap，你需要进行如下的准备工作。

包含 jQuery 与 Popper

首先你需要获取 jQuery 及 Popper 文件，并将其包含于项目文件中，具体的包含规则已在本文前面讲述。

项目	描述
viewport	viewport 指视口，视口是浏览器中用来显示网页的那部分区域。
width	width 表示视口的宽度；width=device-width 用于将页面宽度设置为设备屏幕的宽度。
initial-scale	initial-scale 指初始缩放比例；initial-scale=1.0 确保网页加载时，以 1:1 的比例呈现，不会有任何的缩放。
shrink-to-fit	该属性暂不了解其功能，如果有朋友清楚，还请不吝赐教。

box-sizing

为了让 CSS 中的尺寸设置更加直观，我们将全局的 box-sizing 从 content-box 调整为 border-box。这样可以确保 padding 的设置不会影响计算元素的最终宽度，但是会导致某些第三方软件（例如 Google Maps 和 Google Custom Search Engine）出现兼容性问题。

在为数不多的情况（遇到兼容性问题时）下，你需要专门覆盖这一些设置，可以使用如下示例代码：

.selector-for-some-widget {
  box-sizing: content-box;
}

利用上述代码片段，嵌套的元素（包括通过 ::before 和 ::after 生成的内容）都将继承 .selector-for-some-widget 所指定的 box-sizing 值。

基本模板

无注释版本

在准备后，得到的 HTML 文件应与如下内容类似：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>Document</title>
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
</head>
<body>

    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
    
</body>
</html>

注释版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动适配优先 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>初识 Bootstrap</title>
    <!-- 请将 bootstrap.css 文件在其他 CSS 文件导入前进行导入 -->
    <link rel="stylesheet" href="../../lib/bootstrap-4.4.1-dist/css/bootstrap.css">
</head>
<body>
    
    <!-- 先导入 jQuery，再导入 Popper，最后导入 Bootstrap -->
    <script src="../../lib/jquery-3.6.3.js"></script>
    <script src="../../lib/popper-2.11.6.js"></script>
    <script src="../../lib/bootstrap-4.4.1-dist/js/bootstrap.js"></script>
    
</body>
</html>

BinaryMoon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
初识 Bootstrap4（前端开发框架）

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作，基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。为了确保适当的渲染和触摸缩放所有设备，添加响应的。源码包包含了编译版中的所有文件并在此基础上有所扩充，这里我将下载 Bootstrap 的编译版本。如果你需要在你的 WEB 项目中使用 Bootstrap，你需要进行如下的准备工作。文件，并将其包含于项目文件中，具体的包含规则已在本文前面讲述。
复制链接

扫一扫