编程 Javascript

Vue和Bootstrap的整合思路详解

Posted in Javascript onJune 30, 2017

ldlood同学推荐 element ui(饿了么基于vue出品)也不错, github地址:https://github.com/ElemeFE/element. 大家也可以关注一下

我是一个刚刚接触前端开发的新手，所以有必要记录如何将Bootstrap和Vue进行整合。如果你是老手，请直接绕道而过。作为一个新手，里面的步骤，过程或者专业术语未必正确，如果你发现哪里错误了，请发邮件至ztao8607@gmail.com

Vue官方不建议新手直接使用vue-cli，但我不这么看。先使用cli跳过繁琐的环境配置，直接看到demo效果能增强点自信心。如果上手就被一大堆的环境配置搞乱了心情，那才是得不偿失呢。恩. 至少我是这么认为的。

使用vue-cli

如果是使用国内网络安装，官方建议使用淘宝或者cnpmjs的镜像。我感觉淘宝的镜像速度不如cnpmjs的快，因为我使用的cnpmjs镜像。

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的初始化页面。

整合bootstrap

你可以选择下载bootstrap zip包，然后将包里面的内容放到工程的static目录中。也可以选择使用bootstrap cdn资源，我建议使用cdn资源。

1.修改index.html页面

<!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" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="external nofollow" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>
</html>

你可以访问bootstrap官方网站获取到最新的cdn资源地址。

2.创建布局

我们创建一个使用bootstrap 栅格布局的例子。在src/components目录中创建一个Root.vue文件。在Root.vue文件中，我们先编辑template，创建一个container，然后放入一些导航栏。

里面布局代码来自于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样式

因为是从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="#" 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的整合思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

Vue和Bootstrap的整合思路详解

- Author -

vikings`s blog

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

关于event.cancelBubble和event.stopPropagation()的区别介绍

Dec 11 Javascript

用Mootools获得操作索引的两种方法分享

Dec 12 Javascript

php和js对数据库图片进行等比缩放示例

Apr 28 Javascript

Js中使用hasOwnProperty方法检索ajax响应对象的例子

Dec 08 Javascript

利用AngularJs实现京东首页轮播图效果

Sep 08 Javascript

如何利用JQuery实现从底部回到顶部的功能

Dec 27 Javascript

jquery 校验中国身份证号码实例详解

Apr 11 jQuery

推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)

Apr 21 jQuery

VUE 全局变量的几种实现方式

Aug 22 Javascript

ElementUI多个子组件表单的校验管理实现

Nov 07 Javascript

在Webpack中用url-loader处理图片和字体的问题

Apr 28 Javascript

jquery实现简易验证插件封装

Sep 13 jQuery

JavaScript原型继承_动力节点Java学院整理

Jun 30 #Javascript

JavaScript之排序函数_动力节点Java学院整理

Jun 30 #Javascript

JavaScript操作文件_动力节点Java学院整理

Jun 30 #Javascript

JavaScript之生成器_动力节点Java学院整理

Jun 30 #Javascript

详解vue组件通信的三种方式

Jun 30 #Javascript

JavaScript实现瀑布流图片效果

Jun 30 #Javascript

十大 Node.js 的 Web 框架（快速提升工作效率）

Jun 30 #Javascript