Udacity前端開發(fā)工程師(入門)13 - Bootstrap和其他框架

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。

看前端工程師如何做

在使用圖片占位符服務提供的圖片或圖片鏈接時,你可以使用你自己的圖片,例如:

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>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 作為一個前端程序猿,下面這些站會讓你眼前一亮。 amazeui框架組建豐富 http://amazeui.org...
    歐巴冰冰閱讀 9,046評論 18 303
  • 最近實在是太累了,也不知道要在這里寫什么,但是需要堅持下去。寫作是一個好習慣,能啟發(fā)思維。 噢對了!新公司的名字是...
    Jason_Xu閱讀 127評論 0 1
  • 早晨小朋友自己起床穿衣,自己吃了電壓力鍋預約好的紅棗粥就去上學了。我歪在床上為自己找理由:妞啊,媽媽昨晚上想看圣誕...
    阿緣閱讀 168評論 0 0

友情鏈接更多精彩內(nèi)容