1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. TWBSColor 線上Bootstrap導覽列顏色產生器

TWBSColor 線上Bootstrap導覽列顏色產生器

2017/06/25

梅問題-TWBSColor 線上Bootstrap導覽列顏色產生器

  Bootstrap內建許多實用的網頁特效,像是導覽列也是網頁中常會使用到的,同時這一個導覽列最大的好處就是,具備了RWD的機制,因此當顯示範圍縮小時,也會依照顯示的比例調整,甚至變成手機的模式,變成大家口中的漢堡選單,而這麼好的用導覽列選單,內建卻只有二種顏色,不是深灰就是淺白,因此每次梅干都會依版型的色系再作調整,但有調整過的朋友都知道,在設定上還真的是,有點給他麻煩。


  所以梅干找了很久,發現了一個平台,是專門針更改Bootstrap導覽列的顏色,不但界面清爽,且設定上也相當的簡易好上手,只需點選色塊並從調色盤中,選擇所需的色塊,不但可即時預覽,甚至最後還會產生出CSS、SCSS、LESS的檔案,這時就可以依所需下載,因此現在就一塊來看看這個平台吧!


TWBSColor

網站名稱:TWBSColor
網站連結:https://work.smarchal.com/twbscolor/

Step1
進到「TWBSColor」的網站後,從下方的下拉選單,選擇所需的Bootstrap版本。
梅問題-TWBSColor 線上Bootstrap導覽列顏色產生器


Step2
設定好版本後,再將畫面往下拉,接著就可開始設定導覽列的顏色,而設定方式也很簡單,只需點上方的色塊,再從色盤中直接選擇,下方的導覽列就會即時的變換。
梅問題-TWBSColor 線上Bootstrap導覽列顏色產生器


Step3
接著下方的核許框是作什麼用,當不勾選時,子層就會以預設的顏色顯示。
梅問題-TWBSColor 線上Bootstrap導覽列顏色產生器


Step4
當把它勾選後,子選單的底色,就會變成剛所設定的。
梅問題-TWBSColor 線上Bootstrap導覽列顏色產生器


Step5
接著下方就會有,產生出各式各樣的原始碼,像是SCSS、SASS、LESS、CSS,選好後,再把下方的原始碼複製起來。
梅問題-TWBSColor 線上Bootstrap導覽列顏色產生器


Step6
再貼到自己的專案下。
梅問題-TWBSColor 線上Bootstrap導覽列顏色產生器


Step7
這時在navbar的地方,需將class設為「navbar-default」
梅問題-TWBSColor 線上Bootstrap導覽列顏色產生器


Step8
儲存後,再到前台看一下,哈~原來預設白色導覽列,就會變成已設定的顏色啦!是不是超EZ呀!
梅問題-TWBSColor 線上Bootstrap導覽列顏色產生器