位置:設計主頁 > 網站制作 > 前端開發 >

BootstrapVue移動優先的前端框架

來源:碼農愛code 作者:碼農愛code 時間:2019-07-16 10:14

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。沒有它,你可能會看到一些時髦的不完整造型,但包括它不應該造成任何相當大的打嗝。

<!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 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 組件

修真传奇电子书 捕鱼达人2原版下载 名仕国际登录 北京pk10开奘结果查询 手机炸金花怎么才能赢 重庆时时彩投注平台 重庆时时开奖号码公告 时时彩倍投会赚钱吗 盈彩官方彩票网 beplay体育app下载ios 时时彩专家在线预测网 快三单双大小投注技巧 新人注册送的lg平台 极速时时开奖号码 二八杠怎么压才能赢钱 3d最聪明的方法 淘金娱乐登录网站