一起唱DoReMi: Bootstrap

2018年11月13日星期二

[Boostrap] 透過scss自訂個人風格的主題(Theme)

Bootstrap將常用的Navbar、Button等元件定義好css
可以讓前端的開發更加快速，是最多人使用的前端開發套件！

但有時boostrap的設定不合意要怎麼辦呢？
而且這麼多人使用bootstrap是不是有失個人風格呢？
這時你可以下載scss的版本來定義屬於自己的bootstrap模板喔！

請新建一個檔案加入bootstrap，第一種方法是把所有的元件都引用：

// Custom.scss
// Option A: Include all of Bootstrap

@import "node_modules/bootstrap/scss/bootstrap";

或者有時你只需要使用bootstrap部分的元件

// Custom.scss
// Option B: Include parts of Bootstrap

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";

以上二選一即可，另外還提供了bootstrap-grid、bootstrap-reboot兩種常用的部分元件集，像bootstrap-grid就是針對網頁排版的所有bootstrap元件集，在RWD的網站時非常便利。

接著，進入正題！例如btn-primary、text-primary等都是藍色(#007bff)，如果要自訂為粉紅色(#e83e8c)，請將重新定義的顏色寫在引用bootstrap之前，檔案內容如下：

// Custom.scss
$primary: #e83e8c;

@import "node_modules/bootstrap/scss/bootstrap";

所有的primary就會變成你定義的粉紅色(#e83e8c)，基本上所有的參數都能在_variables.scss找到原始的設定，只要加上你需要修改的參數，就可以輕鬆打造屬於你的bootstrap主題囉！

參考資料：
https://getbootstrap.com/docs/4.0/getting-started/theming/

2018年10月30日星期二

[Vue.js] 使用美化頁面的小幫手Bootstrap

Bootstrap是最常用的前端開發套件，以下介紹在Vue.js的專案內如何使用。

除了一般直接下載原始碼並在<head>加入，Bootstrap其實已經提供Vue.js使用的套件。
以下使用webpack產生的專案來說明，先創立一個新的專案，並依造下面步驟安裝。

# install related packages
npm install jquery
npm install ajv

# install boostrap-vue
npm i bootstrap-vue

創立專案的方式可參考『安裝 Vue.js』方法二。

請依照你的需求在頁面加入css檔，通常我會放在main.js，這樣所有的頁面都能使用。

# src/main.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

此時已經可以用平常的方法套用bootstrap。

不過這麼一來就跟下載原始碼沒什麼兩樣了，我們還沒發揮BootstrapVue plugin的好處，接著在main.js裡註冊bootstrap的元件。

# src/main.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue);

這時侯如果要在頁面裡加入一個button，你只要這樣寫：

# src/App.vue
<template>
    <div id="app">
        <b-button variant="primary">I am a Button</b-button>
    </div>
</template>

...

比較一下原始的寫法，是不是方便多了呢！

# src/App.vue
<template>
    <div id="app">
        <button class="btn btn-primary">I am a Button</button>
    </div>
</template>

...

另外，你也可以根據需求只載入需要的元件(Component)，例如只加入按鈕的元件。

import { Button } from 'bootstrap-vue/es/components';
Vue.use(Button);

或

import bButton from 'bootstrap-vue/es/components/button/button';
Vue.component('b-button', bButton);

更多資訊可參閱https://bootstrap-vue.js.org/。

2018年11月13日 星期二

[Boostrap] 透過scss自訂個人風格的主題(Theme)

2018年10月30日 星期二

[Vue.js] 使用美化頁面的小幫手Bootstrap

2018年11月13日星期二

2018年10月30日星期二