入门

项目概述、其内容以及如何开始使用简单模板。

小心!这些文档适用于 v2.3.2,不再受到官方支持。 查看最新版本的 Bootstrap!

在下载之前,请确保有一个代码编辑器(我们推荐Sublime Text 2)和一些 HTML 和 CSS 的工作知识。我们不会在这里介绍源文件,但它们可供下载。我们将重点介绍编译后的 Bootstrap 文件。

下载编译

最快的开始方式:获取我们的 CSS、JS 和图像的编译和缩小版本。没有文档或原始源文件。

下载引导程序

下载源

通过直接从 GitHub 下载最新版本,获取所有 CSS 和 JavaScript 的原始文件以及文档的本地副本。

下载引导源

在下载中,您将找到以下文件结构和内容,按逻辑对常见资产进行分组,并提供已编译和缩小的变体。

下载后,解压缩压缩文件夹以查看(已编译)Bootstrap 的结构。你会看到这样的东西:

  bootstrap / ├── css / ├── bootstrap . css
   ├── bootstrap . 分钟css
   ├── js / ├──引导程序js│├──
  引导_ _ 分钟js
   └── img / ├── glyphicons -半身人png
       └──字形-半身人-白色PNG
  
        
        
      

这是 Bootstrap 最基本的形式:编译文件,以便在几乎任何 Web 项目中快速插入使用。我们提供编译后的 CSS 和 JS ( bootstrap.*),以及编译和缩小的 CSS 和 JS ( bootstrap.min.*)。图像文件使用ImageOptim压缩,这是一个用于压缩 PNG 的 Mac 应用程序。

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

Bootstrap 为各种事情配备了 HTML、CSS 和 JS,但它们可以用Bootstrap 文档顶部可见的一些类别来概括。

文档部分

脚手架

用于主体重置类型和背景的全局样式、链接样式、网格系统和两个简单​​的布局。

基础 CSS

常见 HTML 元素的样式,如排版、代码、表格、表单和按钮。还包括Glyphicons,一个很棒的小图标集。

成分

常见界面组件的基本样式,如选项卡和药丸、导航栏、警报、页眉等。

JavaScript 插件

与组件类似,这些 JavaScript 插件是用于工具提示、弹出框、模式等的交互式组件。

组件列表

组件JavaScript 插件部分一起提供了以下界面元素:

  • 按钮组
  • 按钮下拉菜单
  • 导航选项卡、药丸和列表
  • 导航栏
  • 标签
  • 徽章
  • 页眉和英雄单元
  • 缩略图
  • 警报
  • 进度条
  • 模态
  • 下拉菜单
  • 工具提示
  • 约夏克布丁
  • 手风琴
  • 旋转木马
  • 提前输入

在未来的指南中,我们可能会更详细地逐个介绍这些组件。在此之前,请在文档中查找其中的每一个,以获取有关如何使用和自定义它们的信息。

通过对内容的简要介绍,我们可以专注于使用 Bootstrap。为此,我们将使用一个基本的 HTML 模板,其中包含我们在文件结构中提到的所有内容。

现在,看看一个典型的 HTML 文件

  1. <!DOCTYPE html>
  2. <html>
  3. <头部>
  4. <title> Bootstrap 101 模板</title>
  5. <元名称= “视口”内容= “宽度=设备宽度,初始比例=1.0” >
  6. </head>
  7. <正文>
  8. <h1>你好,世界!</h1>
  9. <script src = "https://code.jquery.com/jquery.js" ></script>
  10. </正文>
  11. </html>

要使其成为 Bootstrapped 模板,只需包含适当的 CSS 和 JS 文件:

  1. <!DOCTYPE html>
  2. <html>
  3. <头部>
  4. <title> Bootstrap 101 模板</title>
  5. <元名称= “视口”内容= “宽度=设备宽度,初始比例=1.0” >
  6. <!-- 引导程序 -->
  7. <link href = "css/bootstrap.min.css" rel = "stylesheet" media = "screen" >
  8. </head>
  9. <正文>
  10. <h1>你好,世界!</h1>
  11. <script src = "https://code.jquery.com/jquery.js" ></script>
  12. <script src = "js/bootstrap.min.js" ></script>
  13. </正文>
  14. </html>

你准备好了!添加这两个文件后,您可以开始使用 Bootstrap 开发任何站点或应用程序。

使用一些示例布局超越基本模板。我们鼓励人们对这些示例进行迭代,而不是简单地将它们用作最终结果。

  • 入门模板

    包含所有 Bootstrap CSS 和 JavaScript 的准系统 HTML 文档。

  • 基本营销网站

    具有一个主要信息的英雄单位和三个支持元素。

  • 流体布局

    使用我们新的响应式、流畅的网格系统来创建无缝的液体布局。

  • 狭义营销

    适合小型项目或团队的轻量级营销模板。

  • 合理的导航

    在修改后的导航栏中具有等宽导航链接的营销页面。

  • 登入

    准系统使用自定义、更大的表单控件和灵活的布局登录表单。

  • 粘性页脚

    将固定高度的页脚固定到用户视口的底部。

  • 旋转木马大屏幕

    基本营销网站上的一个更具互动性的即兴表演,具有突出的轮播。

前往文档以获取信息、示例和代码片段,或者进行下一个飞跃并为任何即将进行的项目自定义 Bootstrap。

访问引导文档 自定义引导程序