入门介绍

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

下载已编译完成文件

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

下载 Bootstrap

下载源文件

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

下载 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 工具进行压缩的,这个工具是Mac平台上用于压缩PNG文件的一个app。

请注意,所有的JavaScript插件都依赖jQuery库。

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

文档章节

框架

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

基本CSS样式

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

组件

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

JavaScript插件

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

组件列表

组件库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>
    <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 and 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开始开发任何网站和应用程序了.

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

  • 入门模板

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

  • 固定布局模式

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

  • 流动布局

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

  • 窄屏模式

    对于小项目或团队的简单、轻量级的窄屏传统普通模式.

  • 合理导航

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

  • 登录

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

  • 粘页脚(Sticky footer)

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

  • 大屏幕轮播Banner

    一个具交互、突出轮播的基本网格网站.