vue里怎么用bootstrap
2018-04-18 08:35:31 qq_26346457 阅读数 385
2018-08-01 09:18:21 weixin_42158115 阅读数 1891

bootstrap依赖于jquery,因此使用时要下载jquery

 

cnpm install jquery --save-dev ,这样就可以安装jquery

 

然后修改webpack.base.conf.js(在build文件下)两个地方:

1:加入

?

1

var webpack = require('webpack')

2 在module.exports的里面加入

?

1

2

3

4

5

6

7

plugins: [
   new webpack.optimize.CommonsChunkPlugin('common.js'),
   new webpack.ProvidePlugin({
     jQuery: "jquery",
     $: "jquery"
   })
  ]

最后在main.js中加入import $ form 'jquery',完成jquery的引入

 

二、引入 bootstrap.css文件:

修改webpack.base.conf.js

?

1

2

3

4

5

6

7

8

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'bootstrap':resolve('src/common/bootstrap-3.3.7-dist')
    }
  }

在main.js中import引入

?

1

import 'bootstrap/css/bootstrap.min.css'
import 'bootstrap/js/bootstrap.min.js'

 

注意:修改了webpack.base.conf.js里面的内容,一定要重新npm run dev

2016-12-07 14:09:18 linshichen 阅读数 1695
<div class="md-radio-inline">
                                                        <div class="md-radio">
                                                            <input type="radio" id="rbStatus_1" name="rbStatus" checked="checked" value="1" class="md-radiobtn">
                                                            <label for="rbStatus_1">
                                                                <span></span>
                                                                <span class="check"></span>
                                                                <span class="box"></span> 是
                                                            </label>
                                                        </div>
                                                        <div class="md-radio">
                                                            <input type="radio" id="rbStatus_2" name="rbStatus" value="0" class="md-radiobtn">
                                                            <label for="rbStatus_2">
                                                                <span></span>
                                                                <span class="check"></span>
                                                                <span class="box"></span> 否
                                                            </label>
                                                        </div>

                                                    </div>

    bootstrap里面的radio怎么写!!

2017-08-09 16:35:35 Steven_ssm 阅读数 5445

Bootstrap是现在很流行的一套前端框架,美观大方而且用起来非常方便,可能很多做前端开发的新手朋友还不知道Bootstrap模版框架怎么用,今天小编就来向大家介绍一下Bootstrap的用法。

Bootstrap模版框架怎么用

工具/原料

  • Bootstrap相关文件

方法/步骤

  1. 1

    首先我们当然是需要得到Bootstrap相关文件,因为在网页中应用Bootstrap是需要引入其相关文件的。我们可以到Bootstrap官网下载。

    Bootstrap模版框架怎么用
  2. 2

    如果你的英文水平不是太好的话,没关系,我们可以到国内做的汉化比较好的Bootstrap网站去下载,最新版本都是3,属于扁平化的那种。

    Bootstrap模版框架怎么用
  3. 3

    以上两步点击下载按钮后都会跳转到一个详细下载列表,有三种Bootstrap,这里我们下载第一个就可以了。

    Bootstrap模版框架怎么用
  4. 4

    下载完成后解压,会看到文件有三个子文件夹,分别是css、font、js,里面带min的文件都是压缩后的文件,在网站上线的时候用,其他未压缩的文件我们可以在平时开发的时候用。

    Bootstrap模版框架怎么用
  5. 5

    再之后就是要用这套Bootstrap框架了,首先要做的就是建立一个html文件,你可以用任何文本编辑器,这里推荐Dreamweaver CS6,个人感觉比较好用。

    Bootstrap模版框架怎么用
  6. 6

    接下来就是要引入css文件了,要把文件的路径写正确,如果网页内用到了Bootstrap的js效果,那么必须先引入jQuery文件,因为Bootstrap的js插件都是基于jQuery的。

    Bootstrap模版框架怎么用
  7. 7

    最后就可以在body标签内应用Bootstrap相关的class了,这些都是封装好的,只要嵌套正确就是做出漂亮的网页了。

    Bootstrap模版框架怎么用
    Bootstrap模版框架怎么用
    END

注意事项

  • Bootstrap标签需要合理嵌套。
2019-01-12 12:18:11 qq_36763293 阅读数 57

本地安装

$ npm install bootstrap@3

安装jq

npm install jquery --save-dev

修改webpack.base.confi.js文件

  plugins: [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
  ],

main.js引入

import $ from 'jquery' ;
import bootstrap from 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.min.js';

 

 

 

如何在vue里引入Bootstrap

阅读数 9

1.安装jquery$npminstalljquery--save-dev2:在webpack.config.js添加内容constwebpack=require("webpack");module.exports={entry:'./index.js',output:{path:path.join(__dirn...

博文 来自: weixin_42312074

如何在vue里引入Bootstrap

阅读数 41

如何在vue里引入Bootstrap

博文 来自: czj_com

如何在vue里引入Bootstrap

阅读数 2663

1.安装jquery$npminstalljquery--save-dev2:在webpack.config.js添加内容 constwebpack=require("webpack");module.exports={  entry:'./index.js',  output:{    path:path.join(__dirn...

博文 来自: liuguiqian1

用VUE和Bootstrap搭建留言板

阅读数 1282

用VUE和Bootstrap搭建留言板,用到的库有bootstrap、vue、jqueryhtml代码class="container"id="box">class="text-center">用VUE和Bootstrap搭建留言板role="form">class="form-group">for="username"

博文 来自: yilianxinyuan

Bootstrap和vue

阅读数 5438

   特殊按钮效果开关按钮给普通按钮样式,添加属性:data-toggle="button",即可实现开关按钮案例:&lt;spanclass="btnbtn-success"data-toggle="button"&gt;示例开关按钮&lt;/span&gt;单选按钮使用按钮组,添加data-toggle="buttons"即可实现!组

博文 来自: Aary1990
没有更多推荐了,返回首页