Vue和Bootstrap的整合思路詳解
更新時(shí)間：2017年06月30日 14:54:59 作者：vikings`s blog
這篇文章主要介紹了Vue和Bootstrap的整合思路詳解,需要的朋友可以參考下
ldlood同學(xué)推薦 element ui(餓了么基于vue出品)也不錯(cuò), github地址:https://github.com/ElemeFE/element. 大家也可以關(guān)注一下
我是一個(gè)剛剛接觸前端開發(fā)的新手，所以有必要記錄如何將Bootstrap和Vue進(jìn)行整合。 如果你是老手，請(qǐng)直接繞道而過。作為一個(gè)新手，里面的步驟，過程或者專業(yè)術(shù)語(yǔ)未必正確，如果你發(fā)現(xiàn)哪里錯(cuò)誤了，請(qǐng)發(fā)郵件至ztao8607@gmail.com
Vue官方不建議新手直接使用vue-cli，但我不這么看。 先使用cli跳過繁瑣的環(huán)境配置，直接看到demo效果能增強(qiáng)點(diǎn)自信心。如果上手就被一大堆的環(huán)境配置搞亂了心情，那才是得不償失呢。 恩. 至少我是這么認(rèn)為的。
使用vue-cli
如果是使用國(guó)內(nèi)網(wǎng)絡(luò)安裝，官方建議使用淘寶或者cnpmjs的鏡像。我感覺淘寶的鏡像速度不如cnpmjs的快，因?yàn)槲沂褂玫腸npmjs鏡像。
npm --registry http://r.cnpmjs.org install --global vue-cli //安裝vue-cli vue init webpack <project name> //創(chuàng)建項(xiàng)目，一般情況使用默認(rèn)配置就可以 cd <project name> npm --registry http://r.cnpmjs.org install //安裝package npm run dev
正常的話，你應(yīng)該能看到一個(gè)vue的初始化頁(yè)面。
整合bootstrap
你可以選擇下載bootstrap zip包，然后將包里面的內(nèi)容放到工程的static目錄中。也可以選擇使用bootstrap cdn資源，我建議使用cdn資源。
1.修改index.html頁(yè)面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>testproject</title> <!-- 將bootstrap cdn url放到這里 --> <link rel="stylesheet" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" rel="external nofollow" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>
你可以訪問bootstrap官方網(wǎng)站獲取到最新的cdn資源地址。
2.創(chuàng)建布局
我們創(chuàng)建一個(gè)使用bootstrap 柵格布局的例子。 在src/components目錄中創(chuàng)建一個(gè)Root.vue文件。在Root.vue文件中，我們先編輯template，創(chuàng)建一個(gè)container，然后放入一些導(dǎo)航欄。
里面布局代碼來自于bootstrap官方提供的demo
<template>
<div id="root">
<div class="container">
<div class="masthead">
<h3 class="text-muted">Look for it!</h3>
<nav>
<ul class="nav nav-justified">
<li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Projects</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Services</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Downloads</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >About</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Contact</a></li>
</ul>
</nav>
</div>
</div>
<mfooter></mfooter>
</div>
</template>
添加script代碼
<script>
export default {
name: 'root'
}
</script>
添加css樣式
因?yàn)槭菑腷ootstrap拷貝的css樣式，所以直接將css拷貝過來。
<style>
body {
padding-top: 20px;
}
.footer {
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
border-top: 1px solid #eee;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
background-color: transparent;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}
/* Customize the nav-justified links to be fill the entire space of the .navbar */
.nav-justified {
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
}
.nav-justified > li > a {
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 0;
font-weight: bold;
color: #777;
text-align: center;
background-color: #e5e5e5; /* Old browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
background-image: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background-repeat: repeat-x; /* Repeat the gradient */
border-bottom: 1px solid #d5d5d5;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
background-color: #ddd;
background-image: none;
-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
border-bottom: 0;
border-radius: 0 0 5px 5px;
}
@media (min-width: 768px) {
.nav-justified {
max-height: 52px;
}
.nav-justified > li > a {
border-right: 1px solid #d5d5d5;
border-left: 1px solid #fff;
}
.nav-justified > li:first-child > a {
border-left: 0;
border-radius: 5px 0 0 5px;
}
.nav-justified > li:last-child > a {
border-right: 0;
border-radius: 0 5px 5px 0;
}
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.masthead,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
}
</style>
修改router
注釋原先的Hello模塊，使用剛才添加的Root模塊
import Vue from 'vue'
import Router from 'vue-router'
import Root from '@/components/Root'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Header',
component: Root
}
]
})
完整的Root.vue代碼如下:
<template>
<div id="root">
<div class="container">
<div class="masthead">
<h3 class="text-muted">Look for it!</h3>
<nav>
<ul class="nav nav-justified">
<li class="active"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Home</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Projects</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Services</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Downloads</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >About</a></li>
<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Contact</a></li>
</ul>
</nav>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'root'
}
</script>
<style>
body {
padding-top: 20px;
}
.footer {
padding-top: 40px;
padding-bottom: 40px;
margin-top: 40px;
border-top: 1px solid #eee;
}
/* Main marketing message and sign up button */
.jumbotron {
text-align: center;
background-color: transparent;
}
.jumbotron .btn {
padding: 14px 24px;
font-size: 21px;
}
/* Customize the nav-justified links to be fill the entire space of the .navbar */
.nav-justified {
background-color: #eee;
border: 1px solid #ccc;
border-radius: 5px;
}
.nav-justified > li > a {
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 0;
font-weight: bold;
color: #777;
text-align: center;
background-color: #e5e5e5; /* Old browsers */
background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e5e5e5));
background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
background-image: -o-linear-gradient(top, #f5f5f5 0%, #e5e5e5 100%);
background-image: linear-gradient(to bottom, #f5f5f5 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background-repeat: repeat-x; /* Repeat the gradient */
border-bottom: 1px solid #d5d5d5;
}
.nav-justified > .active > a,
.nav-justified > .active > a:hover,
.nav-justified > .active > a:focus {
background-color: #ddd;
background-image: none;
-webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
box-shadow: inset 0 3px 7px rgba(0,0,0,.15);
}
.nav-justified > li:first-child > a {
border-radius: 5px 5px 0 0;
}
.nav-justified > li:last-child > a {
border-bottom: 0;
border-radius: 0 0 5px 5px;
}
@media (min-width: 768px) {
.nav-justified {
max-height: 52px;
}
.nav-justified > li > a {
border-right: 1px solid #d5d5d5;
border-left: 1px solid #fff;
}
.nav-justified > li:first-child > a {
border-left: 0;
border-radius: 5px 0 0 5px;
}
.nav-justified > li:last-child > a {
border-right: 0;
border-radius: 0 5px 5px 0;
}
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
/* Remove the padding we set earlier */
.masthead,
.marketing,
.footer {
padding-right: 0;
padding-left: 0;
}
}
</style>
以上所述是小編給大家介紹的Vue和Bootstrap的整合思路詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家介紹了Vue中內(nèi)置指令與自定義指令語(yǔ)法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Vue實(shí)現(xiàn)搜索結(jié)果高亮顯示關(guān)鍵字
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)搜索結(jié)果高亮顯示關(guān)鍵字，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
vue.js基于v-for實(shí)現(xiàn)批量渲染 Json數(shù)組對(duì)象列表數(shù)據(jù)示例
這篇文章主要介紹了vue.js基于v-for實(shí)現(xiàn)批量渲染 Json數(shù)組對(duì)象列表數(shù)據(jù),結(jié)合實(shí)例形式分析了vue.js使用v-for遍歷json格式數(shù)據(jù)渲染列表相關(guān)操作技巧,需要的朋友可以參考下2019-08-08
Vue中scrollIntoView()方法詳解與實(shí)際運(yùn)用舉例
這篇文章主要給大家介紹了關(guān)于Vue中scrollIntoView()方法詳解與實(shí)際運(yùn)用舉例的相關(guān)資料,該scrollIntoView()方法將調(diào)用它的元素滾動(dòng)到瀏覽器窗口的可見區(qū)域,需要的朋友可以參考下2023-12-12
vue里的axios如何獲取本地json數(shù)據(jù)
這篇文章主要介紹了vue里的axios如何獲取本地json數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
本篇文章主要介紹了在vue-cli中組件通信的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
vue 3 中watch 和watchEffect 的新用法
本篇文章主要通過 Options API 和 Composition API 對(duì)比 watch 的使用方法，讓大家快速掌握 vue3 中 watch 新用法,需要的朋友可以參考一下哦，希望對(duì)大家有所幫助2021-11-11
這篇文章主要介紹了vue-gird-layout組件封裝示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
這篇文章主要介紹了design vue 表格開啟列排序的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue去掉嚴(yán)格開發(fā),去掉vue-cli安裝時(shí)的eslint或修改配置方式
這篇文章主要介紹了vue去掉嚴(yán)格開發(fā),去掉vue-cli安裝時(shí)的eslint或修改配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04