Bootstrap安装的过程

旺仔Sec

已于 2024-04-26 15:07:32 修改

阅读量1.2k

点赞数 10

分类专栏：旺仔_实用笔记文章标签： bootstrap 前端 html

于 2024-04-26 15:04:54 首次发布

本文链接：https://blog.csdn.net/qq_50377269/article/details/138219312

版权

旺仔_实用笔记专栏收录该内容

106 篇文章 23 订阅

订阅专栏

安装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>