我也準備寫個導(dǎo)航頁

之前寫了一篇開源的網(wǎng)址導(dǎo)航網(wǎng)站推薦玩焰,心血來潮我也打算自己寫一個網(wǎng)址導(dǎo)航網(wǎng)站嫡霞。
開源的網(wǎng)址導(dǎo)航網(wǎng)站推薦

需求分析

網(wǎng)站要足夠美觀,響應(yīng)式設(shè)計同時適應(yīng)移動設(shè)備和PC端勿侯。
這里選擇 Bootstrap4作為開發(fā)框架,要的是能夠快速開發(fā)。

Bootstrap 是全球最受歡迎的前端開源工具庫细溅,它支持 Sass 變量和 mixin、響應(yīng)式柵格系統(tǒng)儡嘶、自帶大量組件和眾多強大的 JavaScript 插件喇聊。基于 Bootstrap 提供的強大功能蹦狂,能夠讓你快速設(shè)計并定制你的網(wǎng)站誓篱。

固定思維的坑

網(wǎng)站還未完工,大概長這樣凯楔。


image

我之前只用過Bootstrap3窜骄,與Bootstrap4兩者差別不是很大。Bootstrap4也不在支持IE9(真心不想吐槽了)摆屯,同時支持Sass邻遏。

固定思維帶給我的坑
Bootstrap柵格系統(tǒng)是分成12份,圖中視頻媒體部分就是采用Bootstrap柵格系統(tǒng)去分的虐骑。但是這樣就有個問題最多只能分12個准验,我想要一行顯示更多,那怎么辦呢廷没?我想到有的框架是分成24份的糊饱,既然這樣我要不把Bootstrap的也改一改。
于是乎一頓百度操作颠黎,網(wǎng)上確實有說可以這么折騰另锋≈拖睿可是,我真的是想太復(fù)雜了夭坪。

后來才想到為什么不用flex布局呢文判?這樣很簡單就解決了。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末室梅,一起剝皮案震驚了整個濱河市戏仓,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌竞惋,老刑警劉巖柜去,帶你破解...
    沈念sama閱讀 211,884評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異拆宛,居然都是意外死亡嗓奢,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,347評論 3 385
  • 文/潘曉璐 我一進店門浑厚,熙熙樓的掌柜王于貴愁眉苦臉地迎上來股耽,“玉大人,你說我怎么就攤上這事钳幅∥矧” “怎么了?”我有些...
    開封第一講書人閱讀 157,435評論 0 348
  • 文/不壞的土叔 我叫張陵敢艰,是天一觀的道長诬乞。 經(jīng)常有香客問我,道長钠导,這世上最難降的妖魔是什么震嫉? 我笑而不...
    開封第一講書人閱讀 56,509評論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮牡属,結(jié)果婚禮上票堵,老公的妹妹穿的比我還像新娘。我一直安慰自己逮栅,他們只是感情好悴势,可當(dāng)我...
    茶點故事閱讀 65,611評論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著措伐,像睡著了一般特纤。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上废士,一...
    開封第一講書人閱讀 49,837評論 1 290
  • 那天叫潦,我揣著相機與錄音,去河邊找鬼官硝。 笑死矗蕊,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的氢架。 我是一名探鬼主播傻咖,決...
    沈念sama閱讀 38,987評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼岖研!你這毒婦竟也來了卿操?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,730評論 0 267
  • 序言:老撾萬榮一對情侶失蹤孙援,失蹤者是張志新(化名)和其女友劉穎害淤,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拓售,經(jīng)...
    沈念sama閱讀 44,194評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡窥摄,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,525評論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了础淤。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片崭放。...
    茶點故事閱讀 38,664評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖鸽凶,靈堂內(nèi)的尸體忽然破棺而出币砂,到底是詐尸還是另有隱情,我是刑警寧澤玻侥,帶...
    沈念sama閱讀 34,334評論 4 330
  • 正文 年R本政府宣布决摧,位于F島的核電站,受9級特大地震影響凑兰,放射性物質(zhì)發(fā)生泄漏掌桩。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,944評論 3 313
  • 文/蒙蒙 一票摇、第九天 我趴在偏房一處隱蔽的房頂上張望拘鞋。 院中可真熱鬧,春花似錦矢门、人聲如沸盆色。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,764評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽隔躲。三九已至,卻和暖如春物延,著一層夾襖步出監(jiān)牢的瞬間宣旱,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,997評論 1 266
  • 我被黑心中介騙來泰國打工叛薯, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留浑吟,地道東北人笙纤。 一個月前我還...
    沈念sama閱讀 46,389評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像组力,于是被迫代替她去往敵國和親省容。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,554評論 2 349

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

  • 作為一個前端程序猿燎字,下面這些站會讓你眼前一亮腥椒。 amazeui框架組建豐富 http://amazeui.org...
    歐巴冰冰閱讀 8,810評論 18 303
  • 1.前言最近有很多朋友問我有沒有相關(guān)的書籍推薦,希望能夠自學(xué)一下前端候衍。正好最近在查閱文章的時候笼蛛,發(fā)現(xiàn)有朋友已經(jīng)進行...
    AlbenXie閱讀 1,284評論 0 31
  • 前些日子從@張鑫旭微博處得一份推薦(Front-end-tutorial),號稱最全的資源教程-前端涉及的所有知識...
    谷子多閱讀 4,179評論 0 44
  • 大部分的后端會很很鄙視前端蛉鹿。我也不知道為什么滨砍,可能大部分人都會覺得腳本語言根本不算語言。 大多人 會叫我們切圖仔榨为,...
    小黑的眼閱讀 3,317評論 0 15
  • 1.前言 最近有很多朋友問我有沒有相關(guān)的書籍推薦惨好,希望能夠自學(xué)一下前端。 正好最近在查閱文章的時候随闺,發(fā)現(xiàn)有朋友已經(jīng)...
    小裁縫sun閱讀 2,373評論 5 76