vue3x bootstrap5框架使用

 注：實例環境 vue cli構建的項目

安裝bootstrap5

npm install bootstrap@5.0.1 --save-dev 

main.js 導入css,js

import { createApp } from 'vue' import App from './App.vue' import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap/dist/js/bootstrap.bundle.js' createApp(App).mount('#app') 

App.vue

<template> <Example></Example> </template> <script> import Example from './components/Example' export default { name: 'App', components: { Example } } </script> <style> </style> 

Example.vue

<template> <div class="container"> <div class="row"> <div class="col bg-light m-2">1</div> <div class="col bg-light m-2">2</div> <div class="col bg-light m-2">3</div> </div> </div> <div class="container"> <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">Home</a></li> <li class="breadcrumb-item"><a href="#">Library</a></li> <li class="breadcrumb-item active" aria-current="page">Data</li> </ol> </nav> </div> <div class="container"> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-secondary">Secondary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-warning">Warning</button> </div> <div class="container"> <table class="table"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td>@twitter</td> </tr> </tbody> </table> </div> <div class="container"> <select class="form-select" aria-label="Default select example"> <option selected>Open this select menu</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </div> <div class="container"> <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false"> Dropdown button </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1"> <li><a class="dropdown-item" href="#">Action</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> </div> </template> <script>  export default { name: "Example" } </script> <style scoped> </style> 

瀏覽器顯示效果