奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > 开源框架 >

基于Vue的UI框架Bootstrap4使用指南

时间:2018-01-25 11:55来源:原创 作者:admin
Bootstrap也开源了基于Vue.js的UI框架,熟悉Bootstrap的小伙伴福利来了。赶快一起动手感受轻车熟路的Bootstrap,让其畅游在我们的Vue.js项目中吧! alert弹出框是:提供相关的反馈信息对典型

Bootstrap也开源了基于Vue.js的UI框架,熟悉Bootstrap的小伙伴福利来了。赶快一起动手感受轻车熟路的Bootstrap,让其畅游在我们的Vue.js项目中吧!

alert弹出框是:提供相关的反馈信息对典型用户的行为的一些可用的和灵活的警告消息。

1、Alert效果图;




源码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap+Vue的弹出框</title>
 
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@next/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
 
<!-- 添加到 vue.js 后 -->
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</head>
<body>
 
<div class="container mt-2">
<div>
<b-alert show>默认 Alert警告框</b-alert>
 
<b-alert   variant="success" show>Success成功 Alert警告框</b-alert>
<b-alert  variant="danger" show>Danger成功 Alert警告框</b-alert>
 
<b-alert variant="success"
             dismissible
             :show="showDismissibleAlert"
             @dismissed="showDismissibleAlert=false">隐藏的 Alert警告框!</b-alert>
 
<b-alert :show="dismissCountDown"
             dismissible
             variant="danger"
             @dismissed="dismissCountDown=0"
             @dismiss-count-down="countDownChanged">
<p>在 {{dismissCountDown}} 秒后将自动消失...</p>
<b-progress variant="danger"
                  :max="dismissSecs"
                  :value="dismissCountDown"
                  height="4px"></b-progress>
</b-alert>
 
<b-btn @click="showAlert" variant="danger" class="m-1">显示自动消失的弹出框</b-btn>
<b-btn @click="showDismissibleAlert=true" variant="success" class="m-1">显示和隐藏弹出框 ({{showDismissibleAlert?'visible':'hidden'}})</b-btn>
 
</div>
</div>
 
<script type="text/javascript">
new Vue({
el:'.container',
data:{
dismissSecs: 5,
      dismissCountDown: 0,
   showDismissibleAlert: false
},
 methods: {
   countDownChanged (dismissCountDown) {
     this.dismissCountDown = dismissCountDown
   },
   showAlert () {
     this.dismissCountDown = this.dismissSecs
   }
 }
})
</script>
</body>
</html>


帮助文档:


<b-alert> 文档

属性说明

属性 类型 默认值
variant String info
dismissible Boolean false
dismiss-label String Close
show Boolean or Number false

事件说明

事件 参数 描述
dismissed   警报
dismiss-count-down
dismissCountDown 秒后消失
当dismissAfterSeconds启用时,这个事件发出每一秒倒计时。

2、弹出框:


<b-btn v-b-modal.modal1 variant="success">有人在吗</b-btn>
 
<b-modal id="modal1" title="Bootstrap-Vue">
     <p class="my-4">客观请进!</p>
</b-modal>


英文文档官网:https://bootstrap-vue.js.org/

少年们,烧动起来吧! (责任编辑:admin)
顶一下
(3)
100%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-07-15 11:07

关注奔三路小程序,方便你我他