Bootstrap使用入门

来源：互联网发布：早产儿生长曲线图软件编辑：程序博客网时间：2024/04/23 21:32

1.下载

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

以下下载文件均来至官方

下载已编译完成文件

最快速的开始方式:获得已编译和压缩版本的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>