Bootstrap-Vue是一款基于Bootstrap 4和Vue.js的UI組件庫。它包含了一系列的組件、指令以及插件,可方便地用于Vue.js項目的開發中。
在使用Bootstrap-Vue時,需要先引入Bootstrap和Vue.js的樣式和腳本文件,然后再引入Bootstrap-Vue的樣式和腳本文件:
<!-- 引入Bootstrap樣式和腳本文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script> <!-- 引入Vue.js --> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script> <!-- 引入Bootstrap-Vue樣式和腳本文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-vue/2.21.2/bootstrap-vue.min.js"></script>
引入Bootstrap和Vue.js后,我們就可以開始使用Bootstrap-Vue的組件了。例如使用按鈕組件:
<!-- 使用Bootstrap-Vue的按鈕組件 --> <b-button variant="primary">Primary</b-button> <b-button variant="danger">Danger</b-button>
以上代碼會渲染出兩個按鈕,分別為“Primary”和“Danger”。我們可以通過“variant”屬性來設置按鈕的顏色。