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縮小默認不會自動發(fā)生。因此尖阔,如果編輯了未縮小的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>