在下载的压缩包中你可以看到如下的文件结构和内容。所有文件按逻辑进行分类存储，并且提供了编译和压缩两个版本的文件。

将下载的文件解压缩之后就可以看到如下的文件结构：

bootstrap/├── css/│├── bootstrap.css
│├── bootstrap.min.css
├── js/│├── bootstrap.js
│├── bootstrap.min.js
└── img/├── glyphicons-halflings.png
└── glyphicons-halflings-white.png

这就是Bootstrap的基本结构：编译后的文件可以快速应用于任何web项目。我们提供了编译版的CSS和JS文件
(bootstrap.*)，也同时提供了编译并压缩之后的CSS和JS文件
(bootstrap.min.*)。图片文件是使用ImageOptimclass="Apple-converted-space"> 工具进行压缩的，这个工具是Mac平台上用于压缩PNG文件的一个app。

请注意，所有的Javascript插件都依赖jQuery库。

Bootstrap中的HTML、CSS和JS适用于各类设备, 不过它们可以被概括成几个类别，请看本文档顶部的导航条。

文档章节

脚手架

全局性的样式文件，用于重置背景、链接样式、栅格系统等，并包含两个简单的布局结构。

基本CSS样式

常见的HTML元素 -- 如排版、代码、表格、表单、和按钮的样式。还包括class="Apple-converted-space"> Glyphicons, 一个非常棒的图标集。

组件

常见界面组件 -- 如标签、pill、导航、警告、页面标题的基本样式。

Javascript插件

和组件类似，这些Javascript插件用来实现提示(tooltip)、弹出框(popover)、模态对话框(modal)等具有交互性的组件。

组件列表

>组件库class="Apple-converted-space"> 和class="Apple-converted-space"> >Javascript插件集 一同提供了以下组件元素。

• 按钮组


• 按钮下拉菜单


• 用于导航的标签、pill、列表


• 导航条


• Labels


• Badges


• Page headers and hero
  unit


• 缩略图


• 警告对话框


• 进度条


• 模态对话框(Modals)


• 下拉菜单(Dropdowns)


• Tooltips


• Popovers


• Accordion


• Carousel


• Typeahead

在后面的文档中, 我们会挨个详细的介绍这些组件的细节。在此之前,
先来看看如何使用并定制它们。

为了把注意力完全放到使用Bootstrap上，我们先做一点儿课前准备。为了做到这一点，我们将利用一个基本的HTML模板,
其中包括我们在文件结构一章中提到的所有内容。

现在, 这里展示一个>典型的HTML文件：

1. class="L0"> html>


2. class="L1"> class="tag">


3. class="L2"> class="tag">


4. class="L3"> class="tag">


5. class="L4"> class="tag"> class="atn">name class="pun">= class="atv">"viewport" class="atn">content class="pun">= class="atv">" class="tag">>


6. class="L5"> class="tag">


7. class="L6"> class="tag">


8. class="L7"> class="tag">

   class="pln">Hello, world!



9. class="L8"> class="tag">


10. class="L9"> class="tag">


11. class="L0"> class="tag">

为了使其成为>一个Bootstrap模板, 需要包含相应的 CSS and JS 文件：

1. class="L0"> html>


2. class="L1"> class="tag">


3. class="L2"> class="tag">


4. class="L3"> class="tag">


5. class="L4"> class="tag"> class="atn">name class="pun">= class="atv">"viewport" class="atn">content class="pun">= class="atv">" class="tag">>


6. class="L5">


7. class="L6"> class="tag"> class="atn">href class="pun">= class="atv">"css/bootstrap.min.css"rel class="pun">= class="atv">"stylesheet" class="atn">media class="pun">= class="atv">"screen" class="tag">>


8. class="L7"> class="tag">


9. class="L8"> class="tag">


10. class="L9"> class="tag">

    class="pln">Hello, world!



11. class="L0"> class="tag">


12. class="L1"> class="tag">


13. class="L2"> class="tag">


14. class="L3"> class="tag">

>设置成功!class="Apple-converted-space"> 加入这两个文件,
你就可以开始用Bootstrap开发任何网站和应用程序了。

希望下面的几个案例能引导大家在基础模版的基础上做发散性思维。我们鼓励大家参考下面的案例举一反三，而不要仅仅是机械式的照抄。

Boostrap学习--官网文档,布布扣,bubuko.com