首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
div模拟滚动条效果示例代码
Oct 16 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
使用node.js半年来总结的 10 条经验
Aug 18 Javascript
JavaScript Math.floor方法(对数值向下取整)
Jan 09 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
什么是Vue.js框架 为什么选择它？
Oct 17 Javascript
ndm:NPM的桌面GUI应用程序
Oct 15 Javascript
值得收藏的八个常用的js正则表达式
Oct 19 Javascript
小程序input数据双向绑定实现方法
Oct 17 Javascript
JS实现可控制的进度条
Mar 25 Javascript
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
匈牙利购物网站(11) 卡塔尔购物网站(3) 智利购物网站(5) 斯洛伐克购物网站(7) 沙特阿拉伯购物网站(9) 捷克购物网站(26) 秘鲁购物网站(1) 新西兰购物网站(42) 菲律宾购物网站(13) 波兰购物网站(52)
You might like
PHP session常见问题集锦及解决办法总结
2007/03/18 PHP
PHP simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
php简单复制文件的方法
2016/05/09 PHP
thinkPHP中_initialize方法实例分析
2016/12/05 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
DOM 基本方法
2009/07/18 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
js HTML5多媒体影音播放
2016/10/17 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
JavaScript校验Number(4,1)格式的数字实例代码
2017/03/13 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
javascript中mouseenter与mouseover的异同
2017/06/06 Javascript
Vue.set() this.$set()引发的视图更新思考及注意事项
2018/08/30 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
实用自动化运维Python脚本分享
2018/06/04 Python
Python学习笔记之图片人脸检测识别实例教程
2019/03/06 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
CPB肌肤之钥美国官网：Clé de Peau Beauté
2017/09/05 全球购物
装修致歉信
2014/01/15 职场文书
志愿者服务感言
2014/02/27 职场文书
怎样填写就业意向
2014/04/02 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
银行自荐信范文
2015/03/25 职场文书
代理词怎么写
2015/05/25 职场文书
Pandas数据结构之Series的使用
2022/03/31 Python