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

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

腾讯欢乐捕鱼宝珠怎么获得