Bootstrap

入门

概述项目和内容, 及其如何开始使用一个简单的模板.

1. 下载

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

下载已编译完成文件

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

下载 Bootstrap

下载源文件

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

下载 Bootstrap 源文件

2. 文件结构

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

下载完成后, 解压压缩文件会看到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和JS(bootstrap.min.*). 图像文件使用 ImageOptim 进行压缩, 它是一个用于压缩PNG图像的Mac应用程序.

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

3. 包含的内容

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

文档部分

框架

对body属性和背景重置的全局样式, 链接样式, 网格系统(栅格系统), 和两个简单的布局.

基础CSS

常见的HTML元素, 如排版, 代码, 表格, 表单, 和按钮等样式. 还包括 Glyphicons, 一个不错的小图标集.

组件

常见界面组件, 如标签和圆角, 导航, 警示, 页面标题等基本样式.

JavaScript插件

这些JavaScript插件是互动的组成部分, 类似组件, 如提示工具, 提示框, modals(对话框)等.

组件列表

组件 和 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

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

4. HTML 模板

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
  </body>
</html>

要变为一个Bootstrap模板, 只需包含相应的 CSS 和 JS 文件:

<!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开始开发任何网站和应用程序.

5. 例子

大胆超越以下几个模板. 我们鼓励开发者对这些例子进行扩展开发, 而不是简单的把它们作为最终结果来使用.

  • 入门模板

    一个包含Bootstrap CSS和JavaScript的精简HTML文件.

  • 基本的营销类网站

    拥有一个主要消息框和三个支撑元素(supporting elements).

  • 流式布局

    使用我们最新的响应式设计元素, 通过流式网格(栅格)系统建立一个无缝的液态布局.

  • 精简版的营销类网站

    对于小项目或团队使用的简单、轻量级的营销类模板.

  • 合理导航

    带有一个等宽导航的营销类页面.

  • 登录

    一个自定义的准登录框, 较大的表单控件和灵活的布局.

  • 粘页脚(Sticky footer)

    固定高度的页脚紧贴页面底部.

  • 大屏幕轮播Banner

    一个更具交互、突出轮播的基本营销类网站.

接下来?

查看文档顶部的分类, 例子和代码片段, 或自定义Bootstrap为你即将开展的项目做一次彻底改变.

查看Bootstrap文档 自定义Bootstrap