Bootstrap安装的过程

XPcode7

发布于 2025-10-23 14:02:52

990

安装Bootstrap

什么是Bootstrap

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。 Bootstrap框架包含如下内容： ·基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。 ·CSS：Bootstrap 自带以下特性：全局的 CSS设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。 ·组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。 ·JavaScript 插件：Bootstrap包含了十几个自定义的jQuery 插件。你可以直接包含所有的插件，也可以逐个包含这些插件。随着移动设备的普及，如何让用户通过移动设备浏览您的网站也能获得良好的视觉效果，已经是一个不可避免的问题了。Bootstrap 的响应式Web设计能够自适应于台式机、平板电脑和手机。 Bootstrap框架目前使用较广的是版本2、3和4，其中2的最新版本的是2.3.2，3的最新版本是3.3.7，4的最新版本是4.3.0 。在2018年1月下旬，Bootstrap团队发布了Bootstrap 4 正式版。本章Bootstrap框架版本使用最常用的3.3.7.

大家可以在下面的网址下载Bootstrap框架的3.3.7版本： https://v3.bootcss.com/getting-started/#download

Bootstrap 提供了两种形式的压缩包：用于生产环境的预编译版是编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。可以直接用于生产环境。下载后解压的目录结构如下：

上面展示的就是 Bootstrap 的基本文件结构：Bootstrap框架提供了编译好的 CSS 和 JS (bootstrap.) 文件，还有经过压缩的 CSS 和 JS (bootstrap.min.) 文件。同时还提供了 CSS 源码映射表 (bootstrap.*.map) ，可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标。另外一种压缩包的形式是Bootstrap 源码，它包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。解压后的目录结构如下：

less/、js/ 和 fonts/ 目录分别包含了 CSS、JS 和字体图标的源码。dist/ 目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/ 包含了所有文档的源码文件，examples/ 目录是 Bootstrap 官方提供的实例工程。除了这些，其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。我们直接下载用于生产环境的预编译版。创建一个Web项目目录，将下载的Bootstrap预编译版压缩包解压后的css、js和fonts三个目录拷贝到项目目录下。在项目目录下新建一个index.html文件，按照下面的要求配置成使用Bootstrap 框架的基本HTML模板： Bootstrap需要使用标准的html5文档结构:

1.<!DOCTYPE html>
2.<html lang="en">
3.<head>
4. <meta charset="UTF-8">
5. <title>Document</title>
6.</head>
7.<body>
8.   
9.</body>
10.</html>

Bootstrap是以我们第二章介绍的jQuery为基础的，在模板的body底部中也要引入对应的jQuery:

1.    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
2.    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

在文档中需要加入对IE浏览器版本的检查，如果IE9之下的浏览器需要在head部分引入其它的两个js文件以便兼容:

1.<!--[if lt IE 9]>
2.      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
3.      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
4.    <![endif]-->

bootstrap.min.css是全局的样式表文件，将它添加到文档的head部分:

1.    <!-- Bootstrap -->
2.    <link href="css/bootstrap.min.css" rel="stylesheet">
bootstrap.min.js是脚本文件，也将它添加到文档的body底部:
1.    <script src="js/bootstrap.min.js"></script>

下面是完整的index.html文档源码：

1.<!DOCTYPE html>
2.<html lang="zh-CN">
3.  <head>
4.    <meta charset="utf-8">
5.    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6.    <meta name="viewport" content="width=device-width, initial-scale=1">
7.    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
8.    <title>Bootstrap 101 Template</title>
9.
10.    <!-- Bootstrap -->
11.    <link href="css/bootstrap.min.css" rel="stylesheet">
12.
13.    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
14.    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
15.    <!--[if lt IE 9]>
16.      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
17.      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
18.    <![endif]-->
19.  </head>
20.  <body>
21.    <h1>你好，世界！</h1>
22.
23.    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
24.    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
25.    <!-- Include all compiled plugins (below), or include individual files as needed -->
26.    <script src="js/bootstrap.min.js"></script>
27.  </body>
28.</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-04-26，如有侵权请联系 cloudcommunity@tencent.com 删除

编译