yarn add bootstrap@3
如果沒(méi)有yarn則執(zhí)行下面代碼
npm install bootstrap@3
然后在Vue項(xiàng)目中的main.js引入
import Vue from 'vue'
import App from './App'
// 引入BootStrap
import 'bootstrap/dist/css/bootstrap.min.css'
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
image.png
復(fù)制粘貼到App.vue的template標(biāo)簽中去，網(wǎng)站地址https://v3.bootcss.com/examples/signin
動(dòng)手試試吧，也可以復(fù)制我的代碼進(jìn)行試驗(yàn)
<template>
<div class="container">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required="" autofocus="">
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required="">
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</template>
本文章只是簡(jiǎn)單實(shí)現(xiàn)css樣式，具體有趣的內(nèi)容還需加入jQuery一起使用見(jiàn)效果。
