HTML学习笔记（3）

几个流行的框架

Bootstrap:http://getbootstrap.com/

Foundation:http://foundation.zurb.com/

Yaml:http://www.yaml.de/

960 Grid:http://960.gs/

Susy:http://susy.oddbird.net/

要使用 Bootstrap 文件，只需将 css 和 js 文件夹复制到项目文件夹即可。不要忘了将文件加入到你的 head 元素中。

最小化 CSS 文件

注： CSS 缩小默认不会自动发生，因此，如果你编辑了你的未缩小的 CSS 文件，但却将缩小版本加入了你的 HTML，则页面不会默认使用更新的 CSS。

可以通过http://cssminifier.com/这样的网站手动缩小你的 CSS。

也可以采用更为高级的自动工作流程来自动缩小 CSS 文件，例如，可采用你的代码编辑器的插件或采用Gruntjs这样的构建系统。

关于如何使用开发者工具快捷键的说明：

https://developer.chrome.com/devtools/docs/shortcuts#opening-devtools

要将在开发者工具中对 HTML 所做的更改保存至你的 HTML 文件，只需右键单击或 ctrl + 单击元素，然后选择“复制为 HTML”，然后用复制的文本替换文件中的 HTML。

在使用图片占位符服务提供的图片或图片链接时，你可以使用你自己的图片，例如：

placehold.it:http://placehold.it/

PlaceKitten:http://placekitten.com/

HTML 样式指南 

CSS 样式指南

Bootstrap CSS 文档

Bootstrap 的 JavaScript 文档

确保 Bootstrap 和 JQuery JavaScript 文件在你的html文件的head元素中互联。

Bootstrap JavaScript 文件需要 JQuery 1.9 或更高版本才支持。可点此下载 JQuery：http://jquery.com/download下载后，将 JQuery 文件放在 Bootstrap 文件结构的 'js' 目录下。

然后按此顺序将 JQuery 和 Bootstrap 文件链接至 html 文件的head元素，用你下载的 JQuery 文件的文件名替换[JQuery file name]：

必须将每个模态的id（以及标题、图片和描述）改为唯一。然后，需要添加几个数据属性至用来启动模态的元素。在这里，该元素为作品集项目的图片。你必须添加下列属性：

data-toggle="modal" data-target="#myModal"

可以随意使用 Bootstrap 文档中的任何示例。复制下列代码并将其粘贴至你的 html 文件中，位置在结束的标记上方。