1、简介：

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。

2、文件结构

首先，我们看一下此框架的文件结构：

这就是Bootstrap的基本结构，从结构看，这个框架很轻量级，编译后的文件可以快速应用于任何web项目。这里提供了编译版的CSS和JS文件 (bootstrap.)，也同时提供了编译并压缩之后的CSS和JS文件 (bootstrap.min.)。图片文件是使用 ImageOptim 工具进行压缩的，这个工具是Mac平台上用于压缩PNG文件的一个app。需要注意的是，所有的JavaScript插件都依赖jQuery库。

3、组件

Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：下拉菜单按钮组按钮下拉菜单导航导航条面包屑分页排版缩略图警告对话框进度条媒体对象 ...

4、Javascript插件

Bootstrap还自带了很多jQuery插件，这些插件为Bootstrap中的组件赋予了“生命”。其中包括：模式对话框、标签页、滚动条、弹出框等。不仅仅如此，我们还可以对Bootstrap进行定制，如定制变量、组件、JavaScript插件等。

5、HTML模板

最后，我们来看一下基本的HTML模板：

<!DOCTYPE html>
<html>

    <head>
        <title>
            Bootstrap 101 Template
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Bootstrap -->
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    </head>

    <body>
        <h1>
            Hello, world!
        </h1>
        <script src="http://code.jquery.com/jquery.js">
        </script>
        <script src="js/bootstrap.min.js">
        </script>
    </body>

</html>

然后，我们就可以开始用Bootstrap开发任何网站和应用程序了。更多Bootstrap的相关内容请关注Bootstrap官方：http://twitter.github.io/bootstrap/index.html

如果本篇文章帮到了你，那么，请点击右侧的百度分享，让我们一起帮助更多的朋友！

前端开发框架利器Bootstrap

1、简介：

2、文件结构

3、组件

4、Javascript插件

5、HTML模板