首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >2019-08-06 vue中使用bootstrapt jquery less

2019-08-06 vue中使用bootstrapt jquery less

作者头像
用户4344670
发布2019-08-28 11:18:25
3560
发布2019-08-28 11:18:25
举报
文章被收录于专栏:vue的实战vue的实战
  • 第一步: 安装 jquery
npm install jquery --save-dev
  • 第二步: 在main.js 中引入
import $ from 'jquery'
  • 第三步:在build中 webpack.base.config.js 引入
var webpack=require('webpack');
  • 第四步:在build中webpack.base.conf.js的module.exports中添加
plugins: [ 
    new webpack.ProvidePlugin({ 
     $:"jquery", 
     jQuery:"jquery", 
     "windows.jQuery":"jquery"
    }) 
   ],
  • 第五步:再下载bootstrapt
npm install bootstrap@3 --save-dev
  • 第六步:在main.js 中引入 bootstrapt.js 和bootstrapt.css文件
import "bootstrap/dist/css/bootstrap.min.css"
import "bootstrap/dist/js/bootstrap.min.js"
  • 第七步: 在组件中使用
  <button type="button" class="btn btn-default" @click="click">(默认样式)Default</button>

        <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
        <button type="button" class="btn btn-primary">(首选项)Primary</button>

        <!-- Indicates a successful or positive action -->
        <button type="button" class="btn btn-success">(成功)Success</button>

        <!-- Contextual button for informational alert messages -->
        <button type="button" class="btn btn-info">(一般信息)Info</button>

        <!-- Indicates caution should be taken with this action -->
        <button type="button" class="btn btn-warning">(警告)Warning</button>

        <!-- Indicates a dangerous or potentially negative action -->
        <button type="button" class="btn btn-danger">(危险)Danger</button>

        <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
        <button type="button" class="btn btn-link">(链接)Link</button>

bootstrapt的效果 .png

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.08.06 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档