Vue和Bootstrap的整合之路

時間 2019-11-18

原文原文鏈接

轉自我的博客chinazt.cccss

ldlood同窗推薦 element ui(餓了麼基於vue出品)也不錯, github地址:https://github.com/ElemeFE/element. 你們也能夠關注一下 html

我是一個剛剛接觸前端開發的新手，因此有必要記錄如何將Bootstrap和Vue進行整合。若是你是老手，請直接繞道而過。做爲一個新手，裏面的步驟，過程或者專業術語未必正確，若是你發現哪裏錯誤了，請發郵件至ztao8607@gmail.com前端

Vue官方不建議新手直接使用vue-cli，但我不這麼看。先使用cli跳過繁瑣的環境配置，直接看到demo效果能加強點自信心。若是上手就被一大堆的環境配置搞亂了心情，那纔是得不償失呢。恩. 至少我是這麼認爲的。vue

使用vue-cli

若是是使用國內網絡安裝，官方建議使用淘寶或者cnpmjs的鏡像。我感受淘寶的鏡像速度不如cnpmjs的快，由於我使用的cnpmjs鏡像。webpack

npm --registry http://r.cnpmjs.org install --global vue-cli //安裝vue-cli
vue init webpack <project name> //建立項目，通常狀況使用默認配置就能夠
cd <project name>
npm --registry http://r.cnpmjs.org install //安裝package
npm run dev

正常的話，你應該能看到一個vue的初始化頁面。git

整合bootstrap

你能夠選擇下載bootstrap zip包，而後將包裏面的內容放到工程的static目錄中。也能夠選擇使用bootstrap cdn資源，我建議使用cdn資源。github

1.修改index.html頁面web

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>testproject</title>
    <!-- 將bootstrap cdn url放到這裏 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>


<body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
</body>

</html>

你能夠訪問bootstrap官方網站獲取到最新的cdn資源地址。vue-router

2.建立佈局
咱們建立一個使用bootstrap 柵格佈局的例子。在src/components目錄中建立一個Root.vue文件。在Root.vue文件中，咱們先編輯template，建立一個container，而後放入一些導航欄。vue-cli

裏面佈局代碼來自於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="#">Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Downloads</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
            </nav>
        </div>
    </div>
    <mfooter></mfooter>
  </div>
</template>

添加script代碼

<script>
export default {
  name: 'root'
}
</script>

添加css樣式

由於是從bootstrap拷貝的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="#">Home</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Downloads</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。