Bootstrap简介，及如何下载、使用

发布于 2014-07-30 03:43:01 | 5215 次阅读 | 评论: 0 | 来源: 网友投递

Bootstrap Web前端CSS框架

Bootstrap简介：

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
Bootstrap是基于jQuery框架开发的，它在jQuery框架的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。
Bootstrap中包含了丰富的Web组件，根据这些组件，可以快速的搭建一个漂亮、功能完备的网站。其中包括以下组件：
下拉菜单、按钮组、按钮下拉菜单、导航、导航条、面包屑、分页、排版、缩略图、警告对话框、进度条、媒体对象等

下载Bootstrap

Bootstrap提供了几种可以帮你快速上手的方式，每种方式针对具有不同技能等级的开发者和不同的使用场景。继续阅读下面的内容，看看哪种方式适合你的需求吧。
编译后的CSS、JS和字体文件

获取Bootstrap最快速的方式就是下载经过编译和压缩的CSS、JavaScript文件，另外还包含字体文件。但是不包含文档和源码文件。
额外的下载渠道
下载源码

从GitHub可以直接下载到Bootstrap最新版本的LESS和JavaScript源码。
Clone or fork via GitHub

访问我们的Github源码库，你可以克隆整个项目，或者fork整个项目到你自己的账号。
通过Bower工具安装

通过Bower可以安装并管理Bootstrap的样式、JavaScript文件和文档。

bash$ bower install bootstrap
使用Bootstrap中文网提供的CDN加速服务

Bootstrap中文网为Bootstrap构建了自己的CDN加速服务，并且采用国内云厂商的CDN服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。Bootstrap中文网还对大量的开源工具库提供了CDN服务，请进入Open CDN 主页查看更多可用的工具库。

<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">

<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

使用国外的CDN加速服务

MaxCDN为Bootstrap免费提供了CDN加速服务。使用Bootstrap CDN提供的链接即可引入Bootstrap文件。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"><link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css"><script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

编译Bootstrap的LESS源码文件

如果你下载的是源码文件，那就需要将Bootstrap的LESS源码编译为可以使用的CSS代码，目前，Bootstrap官方仅支持Recess编译工具，这是Twitter提供的基于less.js构建的编译、代码检测工具。
包含了哪些文件

Bootstrap提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本。
Bootstrap依赖jQuery

请注意，所有 JavaScript 插件都依赖 jQuery，因此jQuery必须在Bootstrap之前引入，就像在基础模版中所展示的一样。在 bower.json文件中列出了Bootstrap所支持的jQuery版本。
预编译Bootstrap版本

下载压缩包之后，将其解压缩到任意目录即可看到以下目录结构：

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

这是最基本的Bootstrap组织形式：未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons。
Bootstrap 源码

Bootstrap源码包含了预先编译的CSS、JavaScript和图标字体文件，并且还有LESS、JavaScript和文档的源码。具体来说，主要文件组织结构如下：

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
├── docs-assets/
├── examples/
└── *.html

less/、js/ 和 fonts/ 分别包含了CSS、JS和字体图标的源码。dist/ 目录包含了上面所说的预编译Bootstrap包内的所有文件。docs-assets/、examples/ 和所有 *.html 文件是文档的源码文件。除了前面提到的这些文件，还包含package定义文件、许可证文件等。
基本模版

使用以下给出的这份超级简单的HTML模版，或者修改这些案例。我们强烈建议你对这些案例按照自己的需求进行修改，而不要简单的复制、粘贴。

拷贝并粘贴下面给出的HTML代码，这就是一个最简单的Bootstrap页面了。

<!DOCTYPE html><html>
<head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

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

<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
</body></html>

Bootstrap简介，及如何下载、使用

Bootstrap Web前端CSS框架

后端技术

前端技术

数据库

热门框架

常用IDE

其他