Django 中bootstrap的引用

目的

算算玩了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的朋友有所幫助囚巴。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末原在,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子彤叉,更是在濱河造成了極大的恐慌庶柿,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,817評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件秽浇,死亡現(xiàn)場離奇詭異浮庐,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)柬焕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評論 3 385
  • 文/潘曉璐 我一進(jìn)店門审残,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人斑举,你說我怎么就攤上這事搅轿。” “怎么了富玷?”我有些...
    開封第一講書人閱讀 157,354評論 0 348
  • 文/不壞的土叔 我叫張陵璧坟,是天一觀的道長。 經(jīng)常有香客問我赎懦,道長雀鹃,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,498評論 1 284
  • 正文 為了忘掉前任励两,我火速辦了婚禮黎茎,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘伐蒋。我一直安慰自己工三,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,600評論 6 386
  • 文/花漫 我一把揭開白布先鱼。 她就那樣靜靜地躺著俭正,像睡著了一般。 火紅的嫁衣襯著肌膚如雪焙畔。 梳的紋絲不亂的頭發(fā)上掸读,一...
    開封第一講書人閱讀 49,829評論 1 290
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼儿惫。 笑死澡罚,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的肾请。 我是一名探鬼主播留搔,決...
    沈念sama閱讀 38,979評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼铛铁!你這毒婦竟也來了隔显?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,722評論 0 266
  • 序言:老撾萬榮一對情侶失蹤饵逐,失蹤者是張志新(化名)和其女友劉穎括眠,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體倍权,經(jīng)...
    沈念sama閱讀 44,189評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡掷豺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,519評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了薄声。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片当船。...
    茶點故事閱讀 38,654評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖默辨,靈堂內(nèi)的尸體忽然破棺而出生年,到底是詐尸還是另有隱情,我是刑警寧澤廓奕,帶...
    沈念sama閱讀 34,329評論 4 330
  • 正文 年R本政府宣布,位于F島的核電站档叔,受9級特大地震影響桌粉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜衙四,卻給世界環(huán)境...
    茶點故事閱讀 39,940評論 3 313
  • 文/蒙蒙 一铃肯、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧传蹈,春花似錦押逼、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至沾歪,卻和暖如春漂彤,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評論 1 266
  • 我被黑心中介騙來泰國打工挫望, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留立润,地道東北人。 一個月前我還...
    沈念sama閱讀 46,382評論 2 360
  • 正文 我出身青樓媳板,卻偏偏與公主長得像桑腮,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子蛉幸,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,543評論 2 349

推薦閱讀更多精彩內(nèi)容

  • 處理靜態(tài)文件破讨,尤其是在開發(fā)時,是一件很頭疼的事情巨缘。在這篇文章中添忘,我們將會討論一些設(shè)置,目錄結(jié)構(gòu)和他們之間的相互影響...
    51reboot閱讀 1,669評論 0 1
  • 項目部署到阿里云(nginx+uwsgi)上后若锁,靜態(tài)文件加載沒有問題搁骑。但是在本地,使用開發(fā)服務(wù)器又固,卻始終加載不成功...
    蘭山小亭閱讀 5,605評論 0 9
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案仲器? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,737評論 1 92
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)仰冠,斷路器乏冀,智...
    卡卡羅2017閱讀 134,633評論 18 139
  • 你的語文老師姓戴,大家都喊老師洋只,開家長會那天我就認(rèn)識她了辆沦,還給我們準(zhǔn)備了講座,我覺得講的東西有些深奧识虚,有的...
    落英滿地閱讀 203評論 0 2