Bootstrap是Twitter推出的一个用于前端开发的开源工具包,它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架,今天极限为大家带来了bootstrap入门教程。
获得编译后和最小化的 CSS,JS还有图像文件是最快速的启动方法。不包含文档和原始代码文件。
获得所有 CSS 和 JavaScript 原始文件,另外还包含一个说明文档的本地版本,可以直接在 GitHub 中下载最新的版本。
2. 文件结构
在下载里你可以找到下面这些文件和内容,按类型分了组,提供了编译之后和最小化两个版本。
下载编译之后的压缩包,解压以后你会得到下面这些文件:
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 图像的软件。
要注意的是,所有 JavaScript 插件都需要用到 jQuery。
3. 包含的东西
Bootstrap 有很多东西,了解它们可以参阅 Bootstrap 使用说明。
文档章节
布局
布局的网格系统的使用
基础
基础的 HTML 元素的样式,比如文字排版,代码,表格,表单,按钮,还包含一个来自 Glyphicons 的图标集。
组件
常用界面组件的基本样式,比如像选项卡,导航栏,警示,页面标题等等。
JavaScript 插件
与组件类似,工具提示,对话框等等。
组件列表
组件 和 JavaScript 插件 提供了下面这些界面元素:
按钮组
带下拉菜单的按钮
选项卡
导航栏
标签
徽章
页头与 hero 单元。
缩略图
警示
进度条
对话框
下拉菜单
工具提示
Popovers
手风琴
旋转木马
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的应用了。