入门 · Bootstrap

在下载前，请确保有一个代码编辑器(我们建议使用 Sublime Text 2) 和了解一些HTML和CSS的知识. 我们不会在这里讨论源文件, 但他们是可提供下载的. 我们将专注于如何入门已经完成好的Bootstrap.

下载已编译完成文件

最快速的开始方式: 获得已编译和压缩版本的CSS, JS和图像. 没有文档和原文件.

下载 Bootstrap

下载源文件

从GitHub直接下载最新版本，获取所有CSS和JavaScript的源文件, 以及文档.

下载 Bootstrap 源文件

下载之后你会发现以下文件的结构和内容, 逻辑分组常用资源和提供完整版和压缩版.

下载完成后, 解压压缩文件会看到Bootstrap的结构. 你将会看到如下结构:

  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 and JS (bootstrap.min.*). 图像文件是使用 ImageOptim 进行压缩, 它是一个用来压缩PNG图像的Mac应用程序.

请注意, 所有的JavaScript插件都需要包含jQuery.

Bootstrap为各式各样的东西配备有HTML, CSS和JS, 但它们可以被概括成少数几个在Bootstrap 文档顶部可见的类别.

组件列表

总之, 组件 and JavaScript插件 提供了以下界面元素:

Button groups
Button dropdowns
Navigational tabs, pills, and lists
Navbar
Labels
Badges
Page headers and hero unit
Thumbnails
Alerts
Progress bars
Modals
Dropdowns
Tooltips
Popovers
Accordion
Carousel
Typeahead

在未来的指南中, 我们可以慢慢的通过这些组件分别介绍更多的细节. 在此之前, 文档的每条信息都是关于如何使用并定制它们.

一个简短的介绍插入到内容的方式, 我们可以专注于投入对Bootstrap的使用. 要做到这一点, 我们将利用一个基本的HTML模板, 其中包括我们所提到的文件结构.

现在, 这里是一个典型的HTML文件:

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
  </body>
</html>

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

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

设置成功! 加入这两个文件, 你就可以通过Bootstrap开始开发任何网站和应用程序.

摆脱以下几个布局示例的基础模板. 我们鼓励使用者对这些例子进行扩展开发, 而不是简单的把它们作为最终结果来使用.