松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue › BootstrapVue基于Bootstrap v4,Vuejs,移动优先的前端框架

BootstrapVue基于Bootstrap v4,Vuejs,移动优先的前端框架

迦娜王
1年前Vue
659 0 0

简介

BootstrapVue具有超过40个插件和超过75个自定义组件,为Vue.js提供了最全面的Bootstrap v4组件和网格系统实现之一。具有广泛的自动WAI-ARIA可访问性标记。非常流行的前端框架Vue.js 和世界上最流行的前端CSS库组成BootstrapVue,前端同学必须了解哈,Github star 9.3k , MIT协议,最新版本V2.0.0-rc.26。

Bootstrap v4是世界上最受欢迎的构建响应式移动优先网站的框架。

BootstrapVue基于世界上最流行的框架 – Bootstrap v4,使用Vue.js构建响应迅速,移动优先的站点。

  • Vue.js v2.6是必需的,v2.6.10建议
  • 引导 v4.3是必需的,v4.3.1建议
  • PortalVue v2.1被要求的,v2.1.5建议
  • jQuery 是不需要

LOGO

BootstrapVue基于Bootstrap v4,Vuejs,移动优先的前端框架

快速上手

  • 用前须知

文档信息

在许多BootstrapVue的文档中的示例,您可能会看到使用CSS类等的ml-2,py-1等等,这些都是引导V4.3实用工具类,以帮助控制填充,边距,定位等等。您可以在Utility Classes参考部分中找到有关这些类的信息 。

本文档中的许多示例都是实时的,可以就地进行编辑,以获得增强的学习体验。

BootstrapVue还提供了一个交互式游乐场,您可以在其中试验各种组件并将结果导出到JSFiddle,CodePen和/或CodeSandbox。

重要的HTML全局变量

Bootstrap v4.3 CSS使用了一些重要的全局样式和设置,使用它们时需要注意,所有这些样式和设置几乎都专门针对跨浏览器样式的规范化。有关详细信息,请参阅以下小节。

HTML5 doctype

Bootstrap需要使用HTML5 doctype。没有它,你可能会看到一些时髦的不完整造型,但包括它不应该造成任何相当大的打嗝。


 ...

响应元标记

Bootstrap v4.3是首先针对移动开发的,该策略首先针对移动设备优化代码,然后使用CSS媒体查询根据需要扩展组件。要确保为所有设备正确渲染和触摸缩放,请将响应式视口元标记添加到您的 。


CSS box-sizing

为了在CSS中更直接的大小调整,全局box-sizing值从切换content-box 到border-box。这确保padding不会影响元素的最终计算宽度,但它可能会导致某些第三方软件(如Google Maps和Google Custom Search Engine)出现问题。

在极少数情况下您需要覆盖它,请使用以下内容:

.selector-for-some-widget {
 box-sizing: content-box;
}

使用上面的代码片段,嵌套元素 – 包括通过::before和生成的内容::after- 将继承box-sizing为此指定的内容.selector-for-some-widget。

Style reboot

为了改进跨浏览器呈现,Bootstrap v4.3使用reboot重新引导来纠正浏览器和设备之间的不一致,同时为常见的HTML元素提供稍微更有意义的重置 。

  • 使用教程

如果您正在使用webpack, rollup.js等模块捆绑包,您可能更愿意直接将包包含到项目中。要开始使用,请使用yarn或npm获取最新版本的Vue.js,BootstrapVue和Bootstrap v4:

# 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\\'

在包含Bootstrap SCSS()之前,请确保@import或定义自定义变量值,并在此之后包括BootstrapVue SCSS()以确保正确设置变量。bootstrap.scssbootstrap-vue.scss

将所有SCSS @import放入单个SCSS文件中,然后将该单个文件导入到项目中。默认情况下,将单个SCSS文件导入项目不会在文件之间共享变量值和函数。

注意:需要webpack配置才能加载CSS / SCSS文件

PS

不得不说,BootstrapVue文档做的很好很详细,关于40个插件和超过75个自定义组件怎么使用,需要自行去BootstrapVue官网查阅。以下官网文档截图:

BootstrapVue基于Bootstrap v4,Vuejs,移动优先的前端框架

Alerts 组件

BootstrapVue基于Bootstrap v4,Vuejs,移动优先的前端框架

Table组件

BootstrapVue基于Bootstrap v4,Vuejs,移动优先的前端框架

进度条组件

BootstrapVue基于Bootstrap v4,Vuejs,移动优先的前端框架

Spinners 组件

0
基于Vue.js实现的项目管理系统
上一篇
5个Vue.js项目的令人敬畏的模板
下一篇
评论 (0)

请登录以参与评论。

现在登录
聚合文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
2月前
vue3.x reactive、effect、computed、watch依赖关系及实现原理
2月前
Vue 3 新特性:在 Composition API 中使用 CSS Modules
2月前
新手必看的前端项目去中心化和模块化思想
2月前
标签
AI AI项目 css docker Drone Elaticsearch es5 es6 Geometry Go gru java Javascript jenkins lstm mysql mysql优化 mysql地理位置索引 mysql索引 mysql规范 mysql设计 mysql配置文件 mysql面试题 mysql高可用 nginx Redis redis性能 rnn SpringBoot Tensorflow tensorflow2.0 UI设计 vue vue3.0 vue原理 whistle ZooKeeper 开源项目 抓包工具 日志输出 机器学习 深度学习 神经网络 论文 面试题
相关文章
在Gitee收获近 5k Star,更新后的Vue版RuoYi有哪些新变化?
vue3.x reactive、effect、computed、watch依赖关系及实现原理
Vue 3 新特性:在 Composition API 中使用 CSS Modules
新手必看的前端项目去中心化和模块化思想
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2021 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
33 评论
231 喜欢
  • 0
  • 0
  • Top