首頁 >web前端 >html教學 >bootstrap-vue是什麼

bootstrap-vue是什麼

(*-*)浩
(*-*)浩原創
2019-05-25 15:02:029203瀏覽

Bootstrap-Vue是一個ui元件庫,遵循vue的元件化開發方式,使用Bootstrap樣式控制元件外觀,摒棄了對jquery的依賴。讓我們在使用Vue.js的同時依然能夠繼續享有bootstrap樣式的便利。

bootstrap-vue是什麼

本文嘗試對各個元件進行試用,為了盡量減少其他因素幹擾,仍然使用存取cdn的方式。如果你喜歡使用模組化打包工具,如webpack,官網有詳細的文件可供參考。

1、Alerts(警告框): 主要的使用場景為,針對使用者的行為給予回饋。

注意:

應該總是使用show屬性控制元件的可見性。

為元件新增屬性dismissible可以顯示一個關閉按鈕,它應該總是與dismissed事件一起使用,在dismissed事件中重置vm中控制alert顯示屬性的資料狀態

可以透過variant屬性(primary,secondary,success,danger,warining,info)產生不同語意下的alert

 dismiss-count-down屬性接受一個函數,可以幫助我們實現定時自動關閉的alert    

2、badge(徽章):允許我們為某些內容添加補充資訊。

注意:

#徽章會依據直接父元素的字號調節本身的字號大小,它使用em單位。

透過variant屬性可以定義徽章的語意樣式。 (default, primary, success, warning, info,danger)

新增pill屬性可以定義膠囊式的徽章(增強的圓角)

#透過href屬性可以為徽章添加行為(跳轉)

如果需要圓形的徽章,參考css實現的圓形徽章           

3、Breadcrumb(麵包屑):顯示目前頁面的導覽路徑,告訴我們目前所在位置

注意:

路徑的分隔符號是透過指定偽元素::before的content屬性,由css自動新增。

items即路徑上的各導覽項,透過一個物件陣列指定。可以給一個物件指定active屬性,使其處於啟動狀態

如果沒有明確指定哪一項為啟動狀態,則認會為最後一項為預設啟動狀態。

為導覽項目指定href或to屬性可以新增導航行為。

4、Button:基本的控制項元素,用於觸發行為。

#########注意:#########透過variant屬性可以定義按鈕的語意樣式。 (default, primary, success, warning, info,danger)######透過size屬性定義按鈕的大小(sm,lg),不指定會有預設的樣式。       ######仍可使用type屬性(submit,reset,button)。 ######透過disabled新增停用狀態。 ######新增href或to屬性會產生button樣式的a標籤。 ######新增pressed屬性控制按鈕是否處於已點擊的狀態。使用sync修飾符可以將按鈕的狀態與vm中的資料進行同步。 ###

以上是bootstrap-vue是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn