Bootstrap中文网
在简书上看到的一篇不错的关于bootstrap的文章。
另一篇Bootstrap快速入门
Bootstrap.png
1.bootstrap概述
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
- 为所有开发者、所有应用场景而设计。
- Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
作为Web前端开发框架，Bootstrap集成了HTML标记、CSS样式以及JavaScript行为，使得开发人员、设计人员不再像过去周而复始地写模板、样式、交互效果，极大地节约了时间，提高了开发效率。它使用了最新的浏览器技术，可以提供精致的网页排版方式以及表单、按钮、表格、网格 栅格化、导航等诸多元素，轻松地创造令人愉快的设计效果。
下载
下载 Bootstrap
Bootstrap （当前版本 v3.3.0）提供以下几种方式帮你快速上手，每一种方式针对具有不同技能等级的开发者和不同的使用场景。
用于生产环境的 Bootstrap
编译并压缩后的 CSS、JavaScript 和字体文件。不包含文档和源码文件。
下载 Bootstrap
Bootstrap 源码
Less、JavaScript 和 字体文件的源码，并且带有文档。需要 Less 编译器和一些设置工作。
下载源码
Sass
这是 Bootstrap 从 Less 到 Sass 的源码移植项目，用于快速地在 Rails、Compass 或 只针对 Sass 的项目中引入。
下载 Sass 项目
通过 Bower 进行安装
通过Bower可以安装并管理 Bootstrap 的Less、CSS、JavaScript和字体文件。
$ bower install bootstrap
包含的内容
Bootstrap 提供了两种形式的压缩包，在下载下来的压缩包内可以看到以下目录和文件，这些文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本。
Bootstrap 插件全部依赖 jQuery
请注意，Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本模版中所展示的一样。在bower.json文件中列出了 Bootstrap 所支持的 jQuery 版本。
预编译版
下载压缩包之后，将其解压缩到任意目录即可看到以下（压缩版的）目录结构：
这是最基本的 Bootstrap 文件组织形式：未压缩版的文件可以在任意web项目中直接使用。我们同时提供了压缩（bootstrap.min.*）与未压缩 (bootstrap.*) 的 CSS 和 JS 文件。字体图标文件来自于 Glyphicons。
Bootstrap 源码
Bootstrap 源码包含了预先编译的 CSS、JavaScript 和图标字体文件，并且还有 LESS、JavaScript 和文档的源码。具体来说，主要文件组织结构如下：
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
less/、js/和fonts/目录分别包含了 CSS、JS 和字体图标的源码。dist/目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/包含了所有文档的源码文件，examples/目录是 Bootstrap 官方提供的实例工程。除了这些，其他文件还包含 Bootstrap 安装包的定义文件、许可证文件和编译脚本等。
编译 CSS 和 JavaScript 文件
Bootstrap 使用Grunt作为编译系统，并且对外提供了一些方便的方法用于编译整个框架。下面讲解的就是如何编译源码、运行测试用例等内容。
安装 Grunt
安装 Grunt 前，你需要首先下载并安装 node.js（npm 已经包含在内）。npm 是node packaged modules的简称，它的作用是基于 node.js 管理扩展包之间的依赖关系。
然后在命令行中输入以下命令：在全局环境中安装grunt-cli：
npm install -g grunt-cli
进入/bootstrap/根目录，然后执行npm install命令。npm 将读取package.json
文件并自动安装此文件中列出的所有被依赖的扩展包。
上述步骤完成后，你就可以运行 Bootstrap 所提供的各个 Grunt 命令了。
可用的 Grunt 命令
grunt dist （仅编译 CSS 和 JavaScript 文件）
重新生成/dist/目录，并将编译压缩后的 CSS 和 JavaScript 文件放入这个目录中。作为一名 Bootstrap 用户，大部分情况下你只需要执行这一个命令。
grunt watch（监测文件的改变，并运行指定的 Grunt 任务）
监测 Less 源码文件的改变，并自动重新将其编译为 CSS 文件。
grunt test（运行测试用例）
在PhantomJS环境中运行JSHint和QUnit自动化测试用例。
grunt docs(Build & test the docs assets)
Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally viajekyll serve
grunt （重新构建所有内容并运行测试用例）
编译并压缩 CSS 和 JavaScript 文件、构建文档站点、对文档做 HTML5 校验、重新生成定制工具所需的资源文件等，都需要Jekyll工具。这些只有在你对 Bootstrap 深度研究时才有用。
除错如果你在安装依赖包或者运行 Grunt 命令时遇到了问题，请首先删除 npm 自动生成的/node_modules/目录，然后，再次运行npm install命令。
2.基本模板
使用以下给出的这份超级简单的 HTML 模版，或者修改这些实例。我们强烈建议你对这些实例按照自己的需求进行修改，而不要简单的复制、粘贴。
拷贝并粘贴下面给出的 HTML 代码，这就是一个最简单的 Bootstrap 页面了。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好，世界！</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
网友评论