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

bootstrap-vue是什麼

May 25, 2019 pm 03:02 PM

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
1 個月前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML5中跨瀏覽器兼容性的最佳實踐是什麼? HTML5中跨瀏覽器兼容性的最佳實踐是什麼? Mar 17, 2025 pm 12:20 PM

文章討論了確保HTML5跨瀏覽器兼容性的最佳實踐,重點是特徵檢測,進行性增強和測試方法。

> gt;的目的是什麼 元素? > gt;的目的是什麼 元素? Mar 21, 2025 pm 12:34 PM

本文討論了HTML< Progress>元素,其目的,樣式和與< meter>元素。主要重點是使用< progress>為了完成任務和LT;儀表>對於stati

< datalist>的目的是什麼。 元素? < datalist>的目的是什麼。 元素? Mar 21, 2025 pm 12:33 PM

本文討論了html< datalist>元素,通過提供自動完整建議,改善用戶體驗並減少錯誤來增強表格。Character計數:159

如何使用HTML5表單驗證屬性來驗證用戶輸入? 如何使用HTML5表單驗證屬性來驗證用戶輸入? Mar 17, 2025 pm 12:27 PM

本文討論了使用HTML5表單驗證屬性,例如必需的,圖案,最小,最大和長度限制,以直接在瀏覽器中驗證用戶輸入。

< meter>的目的是什麼。 元素? < meter>的目的是什麼。 元素? Mar 21, 2025 pm 12:35 PM

本文討論了HTML< meter>元素,用於在一個範圍內顯示標量或分數值及其在Web開發中的常見應用。它區分了< meter>從< progress>和前

視口元標籤是什麼?為什麼對響應式設計很重要? 視口元標籤是什麼?為什麼對響應式設計很重要? Mar 20, 2025 pm 05:56 PM

本文討論了視口元標籤,這對於移動設備上的響應式Web設計至關重要。它解釋瞭如何正確使用確保最佳的內容縮放和用戶交互,而濫用可能會導致設計和可訪問性問題。

< iframe>的目的是什麼。 標籤?使用時的安全考慮是什麼? < iframe>的目的是什麼。 標籤?使用時的安全考慮是什麼? Mar 20, 2025 pm 06:05 PM

本文討論了< iframe>將外部內容嵌入網頁,其常見用途,安全風險以及諸如對象標籤和API等替代方案的目的。

HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

See all articles