Boostrap:
Vue.js:
首先先對要畫的網頁進行壹個原型設計，由於是公司的主頁，因此最主要的功能就是介紹這個公司的業務還有壹些新聞，在初步設計後，我的原型圖大致為：
接著就可以開始嘗試用boostrap 教程 和Vue.js來實現。
1、首先我們在 <head> 中先引入boostrap和Vue
.js，其中順序不要變：
2、 頂端文字跑馬燈效果：
然後在CSS樣式中，設置 news 的 float 和 width :
最後在js中寫跑馬燈的實現，用定時器 timer 來計時滾動，判斷復制的信息是否到達 box 的最左邊來進行無限循環。
3、 導航欄
接著用boostrap來實現壹個導航欄，導航欄壹般放在頁面的頂部。
我們可以使用 navbar 類來創建壹個標準的導航欄，後面緊跟: navbar-expand-xl|lg|md|sm 類來創建響應式的導航欄 (大屏幕水平鋪開，小屏幕垂直堆疊)。導航欄上的選項可以使用 <ul> 元素並添加 class= navbar-nav 類； 然後在 <li> 元素上添加 nav-item 類， <a> 元素上使用 nav-link 類；
導航欄可以用 bg-dark 和 navbar-dark 來設置導航的樣式：
其中， navbar-brand 類用於顯示品牌logo，如果使用圖片，可以使用 navbar-brand 類來設置圖片自適應導航欄:
效果如圖：
4、 輪播圖片 ：
查閱Boostrap教程，大概了解到有這幾個類：
實現效果如圖：
5、 網格
我們可以結合網格和 Bootstrap4 的 .card 與 .card-body 類來創建壹個簡單的卡片：
實現效果如圖：
6、 折疊
實現效果如圖：
7、 鏈接列表組
實現效果如下：
8、最後再增加壹個頁尾，然後完善下就完成了壹個公司頁面：
頁尾效果如圖：
整個網頁最後的實現效果為：
[圖片上傳失敗...(image-6307a3-1628321072949)]
1、Boostrap和vue.js提供的組件很豐富而且實現起來很容易，值得深入學習。
2、vue.js還需要再深入學習下，在這裏只用到了壹點點。