2017年6月25日 星期日

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

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

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


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導覽列顏色產生器



from 梅問題.教學網 https://www.minwt.com/webdesign-dev/html/17826.html

沒有留言:

張貼留言