几个流行的框架
Bootstrap:http://getbootstrap.com/
Foundation:http://foundation.zurb.com/
Yaml:http://www.yaml.de/
960 Grid:http://960.gs/
要使用 Bootstrap 文件，只需将 css 和 js 文件夹复制到项目文件夹即可。不要忘了将文件加入到你的 head 元素中。
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
最小化 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/
确保 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]：
<script type="text/javascript" src="js/[JQuery file name]"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
必须将每个模态的id（以及标题、图片和描述）改为唯一。然后，需要添加几个数据属性至用来启动模态的元素。在这里，该元素为作品集项目的图片。你必须添加下列属性：
data-toggle="modal" data-target="#myModal"
可以随意使用 Bootstrap 文档中的任何示例。复制下列代码并将其粘贴至你的 html 文件中，位置在</body>结束的标记上方。
