Bootstrap
Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。

Bootstrap 是一个用于 HTML、CSS 和 JS 开发的开源工具包。利用 Bootstrap 提供的 Sass 变量和混合（mixins）、响应式栅格系统、可扩展的预制组件以及强大的 jQuery 插件，能够让你快速地开发出产品原型或构建整个 app。

快速入门
是否还不知道如何快速将 Bootstrap 引入到你的项目中？使用 StackPath 支持的 BootstrapCDN 就 O 了。使用包管理工具还是下载源文件？请前往下载页面了解详情。

CSS 文件
将 Bootstrap 的 CSS 文件以标签的形式添加到标签中，并放置在所有其它样式表之前就行了。

Copy

JS 文件 Bootstrap 所提供的许多组件都依赖 JavaScript 才能运行。具体来说，这些组件都依赖 jQuery、Popper.js 以及我们自己的 JavaScript 插件。将以下

我们使用的是 jQuery 的 slim（瘦身）版本，完整版也是支持的。

Copy

是否想知道哪些组件明确的依赖 jQuery、我们自己的 JS 插件以及 Popper.js？单击下面的“显示依赖 JavaScript 的组件列表”链接了解详情。如果你对一般的页面结构还不了解，请继续了解示例页面模板。

Bootstrap 所提供的 bootstrap.bundle.js 和 bootstrap.bundle.min.js 文件中包含了 Popper，但不包含 jQuery。有关 Bootstrap 中包含了哪些内容，请参阅内容章节。

显示依赖 JavaScript 的组件列表
最基本的模板
请确保你的页面遵循了最新的设计和开发标准。也就是说，使用 HTML5 doctype 并包含 viewport meta 标签以实现正确的响应式行为。把这些东西攒在一起，你的页面应该是这样的：

Copy
<!doctype html>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"><title>Hello, world!</title>

Hello, world!

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

以上就是一个完整的页面所需要的全部内容。请参阅布局章节或官方示例，并尝试自己动手添加组件和内容构建一个网站。

重要的全局样式
Bootstrap 使用了一些重要的全局样式和设置，你在使用它们的时候要留意，这些全局样式和设置几乎都是专门针对跨浏览器样式的标准化（normalization）为目标的。下面就让我们一起来了解吧。

HTML5 doctype
Bootstrap 要求使用 HTML5 doctype。如果不使用，你会看到一些奇怪的不完整的样式，但使用之后就不会导致任何错误了。

Copy
<!doctype html>

... 响应式 meta 标签 Bootstrap 天生就是移动设备优先的，依照这一策略，我们首先为移动设备优化代码，然后根据需要，基于 CSS 媒体查询来对组件进行缩小或放大。为了确保所有设备能够正确渲染和触摸缩放，请将响应式 viewport meta 标签添加到标签中。

Copy

你可以在最基本的模板中看到这个标签的使用示例。

Box-sizing
为了能够在 CSS 中直接调整尺寸，我们将全局的 box-sizing 从 content-box 切换为 border-box。这就确保了 padding 不会影响元素最终的宽度计算，但是这可能会导致第三方软件出现问题，例如 Google 地图和 Google 自定义搜索引擎。

虽然需要覆盖这一设置的情况极少，但是需要重置时，请使用以下代码：

Copy
.selector-for-some-widget {
box-sizing: content-box;
}
通过上述代码片段，嵌套元素（包括利用 ::before 和 ::after 生成的内容）都将继承为 .selector-for-some-widget 所设定的 box-sizing 属性。

在 CSS Tricks 网站上学习有关盒模型和 box-sizing 的知识。

Reboot
为了提升跨浏览的渲染效果，我们使用了 Reboot 用以修正跨浏览器和设备的不一致性，并且对常用 HTML 元素设置了我们认为最合适的预设样式。

下载 Bootstrap
下载 Bootstrap 以获取经过编译的 CSS 和 JavaScript 文件，以及源码。或者使用你所擅长的包管理器（例如 npm、RubyGems 等）加载 Bootstrap。

预编译的 CSS 和 JS 文件
下载 Bootstrap v4.4.1 版本的预编译文件，以便轻松地将其加入到你的项目中，其中包括：

编译并压缩（minified）之后的 CSS 文件（请参阅 CSS 文件对比)
编译并压缩（minified）之后的 JavaScript 插件
不包含文档、源文件或任何选用的 JavaScript 依赖项（jQuery 和 Popper.js）。

源码文件
通过下载 Bootstrap 的 Sass、JavaScript 和文档的源文件，使用你自己的流程工具编译 Bootstrap。这种方式需要一些额外的工具：

Sass 编译器 (Libsass or Ruby Sass is supported) ，用于编译 CSS。
Autoprefixer 用于为 CSS 添加特定浏览器厂商的属性前缀。
Bootstrap 所包含的构建工具是专门用于 Bootstrap 及其文档的开发的，如果你想使用的话，可能不满足你的需求。

BootstrapCDN
使用 BootstrapCDN 从而跳过下载，将 Bootstrap 的预编译 CSS 和 JS 文件利用缓存加载到你的项目中。

Copy

如果你使用的是我们编译过的 JavaScript，不要忘记在它之前引入 jQuery 和 Popper.js 的 CDN 版本。

Copy

软件包管理器
利用大部分流行的软件包管理器都可以将 Bootstrap 的源文件加入到任何项目中。无论软件包管理器是哪一个，Bootstrap 总是需要一个 Sass 编译器以及 Autoprefixer 才能编译出与官方相同的文件。

npm
利用 npm 将 Bootstrap 安装到 Node.js 应用程序中：

Copy
npm install bootstrap
require(‘bootstrap’) 将把 Bootstrap 的所有 jQuery 插件加载到 jQuery 对象上。 bootstrap 模块本身不导出任何内容。你还可以手动加载 Bootstrap 的每个独立的 jQuery 插件，这些插件在根目录下，即 /js/*.js 文件。

Bootstrap 的 package.json 文件中包含了以下额外的元数据：

sass - Bootstrap 的主要 Sass 源文件路径
style - 指向 Bootstrap 的非压缩（non-minified）CSS 文件的路径，此文件是使用默认设置（没有自定义）并预先编译而来。
yarn
利用 yarn 将 Bootstrap 安装到 Node.js 应用程序中：

Copy
yarn add bootstrap
RubyGems
将以下代码添加到你的 Gemfile 文件中，然后利用 Bundler (推荐) 和 RubyGems 工具将 Bootstrap 安装到你的 Ruby 应用程序中：

Copy
gem ‘bootstrap’, ‘~> 4.4.1’
或者，如果你不使用 Bundler，你还可以通过以下命令安装 Bootstrap 的 gem：

Copy
gem install bootstrap -v 4.4.1
参见e gem 的 README 文件以了解更多信息。

Composer
你还可以利用 Composer 安装和管理 Bootstrap 的 Sass 和 JavaScript 文件：

Copy
composer require twbs/bootstrap:4.4.1
NuGet
如果你是 .NET 开发者，你还可以利用 NuGet 来安装和管理 Bootstrap 的 CSS 或 Sass 和 JavaScript 文件：

Copy
Install-Package bootstrap
Copy
Install-Package bootstrap.sass

这是Bootstrap的最基本形式：预编译的文件，几乎可以在任何Web项目中快速使用。我们提供已编译的CSS和JS（bootstrap.），以及已编译和精简的CSS和JS（bootstrap.min.）。源映射（bootstrap.*.map）可用于某些浏览器的开发人员工具。捆绑的JS文件（bootstrap.bundle.js最小化bootstrap.bundle.min.js）包括Popper，但不包括jQuery。

CSS文件
Bootstrap包含一些选项，可以包含部分或全部已编译的CSS。

CSS文件布局内容组件实用工具
bootstrap.css
bootstrap.min.css
已包含已包含已包含已包含
bootstrap-grid.css
bootstrap-grid.min.css
唯一的网格系统不包含不包含仅Flex实用程序
bootstrap-reboot.css
bootstrap-reboot.min.css
不包含仅重启不包含不包含
JS文件
同样，我们可以选择包含部分或全部已编译的JavaScript。

JS文件波普尔 jQuery的
bootstrap.bundle.js
bootstrap.bundle.min.js
已包含不包含
bootstrap.js
bootstrap.min.js
不包含不包含

我正在跟着江哥学编程, 更多前端+区块链课程: www.it666.com

Bootstrap - 跟着李南江学编程相关推荐

从零玩转HTML5+CSS3项目实战-跟着李南江学编程
从零玩转HTML5+CSS3项目实战-跟着李南江学编程 1.CSS高级应用 1.边框圆角的基本使用 1.1什么是边框圆角:将直角的边框变为圆角的边框 1.2边框圆角的格式:border-radius: ...
前端基础1 - 跟着李南江学编程
前端基础1 - 跟着李南江学编程基础语法: ` Title <div> <dl> <dt> <a href="text.html"> ...
【深度学习】ResNet残差网络 ResidualBlock残差块实现(pytorch) | 跟着李沐学AI笔记 | ResNet18进行猫狗分类
文章目录前言一.卷积的相关计算公式(复习) 二.残差块ResidualBlock复现(pytorch) 三.残差网络ResNet18复现(pytorch) 四.直接调用方法五.具体实践(ResN ...
动手学深度学习在线课程-跟着李沐学AI
动手学深度学习在线课程-跟着李沐学AI http://courses.d2l.ai/zh-v2/ 李宏毅<机器学习>中文课程(2022) https://hub.baai.ac.cn/vi ...
C语言学习——从零开始学编程（第二篇：C语言知识总括）
本节将介绍:C语言的基本框架和大部分知识的浅了解(记得先看目录哦~~) 前言--小颖的话提示:本文篇幅长,知识点多,可以分开学习,记得收藏点赞哦~ 一.数据类型 1.C语言中的关键字 2.不同类型所 ...
脑残式网络编程入门(一)：跟着动画来学TCP三次握手和四次挥手
转自即时通讯网:http://www.52im.net/ 1.引言网络编程中TCP协议的三次握手和四次挥手的问题,在面试中是最为常见的知识点之一.很多读者都知道"三次"和&quo ...
跟着c++Primer Plus学编程--- 4.13编程练习答案详解】
跟着c++Primer Plus学编程--- 4.13编程练习答案详解 1.编写一个C++程序,如下述输出事例所示那样请求并显示信息. 2.修改程序清单4.4,使用C++ string 类而不是 ch ...
在 B 站学编程，真滴牛逼！
互联网让信息更容易触达,但是由于信息过于庞大,筛选出有价值的信息所花费的精力也会很大. 众所周知,B 站是一个学习的网站,很多人在 B 站上大学.考研.学编程,但 B 站的视频资源那更是五花八门,要从 ...
第五章处理器拦截器详解——跟着开涛学SpringMVC
5.1.处理器拦截器简介 Spring Web MVC的处理器拦截器(如无特殊说明,下文所说的拦截器即处理器拦截器)类似于Servlet开发中的过滤器Filter,用于对处理器进行预处理和后处理. ...

Bootstrap - 跟着李南江学编程

Hello, world!

Bootstrap - 跟着李南江学编程相关推荐

最新文章

热门文章