第一次接触神奇的Bootstrap基础排版

Bootstrap是Twitter推出的一个简单灵活的，基于HTML5和CSS3的用于搭建WEB前端页面的html、css、javascript工具集。拥有友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档，自定义JQuery插件，完整的类库，基于Less等特点。Bootstrap让Web开发更迅速、更简单。

1.Bootstrap下载

官网：；新手入门：

我们可以在官网下载到Bootstrap，Bootstrap的源码，如果不想下载，还可以使用Bootstrap提供的CDN。

2.Bootstrap文件结构

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

3.Bootstrap的HTML标准模板

rush:xhtml;"> <Meta charset="utf-8"> <Meta http-equiv="X-UA-Compatible" content="IE=edge"> <Meta name="viewport" content="width=device-width,initial-scale=1">

Hello,world!

4.Bootstrap的标题

和普通的HTML页面一样，Bootstrap定义标题也是使用标签h1到h6，只不过Bootstrap覆盖了其默认的样式，使其在所有浏览器下显示的效果是一样的，定义的具体规则如下表所示：

rush:xhtml;">

标题一

标题二

标题一副标题

标题二副标题

<div class="h1">标题一

<div class="h2">标题二