龙空技术网

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

码农爱AI 5703

前言:

此时各位老铁们对“bootstraphtml5”大致比较讲究,你们都想要分析一些“bootstraphtml5”的相关资讯。那么小编也在网摘上收集了一些有关“bootstraphtml5””的相关知识,希望看官们能喜欢,朋友们一起来学习一下吧!

简介

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

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

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

重要的HTML全局变量

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

HTML5 doctype

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

<!doctype html><html lang="en"> ...</html>

响应元标记

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

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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 npmnpm install vue bootstrap-vue bootstrap# With yarnyarn add vue bootstrap-vue bootstrap

然后,在app入口点注册BootstrapVue插件:

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

并导入Bootstrap和BootstrapVue css文件:

// app.jsimport '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.jsimport 'custom.scss'

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

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

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

PS

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

Alerts 组件

Table组件

进度条组件

Spinners 组件

标签: #bootstraphtml5