Bootstrap入门指南：安装与全局样式解析-优快云博客

本文链接：https://blog.youkuaiyun.com/sherrylml/article/details/45645029

本文介绍了如何安装Bootstrap，包括从官方网站下载预编译版本和使用CDN服务。通过实例展示了如何快速试用Bootstrap，并简要提及了全局CSS样式的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装和试用bootstrap

首先，在bootstrap官网下载预编译好的bootstrap。如果下载源代码，就需要使用Recess来编译LESS文件，生成可重用的CSS文件。我直接下载的bootstrap3的预编译版本。
解压后bootstrap3中有三个文件夹：css, js , fonts

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   └── 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
    └── glyphicons-halflings-regular.woff2

一下是官方文档中对以上文件的解释：

上面展示的就是 Bootstrap 的基本文件结构：预编译文件可以直接使用到任何 web 项目中。我们提供了编译好的 CSS 和 JS (bootstrap.*) 文件，还有经过压缩的 CSS 和 JS (bootstrap.min.*) 文件。同时还提供了 CSS 源码映射表 (bootstrap.*.map) ，可以在某些浏览器的开发工具中使用。同时还包含了来自 Glyphicons 的图标字体，在附带的 Bootstrap 主题中使用到了这些图标。

其实如果可以熟练使用bootstrap了，也可以不用下载，直接使用bootstrap为自己搭建的CDN家属服务就好。

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">

<!-- 可选的Bootstrap主题文件（一般不用引入） -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

下面我们使用bootstrap CDN服务尝试实现hello world的实例看看：

<!DOCTYPE html>
<html>
<head>
    <title>bootstrap实例</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</head>

<body>
    <h1>Hello, world!</h1>
</body>
</html>

全局CSS样式

详细内容见：bootstrap3官方文档-全局CSS样式

概览：
    HTML5文档类型
    移动设备优先
    排版和链接
    Normalize.css
    布局容器

Bootstrap系列一

安装和试用bootstrap

全局CSS样式