佈景主題 (Theme)

佈景主題 (Theme)

Bootstrap Theme - Source Code

什麼是佈景主題

Theme 是定義會影響到網站主體視覺的設定,例如

  • menu 的視覺
  • navbar 的視覺
  • border-radius、陰影(box-shadow)、border-color
  • 整體配色:background-color, panel-default-heading-bg
  • alert-styles: $alert-success-bg, $alert-info-bg, $alert-warning-bg, $alert-danger-bg

安裝 SCSS 版的 Bootstrap

npm i bootstrap-sass
bower i bootstrap-sass

延伸閱讀

挑選佈景主題原則

  • 確認版型支援 Bootstrap,並是期望中的版本。
  • 版型在所有裝置大小的呈現結果都滿意

客製化佈景主題

方法一:透過官方線上工具

http://getbootstrap.com/customize/

  • config.json

方法二:自行編譯

  1. index.html
  2. download _bootswatch.scss, _variables.scss
  3. bower i bootstrap-sass
  4. create all.scss
@import "myVariable"; // copy from _variable.scss
// all of import
@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap";
// 處理 image url
@import "../bower_components/bootstrap-sass/assets/stylesheets/bootstrap-compass";
@import "custom";
  1. build sass

練習題

  • 編譯客製化佈景主題,並修改其中變數。

其他資源

購買佈景主題

HTML5版型

免費板型

線上工具

Bootstrap Live Customizer

延伸閱讀

results for ""

    No results matching ""