文章彙整

使用sass定製你的bootstrap css

By Astral Web 2 years agoNo Comments
首頁  /  網站設計與開發  /  使用sass定製你的bootstrap css

 

remove-sass-folder-en 00

本篇文章要跟大家分享如何使用sass定製你的bootstrap css。

取得bootstrap sass檔案

 

首先取得bootstrap sass檔案。你可以:

  1. 到bootstrap 官網下載bootstrap-sass 檔案並解壓縮下載下來的檔案。(http://getbootstrap.com/getting-started/)
  2. 到github去克隆bootstrap-sass (https://github.com/twbs/bootstrap-sass)

 

解壓縮之後的資料夾結構如下:

bootstrap-sass/

├── assets/

│   ├── fonts/

│   ├── images/

│   ├── javascripts/

│   ├── stylesheets/

├── lib/

├── tasks/

├── templates/

├── test/

├── .gitignore

├── .travis.yml

├── CHANGELOG.md

 

assets資料夾底下的四個資料夾(fonts, images, javascripts, stylesheets)複製到我們的sass專案資料夾裡。

 

設定bootstrap sass專案

 

開啟命令元視窗(DOS小視窗)、進入專案資料夾路徑輸入底下命令。

 

compass creat

 

移除compass自動產生的sass資料夾、並將stylesheets更名為sass

remove-sass-folder

進入更名後的sass資料夾、移除compass 自動產生的css檔案、將_bootstrap.scss更名為bootstrap.scss。

rename

視需要修改調整config.rb檔案

 

http_path = “/”

css_dir = “stylesheets”

sass_dir = “sass”

images_dir = “images”

javascripts_dir = “javascripts”

 

開始自訂bootstrap css

開始監控sass

 

compass watch

 

現在我們可以開始自訂bootstrap css了

 

測試一下

我們來修改一下bootstrap 的顏色設定:

Bootstrap的顏色、字級、長度等等設定值都放在 _variables.scss 這個檔案裡。

我們要在_variables.scss裡找到brand color並修改這些設定值

$brand-primary:         #76229D;

$brand-success:         #2A8D2A;

$brand-info:            #22539D;

$brand-warning:         #FF5500;

$brand-danger:          #FF0060;

 

修改之後的結果就像這樣:

before-n-after

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。