bootstrap入门

1. 什么是bootstrap

bootstrap是由twitter公司开源的一个基于HTML、CSS和Javascript的UI（用户界面）框架

2. bootstrap的特点

跨设备、跨浏览器
支持响应式布局

什么是响应式布局？

一个网站支持多类终端，而不是仅仅为某一种终端所设计。比如：某个网站需要同时支持PC端、PAD端和移动端访问，由于这三端的屏幕大小和分辨率都存在较大差异，因此，不可能在三种终端上都使用一种布局模式。

提供全面的组件和css样式

bootstrap对于HTML的常用元素都做了基本的样式封装，如果需要美化某个元素，只需要在bootstrap中找到其对应元素的样式即可。
并且，bootstrap还提供了常用的js组件，因此，我们在使用bootstrap开发一些常用的功能时，我们不需要再去单独的找对应的组件。

内置jQuery插件

3. bootstrap文件结构

我们可以从bootstrap中文网找到我们需要的bootstrap版本文件，该网站提供了三个版本给用户，我们需要下载编译版使用。

下载示意图

文件结构如下所示：

一级目录

css目录

js目录

主要分为三大核心目录：css(样式)、js(脚本)、fonts(字体)。
1.css 目录中有四个css 后缀的文件，其中包含min 字样的，是压缩版本，一般使用
这个；不包含的属于没有压缩的，可以学习了解css 代码的文件；而map 后缀的文件则是
css 源码映射表，在一些特定的浏览器工具中使用。
2.js 目录包含两个文件，是未压缩和压缩的js 文件。
3.fonts 目录包含了不同后缀的字体文件。

4. bootstrap的使用

在页面内引入bootstrap中css目录下的bootstrap.css文件、jquery文件和js目录下的bootstrap.js文件

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Bootstrap 介绍</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<button class="btn btn-info">Bootstrap</button>
<script src="js/jquery.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>

Bootstrap入门