百度360必应搜狗淘宝本站头条
分布式事务框架grpc框架shiro框架java日志框架框架图
当前位置：网站首页 > 技术文章 > 正文

BootstrapVue——Vue和Bootstrap的相结合，构建响应式应用更简单

ccwgpt 2024-09-15 14:57 42 浏览 0 评论

介绍

BootStrap是世界上最受欢迎的构建响应式移动优先网站的框架，Vue是当前最流行的前端框架之一，BootstrapVue则是将两者相结合，使用BootstrapVue，可以使用Vue.js和前端CSS库--Bootstrap v4在Web上构建响应式，移动优先项目。BootstrapVue具有超过40个插件和超过75个自定义组件，为Vue.js提供了最全面的Bootstrap v4组件和网格系统实现之一。具有广泛的自动WAI-ARIA（无障碍）可访问性标记！

如何获取？

Github关键字：bootstrap-vue

相关特性

  • 响应式

移动优先的响应式布局

  • 模块化

仅导入所需的功能

  • 可靠性

自动WAI-ARIA可访问性标记

  • 现代化

使用Vue.js v2.6和Bootstrap SCSS v4.3构建

  • 可配置

使用SCSS变量和全局选项创建主题

  • 开源免费

基于MIT许可证在GitHub上开源

组件介绍

BootstrapVue提供了丰富的组件和插件，已经基本满足我们日常开发的需求

  • Alerts
  • 按钮
<div>
 <b-button>I am a Button</b-button>
 <b-button href="#">I am a Link</b-button>
</div>
  • 卡片
  • 轮播图

可自动或者手动切换

  • 隐藏内容

轻松切换页面上几乎任何内容的可见性。包括制作手风琴的支持。

  • 响应式嵌入

通过创建可在任何设备上缩放的内在比率，根据父级的宽度创建响应式视频或幻灯片嵌入

<div>
 <b-embed
 type="iframe"
 aspect="16by9"
 src="你的资源URL"
 allowfullscreen
 ></b-embed>
</div>
  • 表单
  • 模态框
  • 表格

以上是选择性的预览一些组件，更多组件可以选择查看官网文档

安装使用

# With npm
npm install vue bootstrap-vue bootstrap
# With yarn
yarn add vue bootstrap-vue bootstrap

然后，在app入口点注册BootstrapVue插件：

// app.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

并导入Bootstrap和BootstrapVue css文件：

// app.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

或者scss通过单个自定义SCSS文件导入Bootstrap和BootstrapVue 文件：

// custom.scss
@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-vue/src/index.scss';
// app.js
import 'custom.scss'

BootstrapVue还提供了和Nuxt.js、Vue CLI2、Vue CLI3一起使用的模板，用法很多，可以到Github上获取相关文档地址！

总结

Vue+BootStrapV4，使构建响应式Web应用变得更加简单，虽然功能上并不是很强大，但是其主要还是界面上的优势，感兴趣的小伙伴可以学习一下！

相关推荐

Spring框架基础知识-第四节内容(Spring基础配置)

Spring基础配置Spring框架本身有四大原则：（1）使用POJO进行轻量级和最小侵入式开发。（2）通过依赖注入和基于接口编程实现松耦合。（3）通过AOP和默认习惯进行声明式编程。（4）使...

SpringBoot项目开发实战销售管理系统——项目框架搭建!

项目框架搭建在完成项目的分析和数据库设计后，一般由架构师完成项目框架的搭建，包括项目依赖的添加、项目的配置和项目日志的配置，完成后再开始业务代码的编写。技术栈的搭建新建一个SpringBoot项目，...

从零到一:独立运行若依框架系统并进行本地二次开发

####一、环境准备1.**基础环境**：-JDK1.8+（推荐JDK17）-Maven3.6+-MySQL5.7+（推荐8.0）-Redis5.0+-Node.js16...

单片机时间片轮询程序架构（单片机如何实现精准的时间周期）

时间片轮询法有很多时候都是与操作系统一起被提到，也就是说很多时候是操作系统中使用了这一方法:STM32单片机开发中的RTOS。下文将参考别人的代码，演示建立的一个时间片轮询架构程序的...

Netty主要组件和服务器启动源码分析

1.Netty服务端启动代码publicclassNettyServer{publicstaticvoidmain(String[]args)throwsInterrup...

前端定时任务的神库!快把它加到你的项目中去!

我们常会遇到定时刷新数据、轮询接口、发送提醒等场景，我们常会遇到定时刷新数据、轮询接口、发送提醒等场景。为什么选择cron库？定时任务开发痛点原生setInterval的时间误差累积难以实现复杂的...

如何正确实现一个后台(定时)任务（后台定时任务怎么实现）

相信大家都知道如何在.NET中执行后台（定时）任务。首先我们会选择实现IHostedService接口或者继承BackgroundService来实现后台任务。然后注册到容器内，然后注册到容...

秒杀传统的Linux Crontab，这款开源的定时任务管理系统绝了!

Gocron是一款开源的定时任务管理系统，基于Go语言开发，旨在替代传统的LinuxCrontab。它通过Web界面提供直观的任务管理功能，支持精确到秒的Crontab时间表达式，并具备任务重试、超...

Python 定时任务:schedule 自动执行脚本太方便。

2025年了，还在为Python定时任务头疼？轻量级需求搞什么Celery，schedule三行代码就搞定。这库把定时任务简化到像说人话，但新手直接抄文档容易踩坑。文档只会告诉你怎么设置每10分钟执行...

SpringBoot扩展——定时任务!（基于springboot的校园宿舍管理系统的设计与实现）

定时任务项目开发中会涉及很多需要定时执行的代码，如每日凌晨对前一日的数据进行汇总，或者系统缓存的清理、对每日的数据进行分析和总结等需求，这些都是定时任务。单体系统和分布式系统的分布式任务有很大的区别，...

适合普通开发者和产品经理的PHP应用模板开发AI的SaaS应用框架

简单到傻！Liang_SaaS适合普通开发者和产品经理的PHP应用模板开发AI的SaaS应用框架，利用Php开发AI的SaaS应用框架，是一个强大的内容管理仪表板模板，基于Bootstrap和...

非常实用的15款开源PHP类库（php开源管理系统）

PHP库给开发者提供了一个标准接口，它帮助开发者在PHP里充分利用面向对象编程。这些库为特定类型的内置功能提供了一个标准的API，允许类可以与PHP引擎进行无缝的交互。此外，开发者使用这些类库还可以简...

蜂神榜苹果商店也凑热闹:“520”我爱玩家!

各位看官，今天被朋友圈各类“520”刷屏呢？有没有给你亲爱的家人一份“520”模式的红包呢？苹果商店也给了玩家一个“520”模式的惊喜---再一次提供了多款“1元”价格的游戏！并且此次降价的游戏品质都...

变成气球的猫咪《气球》十一正式推出

墨西哥游戏公司NoodlecakeGames曾开发过《致命框架》、《阿尔托冒险》等优秀佳作，而它旗下的最新游戏《气球》(TheBalloons)在十一的时候就要和大家见面了。游戏中，玩家要操控娃娃...

星座超游爱:狮子遇挑战，处女手抓牢~

teemo跟大家讲了三期太阳星座，也许有很多不热心的小伙伴并不知道是什么东西，今天就小科普一番~在出生的那一天，太阳所落的那个星座，就是每个人的太阳星座，而这恰好就是大家的性格中心，是权势驱力、人格的...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表