天天看點

兩周“學會”bootstrap搭建一個移動站點

  一直想着用bootstrap搭建網站,它的自适應、元素封裝完善、現成的Glyphicons字型圖示,省去很多的css、js、ui的工作,可以快速搭建一個客戶需要的站點。ytkah自己有一些div+css的基礎知識,是以上手bootstrap相對會比較快一些,從入手到完成項目隻用了兩周“學會”bootstrap搭建一個企業站,中間還有其他的一些事需要處理。當然做得比較粗糙,效果圖在文章尾部。

  國内的企業站一般都喜歡這樣的版式:頭部導航、幻燈片banner、次導航、文章清單、tag标簽、轉化引導、主業分類、團隊介紹、聯系方式,那我們就按這樣設計

  1.按照bootstrap中文網bootcss.com官方文檔,首先我們先引用css和js,用大的body把頁面包圍起來

  2.用導覽列<nav></nav>設計一個頭部導航,用栅格系統column分為散列,左側是首頁小房子标志,中間是logo,右側是下拉導航菜單

  4.用栅格系統column做次導航作為品牌專區、主業分類、底部轉化引導

  5.用ul - li 做一個文章清單

  6.用标簽頁nav-tabs和按鈕btn做一個tags标簽欄、團隊介紹

  ytkah力求用最少的元件來完成設計,如果想做得更美觀可以加入更多的元件。網站的欄目頁和文章頁需要的功能相對少一些,頭部、底部、轉化引導等可以共用,做得更快。

兩周“學會”bootstrap搭建一個移動站點

繼續閱讀