循序漸進BootstrapVue，開發公司門戶網站（1）---基于Bootstrap網站模闆建構元件界面

在前面随筆《使用BootstrapVue相關元件，建構Vue項目界面》概括性的介紹了BootstrapVue的使用過程，其實選用這個主要就是希望能夠用來建構一些公司門戶網站的内容，畢竟基于Bootstrap的樣式界面很多，而且可以在很多模闆網站上找到相關的Bootstrap頁面模闆，由于Vue開發元件的便利性，我們可以提取部分樣式和HTML代碼，組成我們所需要的界面效果，本篇随筆介紹如何基于Bootstrap網站模闆建構元件界面。

1、Bootstrap的樣式模闆

Bootstrap的CSS已經廣泛應用了很多年了，有着很成熟的技術體系，是以Bootstrap的頁面資源也非常的多。

我們在網上搜一下Bootstrap，就可以找到很多相關Bootstrap的模闆提供網站，從中我們可以下載下傳或者借鑒很多設計良好的界面，進而利用來開發屬于自己的公司門戶網站内容。

如下面這個我看了一下，就有非常多的公司門戶網站模闆，大多數都是基于Bootstrap樣式的。

http://www.templatesy.com/

循序漸進BootstrapVue，開發公司門戶網站（1）---基于Bootstrap網站模闆建構元件界面 - 伍華聰

我從上面下載下傳了很多網站界面進行參考，并逐漸提取一些喜歡的界面整合到頁面中去。

當然還有很多類似的網站，不過有些就需要充值下載下傳，不過免費下載下傳的也有很多的，畢竟Bootstrap的網站頁面已經很多很多的了。

一般基于Bootstrap網站模闆，都會使用一些除了Bootstrap樣式外，還會增加一些自定義的CSS檔案，如果不複雜的，我們提取出來，整合到後面開發的Vue元件中即可正常了。

如檢視一些界面後，可以看到CSS樣式應用檔案如下所示。

前面一個是标準的Bootstrap樣式，如果我們引入BootstrapVue以及導入Bootstrap樣式就會有了，font-awesome是圖示的内容，我們如果需要使用Bootstrap很多圖示，可能就需要用到，使用npm 安裝font-awesome元件并加入樣式即可。

npm install vue bootstrap-vue bootstrap

然後在main.js中引入

//BootstrapVue所需
import BootstrapVue from \'bootstrap-vue\'
Vue.use(BootstrapVue)
import \'bootstrap/dist/css/bootstrap.css\'
import \'bootstrap-vue/dist/bootstrap-vue.css\'

圖示元件font-awesome安裝

npm install font-awesome --save

然後引入

//引入font-awesome 圖示
import \'font-awesome/css/font-awesome.min.css\'

至于自定義樣式，我們在元件裡面根據需要使用即可。

2、基于Bootstrap靜态頁面建構的元件界面

前面小節介紹了引入Bootstrap和所需的一些元件，不過一般我們用BootstrapVue的内置元件就可以了，它的相關元件使用就參考官網的介紹了解即可。BootstrapVue中有很多和Bootstrap一樣的元件，不過标簽字首需要加上b-

一般的公司門戶網站，都可能包含一些相關的産品、解決方案、客戶或合作夥伴、圖檔展示、公司介紹、公司新聞等等。首頁裡面可能放置一些簡略的綜合内容，如下所示

那麼首頁面的元件界面代碼如下所示，各個子產品分别維護導入整合即可。

<template>
  <div>
    <Product />
    <Business />
    <About />
    <Partner />
    <Client />
  </div>
</template>

<script>
import About from \'./outline/about\'
import Product from \'./outline/product\'
import Business from \'./outline/business\'
import Partner from \'./outline/partner\'
import Client from \'./outline/client\'
......

如果我們需要把下面這個子產品放到頁面中去，那麼定義一個獨立的元件子產品，加入HTML和CSS樣式即可。

在元件界面中，我們可以使用b-row的元件方式定義行列，也可以使用div的class="row" 來定義對應的行列，可以達到同樣的效果，如下代碼所示。

最後把元件子產品整合起來使用即可。

類似這樣的界面展示服務或者産品的特性效果。

或者圖檔展示産品效果

都是非常友善的，隻要摘取頁面中的部分内容以及CSS樣式，然後通過網站接口動态的擷取資料進行展示即可實作背景的管理和前端的展示了。

系列文章如下所示：

循序漸進BootstrapVue，開發公司門戶網站（1）---基于Bootstrap網站模闆建構元件界面

循序漸進BootstrapVue，開發公司門戶網站（2）--- 使用wow.js動畫元件以及自定義的CSS樣式處理動态效果

循序漸進BootstrapVue，開發公司門戶網站（3）--- 結合郵件發送，收集使用者回報資訊

循序漸進BootstrapVue，開發公司門戶網站（4）--- 使用b-carousel-slide元件實作圖檔輪播以及vue-awesome-swiper實作圖檔滑動展示

循序漸進BootstrapVue，開發公司門戶網站（5）--- 使用實際資料接口代替本地Mock資料

循序漸進BootstrapVue，開發公司門戶網站（6）--- 門戶網站後端内容管理