bootstrap如何安装配置使用打开你的网页浏览器，前往 Bootstrap 的官方网站：https://getbootstrap.com/docs/3.3/getting-started/

左手的ㄟ右手 2024-03-02 09:36 9阅读 0赞

bootstrap如何安装配置使用

打开你的网页浏览器，前往 Bootstrap 的官方网站：https://getbootstrap.com/docs/3.3/getting-started/

在网站的页面中，向下滚动到 “Download bootstrap” 部分。

在该部分，你可以看到一个蓝色的按钮，上面写着 “Download Bootstrap”。点击这个按钮。

接下来，你将看到一个弹出窗口询问你是否需要下载预编译的版本或源码文件。根据你的需求选择下载预编译的版本或源码文件，点击相应的按钮。

下载将会自动开始。根据你的浏览器设置，可能会弹出一个对话框，询问你保存文件的位置。选择一个你喜欢保存文件的位置，并点击 “保存”。

等待下载完成。

下载完成后，你会得到一个压缩文件（通常是ZIP格式）。解压缩该文件后，你将获得Bootstrap 3.3.7的文件和文件夹。

引导 CDN  
jsDelivr 的人们慷慨地为 Bootstrap 的 CSS 和 JavaScript 提供 CDN 支持。只需使用这些引导 CDN 链接。

使用鲍尔安装  
您还可以使用 Bower 安装和管理 Bootstrap 的 Less、CSS、JavaScript 和字体：

$ bower install bootstrap  
使用 npm 安装  
你也可以使用 npm 安装 Bootstrap：

$ npm install bootstrap@3  
require(‘bootstrap’)将 Bootstrap 的所有 jQuery 插件加载到 jQuery 对象上。模块本身不导出任何内容。您可以通过在包的顶级目录下加载文件来单独手动加载 Bootstrap 的 jQuery 插件。bootstrap/js/\*.js

Bootstrap 在以下键下包含一些额外的元数据：package.json

less- 引导程序主 Less 源文件的路径  
style- 使用默认设置预编译的 Bootstrap 非缩小 CSS 的路径（无自定义）  
使用编辑器安装  
您还可以使用 Composer 安装和管理 Bootstrap 的 Less、CSS、JavaScript 和字体：

$ composer require twbs/bootstrap  
少/少/少需要自动前缀  
Bootstrap使用Autoprefixer来处理CSS供应商前缀。如果你从它的 Less/Sass 源代码编译 Bootstrap 并且不使用我们的 Gruntfile，你需要自己将 Autoprefixer 集成到你的构建过程中。如果您使用的是预编译的 Bootstrap 或使用我们的 Gruntfile，则无需担心这一点，因为 Autoprefixer 已经集成到我们的 Gruntfile 中。

包含的内容  
Bootstrap 有两种形式可下载，您可以在其中找到以下目录和文件，对公共资源进行逻辑分组并提供编译和缩小的变体。

需要 j查询  
请注意，所有 JavaScript 插件都需要包含 jQuery，如入门模板所示。请查阅我们的bower.json，了解支持哪些版本的jQuery。

预编译引导程序  
下载后，解压缩压缩文件夹以查看（编译的）引导程序的结构。你会看到类似这样的内容：

bootstrap/  
├── css/  
│ ├── bootstrap.css  
│ ├── bootstrap.css.map  
│ ├── bootstrap.min.css  
│ ├── bootstrap.min.css.map  
│ ├── bootstrap-theme.css  
│ ├── bootstrap-theme.css.map  
│ ├── bootstrap-theme.min.css  
│ └── bootstrap-theme.min.css.map  
├── js/  
│ ├── bootstrap.js  
│ └── bootstrap.min.js  
└── fonts/  
├── glyphicons-halflings-regular.eot  
├── glyphicons-halflings-regular.svg  
├── glyphicons-halflings-regular.ttf  
├── glyphicons-halflings-regular.woff  
└── glyphicons-halflings-regular.woff2  
这是 Bootstrap 的最基本形式：预编译文件，可在几乎任何 Web 项目中快速使用。我们提供编译的 CSS 和 JS（），以及编译和缩小的 CSS 和 JS（）。CSS 源映射 （） 可用于某些浏览器的开发人员工具。包括来自 Glyphicon 的字体，以及可选的 Bootstrap 主题。bootstrap.\*bootstrap.min.*bootstrap.*.map

引导源代码  
Bootstrap源代码下载包括预编译的CSS，JavaScript和字体资产，以及源代码Less，JavaScript和文档。更具体地说，它包括以下内容以及更多内容：

bootstrap/  
├── less/  
├── js/  
├── fonts/  
├── dist/  
│ ├── css/  
│ ├── js/  
│ └── fonts/  
└── docs/  
└── examples/  
、 和 分别是我们的 CSS、JS 和图标字体的源代码。该文件夹包括上面预编译下载部分中列出的所有内容。该文件夹包含我们的文档和 Bootstrap 用法的源代码。除此之外，任何其他包含的文件都提供对软件包、许可证信息和开发的支持。less/js/fonts/dist/docs/examples/

编译 CSS 和 JavaScript  
Bootstrap使用Grunt作为其构建系统，并提供了使用框架的便捷方法。这就是我们编译代码、运行测试等的方式。

安装咕噜声  
要安装 Grunt，您必须首先下载并安装 node.js（其中包括 npm）。npm 代表节点打包模块，是一种通过 node.js 管理开发依赖关系的方法。

然后，从命令行：  
使用 进行全局安装 。grunt-clinpm install -g grunt-cli  
导航到根目录，然后运行 。npm 将查看 package.json 文件，并自动安装其中列出的必要本地依赖项。/bootstrap/npm install  
完成后，您将能够运行从命令行提供的各种 Grunt 命令。

可用的咕噜声命令  
grunt dist（只需编译CSS和JavaScript）  
使用编译和缩小的 CSS 和 JavaScript 文件重新生成目录。作为引导程序用户，这通常是您想要的命令。/dist/

grunt watch（观看）  
监视较少的源文件，并在保存更改时自动将其重新编译为 CSS。

grunt test（运行测试）  
运行 JSHint 并在 PhantomJS 中无头运行 QUnit 测试。

grunt docs（构建和测试文档资产）  
构建和测试 CSS、JavaScript 和其他资产，这些资产通过 在本地运行文档时使用。bundle exec jekyll serve

grunt（绝对构建所有内容并运行测试）  
编译和缩小 CSS 和 JavaScript，构建文档网站，针对文档运行 HTML5 验证器，重新生成定制器资产等。需要杰基尔。通常只有在你对Bootstrap本身进行黑客攻击时才需要。

故障 排除  
如果在安装依赖项或运行 Grunt 命令时遇到问题，请先删除 npm 生成的目录。然后，重新运行 。/node\_modules/npm install

基本模板  
从这个基本的 HTML 模板开始，或修改这些示例。我们希望您能自定义我们的模板和示例，并根据您的需求进行调整。

复制下面的 HTML 以开始使用最小的引导程序文档。

Bootstrap 101 Template

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

## Hello, world! ##

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    
    <script src="js/bootstrap.min.js"></script>