免费AI编程助手
Bootstrap 安装
2020-07-15 09:57 更新
在本教程中，我们将学习如何使用Twitter Bootstrap v3.0编译版本创建一个基本的Bootstrap模板。
下载引导程序文件
Bootstrap有两个版本可供下载，编译的Bootstrap和Bootstrap源文件。
编译下载包含CSS和JavaScript文件的编译和缩小版本以及字体格式的图标，用于更快的Web开发
源版本包含所有CSS和JavaScript的原始源文件，以及文档的本地副本。
我们将使用编译的Bootstrap文件。 这里是下载链接。
http://getbootstrap.com/文件结构
一旦下载编译的Bootstrap，解压缩压缩文件夹。你将找到以下文件结构和内容。
bootstrap/
+-- css/
| +-- bootstrap.css
| |-- bootstrap.min.css
| |-- bootstrap-theme.css
| |-- bootstrap-theme.min.css
+-- js/
| |-- bootstrap.js
| |-- bootstrap.min.js
+-- fonts/
|-- glyphicons-halflings-regular.eot
|-- glyphicons-halflings-regular.svg
|-- glyphicons-halflings-regular.ttf
|-- glyphicons-halflings-regular.woff
Bootstrap的编译版本提供了编译的CSS和JS文件（bootstrap.*），以及编译和缩小CSS和JS（bootstrap.min.*）。
在fonts文件夹中有四个字体文件（glyphicons-halflings-regular.*）。这些字体文件包括Glyphicon Halflings集中的200个图标。
请注意，所有JavaScript插件都需要包含jQuery。
使用Bootstrap创建Web页面
打开代码编辑器并创建一个新的HTML文件，如下。
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML File</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Hello, world! W3Cschool !</h1>
</body>
</html>
要使此HTML文件成为Bootstrap模板，需包括相应的Bootstrap CSS和JS文件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
</head>
<body>
<h1>Hello, world! W3Cschool !</h1> <script src="http://code.jquery.com/jquery.min.js" rel="external nofollow" ></script>
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
注意css和Javascript的相对路径。
Staticfile CDN 推荐
国内推荐使用 Staticfile CDN 上的库：
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" target="_blank" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" rel="external nofollow" ></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js" rel="external nofollow" ></script>
- 国际推荐使用：https://cdnjs.com/
以上内容是否对您有帮助：
更多建议：