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/
4. 阅读Bootstrap框架
CSS Bootstrap: http://getbootstrap.com/css/#grid-example-basic
最小化CSS文件
使用Bootstrap文件,只需要将css和js文件夹复制到项目文件夹中,同时将文件加入到head元素中。
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
注: CSS缩小默认不会自动发生。因此,如果编辑了未缩小的CSS文件,但却将缩小版本加入HTML,则页面不会默认使用更新的CSS。
看前端工程师如何做
在使用图片占位符服务提供的图片或图片链接时,你可以使用你自己的图片,例如:
- placehold.it: http://placehold.it/
- PlaceKitten: http://placekitten.com/
CSS按照其显示的顺序加以应用。因此,如若我们希望自定义的式样不被Bootstrap中的相似的式样覆盖,我们就需要将其放在 <head></head>
中列表的最后。
交互性初探
13. 看前端工程师如何做
CSS是按照显示顺序加以应用的。
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
按照上述代码,main.css
当中的样式就不会被bootstrap
当中的样式覆盖。
14. 交互性初探
Q&A
<div class="row">
::before <!-- -->
<div class="col-md-12"></div>
::after <!-- -->
</div>