目的
算算玩了Django也好長時間了,從開始對模板的一無所知,但現(xiàn)在也可以將bootstrap嵌入到Django中了,記錄下整個過程周瞎,對于自己是一次總結(jié),希望也能對開始使用Django和bootstrap的朋友有一些幫助饵蒂。
bootstrap的優(yōu)越性
對于一只后臺汪声诸,不, 運維狗來講退盯,原生態(tài)的前端寫出來太難了(光布局我就頭痛得不得了)彼乌。Bootstrap就是那個讓你站在巨人肩膀上的梯子(可能說電梯比較合適O(∩_∩)O哈哈~)。
如果一下子用bootstrap太難渊迁,我建議的路徑是先看看基本的HTML+CSS慰照,可以W3C(我是覺得官方好枯燥,像手冊一樣)琉朽,可以去比如codecademy或者國內(nèi)的慕課網(wǎng)毒租,可以一邊學(xué)習(xí),一邊練習(xí)箱叁。(如果一遍看下來墅垮,不太理解惕医,很正常。Don't be frustrated, 多看幾遍算色,或者用到的時候抬伺,再去看看明白,這樣也算是一種好方式灾梦。對癥下藥峡钓,你也記住藥方子。)
如果你有基本的HTML+CSS若河,bootstrap其實就是在標(biāo)簽中加入具體的class來實現(xiàn)樣式能岩。和原生態(tài)的HTML+CSS需要先在head標(biāo)簽的style寫樣式或者引入外部樣式相比,bootstrap相當(dāng)于已經(jīng)寫好了萧福,直接用對應(yīng)的class引用就可以了捧灰。
bootstrap的使用
我是在用Django開發(fā)的過程中用bootstrap。
1. bootstrap的引用
我使用的bootstrap3统锤,在Django中,引入靜態(tài)文件非常的簡單:
- Django的設(shè)置
在settings中定義STATIC_URL炭庙、STATICFILES_DIRS饲窿。默認(rèn)Django會在每個app下的static/app查找靜態(tài)文件,如果加額外的路徑尋找則在STATICFILES_DIR中設(shè)置(我常用這個焕蹄,因為項目共用bootstrap)逾雄,此外,Django還有個STATIC_ROOT腻脏,是使用collectstatic命令收集靜態(tài)文件的作用鸦泳。
Django官方文檔
寫好后,將下載的bootstrap的文件夾拷到項目(注意不是app下)的static路徑下
注意:生產(chǎn)版本的bootstrap是沒有jquery.min.js的(如果有響應(yīng)效果永品,需要加這個)做鹰,所以需要自己下載
引用的時候,可以像官網(wǎng)說的那樣:
>
>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
或者鼎姐,使用靜態(tài)導(dǎo)入(記得在開頭加上{% load staticfiles %}
钾麸。如果有extends語句,load放在extends下)炕桨,然后導(dǎo)入:
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/bootstrap-theme.min.css' %}">
<link rel="stylesheet" href="{% static 'css/mycss.css' %}"
2. 在templates中使用
比如你需要一個navbar饭尝,也就是導(dǎo)航條,去bootstrap中組件献宫,找到導(dǎo)航條钥平,復(fù)制代碼即可。然后修改成自己的樣式即可姊途。
3. 總結(jié)
對于不熟悉前端的我涉瘾,花了很長時間來琢磨知态。發(fā)現(xiàn)理解和看真是兩碼事,總感覺內(nèi)容不多睡汹,但是想吃透肴甸,還是需要寫碼來驗證。
希望這篇能都初用到bootstrap的朋友有所幫助囚巴。