Hướng dẫn bootstrap-vue navbar - bootstrap-vue navbar
|
Thành phần <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>2 là một trình bao bọc định vị thương hiệu, điều hướng và các yếu tố khác thành một tiêu đề ngắn gọn. Nó dễ dàng mở rộng và nhờ thành phần <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>3, nó có thể dễ dàng tích hợp các hành vi đáp ứng. Show
Example: <div> <b-navbar toggleable="lg" type="dark" variant="info"> <b-navbar-brand href="#">NavBarb-navbar-brand> <b-navbar-toggle target="nav-collapse">b-navbar-toggle> <b-collapse id="nav-collapse" is-nav> <b-navbar-nav> <b-nav-item href="#">Linkb-nav-item> <b-nav-item href="#" disabled>Disabledb-nav-item> b-navbar-nav> <b-navbar-nav class="ml-auto"> <b-nav-form> <b-form-input size="sm" class="mr-sm-2" placeholder="Search">b-form-input> <b-button size="sm" class="my-2 my-sm-0" type="submit">Searchb-button> b-nav-form> <b-nav-item-dropdown text="Lang" right> <b-dropdown-item href="#">ENb-dropdown-item> <b-dropdown-item href="#">ESb-dropdown-item> <b-dropdown-item href="#">RUb-dropdown-item> <b-dropdown-item href="#">FAb-dropdown-item> b-nav-item-dropdown> <b-nav-item-dropdown right> <template #button-content> <em>Userem> template> <b-dropdown-item href="#">Profileb-dropdown-item> <b-dropdown-item href="#">Sign Outb-dropdown-item> b-nav-item-dropdown> b-navbar-nav> b-collapse> b-navbar> div> Phối màu<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>2 Hỗ trợ các biến thể màu nền Bootstrap V4 tiêu chuẩn. Đặt prop <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>5 thành một trong các giá trị sau để thay đổi màu nền: <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>6, <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>7, <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>8, <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>9, <div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>0, <div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>1 hoặc <div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>2. Kiểm soát màu văn bản bằng cách đặt <div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>3 Prop thành <div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>2 để sử dụng với các biến thể màu nền ánh sáng hoặc <div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>1 cho các biến thể màu nền tối. Vị tríKiểm soát vị trí của thanh điều hướng bằng cách đặt một trong hai đạo cụ:
Notes:
Nội dung được hỗ trợNavbars đi kèm với hỗ trợ tích hợp cho một số ít các thành phần phụ. Chọn từ những điều sau khi cần thiết:
|
Tài sản | Loại hình | Mặc định | Sự mô tả |
|---|---|---|---|
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>6 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 38 | Đặt thành 'Top' để được cố định lên trên cùng của chế độ xem hoặc 'dưới cùng' để cố định vào cuối của chế độ xem | |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>29 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 40 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 | NAVBARS được ẩn theo mặc định khi in. Khi chỗ dựa này được đặt, nó sẽ được in |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>1 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 40 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 | NAVBARS được ẩn theo mặc định khi in. Khi chỗ dựa này được đặt, nó sẽ được in |
<div> <b-navbar toggleable="sm" type="light" variant="light"> <b-navbar-toggle target="nav-text-collapse">b-navbar-toggle> <b-navbar-brand>BootstrapVueb-navbar-brand> <b-collapse id="nav-text-collapse" is-nav> <b-navbar-nav> <b-nav-text>Navbar textb-nav-text> b-navbar-nav> b-collapse> b-navbar> div>6 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 38 | Đặt thành True để làm cho thanh Nav dính vào đỉnh của chế độ xem (hoặc container cha mẹ có 'vị trí: bộ tương đối') khi cuộn | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>47 |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>01 | Chỉ định thẻ HTML để kết xuất thay vì thẻ mặc định | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 | NAVBARS được ẩn theo mặc định khi in. Khi chỗ dựa này được đặt, nó sẽ được in |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>3 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 38 | Đặt thành True để làm cho thanh Nav dính vào đỉnh của chế độ xem (hoặc container cha mẹ có 'vị trí: bộ tương đối') khi cuộn | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>47 |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>5 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 38 | Chỉ định thẻ HTML để kết xuất thay vì thẻ mặc định |
<div>
<b-navbar variant="faded" type="light">
<b-navbar-brand href="#">BootstrapVueb-navbar-brand>
b-navbar>
div>
40 hoặc <div>
<b-navbar variant="faded" type="light">
<b-navbar-brand href="#">BootstrapVueb-navbar-brand>
b-navbar>
div>
38
Được đặt thành 'Đúng' cho một chiếc Navbar luôn bị sụp đổ hoặc đến một điểm dừng cụ thể tại thời điểm đó, thanh điều hướng sẽ được mở rộng: 'SM', 'MD', 'LG' hoặc 'XL' | Sự mô tả |
|---|---|
| Đặt thành 'Top' để được cố định lên trên cùng của chế độ xem hoặc 'dưới cùng' để cố định vào cuối của chế độ xem | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 |
- NAVBARS được ẩn theo mặc định khi in. Khi chỗ dựa này được đặt, nó sẽ được in
- Đặt thành True để làm cho thanh Nav dính vào đỉnh của chế độ xem (hoặc container cha mẹ có 'vị trí: bộ tương đối') khi cuộn
Đặc tính
Tất cả các giá trị mặc định thuộc tính được cấu hình toàn cầu.
Tài sản | Loại hình | Mặc định | Sự mô tả |
|---|---|---|---|
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>60 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 38 | Đặt thành 'Top' để được cố định lên trên cùng của chế độ xem hoặc 'dưới cùng' để cố định vào cuối của chế độ xem | |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>62 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 40 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 | NAVBARS được ẩn theo mặc định khi in. Khi chỗ dựa này được đặt, nó sẽ được in |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>65 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 40 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 | NAVBARS được ẩn theo mặc định khi in. Khi chỗ dựa này được đặt, nó sẽ được in |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>68 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 40 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 | NAVBARS được ẩn theo mặc định khi in. Khi chỗ dựa này được đặt, nó sẽ được in |
<div> <b-navbar toggleable="sm" type="light" variant="light"> <b-navbar-toggle target="nav-text-collapse">b-navbar-toggle> <b-navbar-brand>BootstrapVueb-navbar-brand> <b-collapse id="nav-text-collapse" is-nav> <b-navbar-nav> <b-nav-text>Navbar textb-nav-text> b-navbar-nav> b-collapse> b-navbar> div>6 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 38 | Đặt thành True để làm cho thanh Nav dính vào đỉnh của chế độ xem (hoặc container cha mẹ có 'vị trí: bộ tương đối') khi cuộn | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>47 |
<div>
<b-navbar variant="faded" type="light">
<b-navbar-brand href="#">BootstrapVueb-navbar-brand>
b-navbar>
div>
40 hoặc <div>
<b-navbar variant="faded" type="light">
<b-navbar-brand href="#">BootstrapVueb-navbar-brand>
b-navbar>
div>
38
Được đặt thành 'Đúng' cho một chiếc Navbar luôn bị sụp đổ hoặc đến một điểm dừng cụ thể tại thời điểm đó, thanh điều hướng sẽ được mở rộng: 'SM', 'MD', 'LG' hoặc 'XL' | Sự mô tả |
|---|---|
| Đặt thành 'Top' để được cố định lên trên cùng của chế độ xem hoặc 'dưới cùng' để cố định vào cuối của chế độ xem | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 |
- NAVBARS được ẩn theo mặc định khi in. Khi chỗ dựa này được đặt, nó sẽ được in
- Đặt thành True để làm cho thanh Nav dính vào đỉnh của chế độ xem (hoặc container cha mẹ có 'vị trí: bộ tương đối') khi cuộn
Đặc tính
Tất cả các giá trị mặc định thuộc tính được cấu hình toàn cầu.
Tài sản Loại hình | Loại hình Loại hình | Mặc định | Sự mô tả |
|---|---|---|---|
<div> <b-navbar type="light" variant="light"> <b-nav-form> <b-form-input class="mr-sm-2" placeholder="Search">b-form-input> <b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Searchb-button> b-nav-form> b-navbar> div>4 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 40 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 | NAVBARS được ẩn theo mặc định khi in. Khi chỗ dựa này được đặt, nó sẽ được in |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>80 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 38 | Đặt thành True để làm cho thanh Nav dính vào đỉnh của chế độ xem (hoặc container cha mẹ có 'vị trí: bộ tương đối') khi cuộn | |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>82 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 40 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 | NAVBARS được ẩn theo mặc định khi in. Khi chỗ dựa này được đặt, nó sẽ được in |
<div> <b-navbar type="light" variant="light"> <b-nav-form> <b-form-input class="mr-sm-2" placeholder="Search">b-form-input> <b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Searchb-button> b-nav-form> b-navbar> div>6 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 40 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 | NAVBARS được ẩn theo mặc định khi in. Khi chỗ dựa này được đặt, nó sẽ được in |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>88 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 40 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 | NAVBARS được ẩn theo mặc định khi in. Khi chỗ dựa này được đặt, nó sẽ được in |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>91 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 38 | Đặt thành True để làm cho thanh Nav dính vào đỉnh của chế độ xem (hoặc container cha mẹ có 'vị trí: bộ tương đối') khi cuộn | |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>93 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 40 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 | NAVBARS được ẩn theo mặc định khi in. Khi chỗ dựa này được đặt, nó sẽ được in |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>96 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 38 | Prop: Định cấu hình lớp CSS hoạt động được áp dụng khi liên kết hoạt động với đường dẫn chính xác. Thông thường, bạn sẽ muốn đặt cái này thành tên lớp 'Active' | |
<div> <b-navbar toggleable="sm" type="light" variant="light"> <b-navbar-toggle target="nav-text-collapse">b-navbar-toggle> <b-navbar-brand>BootstrapVueb-navbar-brand> <b-collapse id="nav-text-collapse" is-nav> <b-navbar-nav> <b-nav-text>Navbar textb-nav-text> b-navbar-nav> b-collapse> b-navbar> div>2 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 38 | Prop: Biểu thị URL đích của liên kết cho các liên kết tiêu chuẩn A | |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>00 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 40 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 | Prop: Để cải thiện khả năng đáp ứng của các ứng dụng Nuxt.js của bạn, khi liên kết sẽ được hiển thị trong chế độ xem, Nuxt.js sẽ tự động tìm kiếm trước trang chia mã. Cài đặt `No-Prefetch` sẽ vô hiệu hóa tính năng này cho liên kết cụ thể |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>03v2.15.0+ v2.15.0+ | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 40 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>7 | Prop: Để cải thiện khả năng đáp ứng của các ứng dụng Nuxt.js của bạn, khi liên kết sẽ được hiển thị trong chế độ xem, Nuxt.js sẽ tự động tìm kiếm trước trang chia mã. Cài đặt `prefetch` thành` true` hoặc `false` sẽ ghi đè giá trị mặc định của` router.prefetchlinks` |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>06 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 38 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>7 | Prop: Để cải thiện khả năng đáp ứng của các ứng dụng Nuxt.js của bạn, khi liên kết sẽ được hiển thị trong chế độ xem, Nuxt.js sẽ tự động tìm kiếm trước trang chia mã. Cài đặt `prefetch` thành` true` hoặc `false` sẽ ghi đè giá trị mặc định của` router.prefetchlinks` |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>09 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 40 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 | Prop: Để cải thiện khả năng đáp ứng của các ứng dụng Nuxt.js của bạn, khi liên kết sẽ được hiển thị trong chế độ xem, Nuxt.js sẽ tự động tìm kiếm trước trang chia mã. Cài đặt `No-Prefetch` sẽ vô hiệu hóa tính năng này cho liên kết cụ thể |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>12v2.15.0+ v2.15.0+ | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 38 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>7 | |
<div> <b-navbar toggleable="sm" type="light" variant="light"> <b-navbar-toggle target="nav-text-collapse">b-navbar-toggle> <b-navbar-brand>BootstrapVueb-navbar-brand> <b-collapse id="nav-text-collapse" is-nav> <b-navbar-nav> <b-nav-text>Navbar textb-nav-text> b-navbar-nav> b-collapse> b-navbar> div>6 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 38 | Prop: Để cải thiện khả năng đáp ứng của các ứng dụng Nuxt.js của bạn, khi liên kết sẽ được hiển thị trong chế độ xem, Nuxt.js sẽ tự động tìm kiếm trước trang chia mã. Cài đặt `prefetch` thành` true` hoặc `false` sẽ ghi đè giá trị mặc định của` router.prefetchlinks` | Prop: Đặt thuộc tính `rel` trên liên kết được hiển thị |
<template> <b-navbar toggleable type="dark" variant="dark"> <b-navbar-brand href="#">NavBarb-navbar-brand> <b-navbar-toggle target="navbar-toggle-collapse"> <template #default="{ expanded }"> <b-icon v-if="expanded" icon="chevron-bar-up">b-icon> <b-icon v-else icon="chevron-bar-down">b-icon> template> b-navbar-toggle> <b-collapse id="navbar-toggle-collapse" is-nav> <b-navbar-nav class="ml-auto"> <b-nav-item href="#">Link 1b-nav-item> <b-nav-item href="#">Link 2b-nav-item> <b-nav-item href="#" disabled>Disabledb-nav-item> b-navbar-nav> b-collapse> b-navbar> template>7 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 38 | Prop: Cài đặt thay thế prop sẽ gọi `router.replace ()` thay vì `router.push ()` khi nhấp vào, do đó, điều hướng sẽ không để lại bản ghi lịch sử | Prop: BootStrapVue Auto phát hiện giữa `` và ``. Trong trường hợp bạn muốn sử dụng thành phần liên kết bên thứ 3 dựa trên ``, đặt chỗ dựa này thành tên thành phần. ví dụ. Đặt nó thành 'g-link' nếu bạn đang sử dụng gridsome (chỉ lưu ý `` các đạo cụ cụ thể được chuyển cho thành phần) |
<div> <b-navbar toggleable="sm" type="light" variant="light"> <b-navbar-toggle target="nav-text-collapse">b-navbar-toggle> <b-navbar-brand>BootstrapVueb-navbar-brand> <b-collapse id="nav-text-collapse" is-nav> <b-navbar-nav> <b-nav-text>Navbar textb-nav-text> b-navbar-nav> b-collapse> b-navbar> div>4 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand>b-navbar> div> 16 | Chỉ định thẻ HTML để kết xuất thay vì thẻ mặc định |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>19
Prop: Đặt thuộc tính `Target` trên liên kết được hiển thị
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>21 hoặc <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>38 | Prop: Biểu thị lộ trình mục tiêu của liên kết. Khi được nhấp, giá trị của prop to prop sẽ được chuyển cho `router.push ()` bên trong, do đó giá trị có thể là một chuỗi hoặc một đối tượng mô tả vị trí |
|---|---|
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>0 hỗ trợ tạo thành phần <div> <b-navbar toggleable="sm" type="light" variant="light"> <b-navbar-toggle target="nav-text-collapse">b-navbar-toggle> <b-navbar-brand>BootstrapVueb-navbar-brand> <b-collapse id="nav-text-collapse" is-nav> <b-navbar-nav> <b-nav-text>Navbar textb-nav-text> b-navbar-nav> b-collapse> b-navbar> div>3 hoặc <div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>25 (nếu sử dụng nuxt.js). Để biết thêm chi tiết về các đạo cụ cụ thể liên kết bộ định tuyến (hoặc NUXT liên kết), hãy xem phần Tham chiếu Hỗ trợ Bộ định tuyến. | Khe cắm |
BootstrapVue
1
- Tên
- Sự mô tả
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>
21- Nội dung để đặt trong thương hiệu Navbar
<div>
<b-navbar variant="faded" type="light">
<b-navbar-brand href="#">
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten">
BootstrapVue
b-navbar-brand>
b-navbar>
div>
1 Bí danh thành phần
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>1 Thuộc tính
<div> <b-navbar type="dark" variant="dark"> <b-navbar-nav> <b-nav-item href="#">Homeb-nav-item> <b-nav-item-dropdown text="Lang" right> <b-dropdown-item href="#">ENb-dropdown-item> <b-dropdown-item href="#">ESb-dropdown-item> <b-dropdown-item href="#">RUb-dropdown-item> <b-dropdown-item href="#">FAb-dropdown-item> b-nav-item-dropdown> <b-nav-item-dropdown text="User" right> <b-dropdown-item href="#">Accountb-dropdown-item> <b-dropdown-item href="#">Settingsb-dropdown-item> b-nav-item-dropdown> b-navbar-nav> b-navbar> div>
1
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>1 khe cắm
<div>
<b-navbar variant="faded" type="light">
<b-navbar-brand href="#">
<img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten">
BootstrapVue
b-navbar-brand>
b-navbar>
div>
1 Sự kiện
Bí danh thành phần
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>1 cũng có thể được sử dụng thông qua các bí danh sau: | Lưu ý: Bí danh thành phần chỉ khả dụng khi nhập tất cả Bootstrapvue hoặc sử dụng plugin nhóm thành phần. | Đặc tính | Prop: Biểu thị lộ trình mục tiêu của liên kết. Khi được nhấp, giá trị của prop to prop sẽ được chuyển cho `router.push ()` bên trong, do đó giá trị có thể là một chuỗi hoặc một đối tượng mô tả vị trí |
|---|---|---|---|
<div> <b-navbar type="light" variant="light"> <b-nav-form> <b-form-input class="mr-sm-2" placeholder="Search">b-form-input> <b-button variant="outline-success" class="my-2 my-sm-0" type="submit">Searchb-button> b-nav-form> b-navbar> div>6v2.15.0+ v2.15.0+ | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 40 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" alt="Kitten"> b-navbar-brand> b-navbar> div>2 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>0 hỗ trợ tạo thành phần <div> <b-navbar toggleable="sm" type="light" variant="light"> <b-navbar-toggle target="nav-text-collapse">b-navbar-toggle> <b-navbar-brand>BootstrapVueb-navbar-brand> <b-collapse id="nav-text-collapse" is-nav> <b-navbar-nav> <b-nav-text>Navbar textb-nav-text> b-navbar-nav> b-collapse> b-navbar> div>3 hoặc <div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>25 (nếu sử dụng nuxt.js). Để biết thêm chi tiết về các đạo cụ cụ thể liên kết bộ định tuyến (hoặc NUXT liên kết), hãy xem phần Tham chiếu Hỗ trợ Bộ định tuyến. |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>37 | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand>b-navbar> div> 38 | Khe cắm | Tên |
<template> <b-navbar toggleable type="dark" variant="dark"> <b-navbar-brand href="#">NavBarb-navbar-brand> <b-navbar-toggle target="navbar-toggle-collapse"> <template #default="{ expanded }"> <b-icon v-if="expanded" icon="chevron-bar-up">b-icon> <b-icon v-else icon="chevron-bar-down">b-icon> template> b-navbar-toggle> <b-collapse id="navbar-toggle-collapse" is-nav> <b-navbar-nav class="ml-auto"> <b-nav-item href="#">Link 1b-nav-item> <b-nav-item href="#">Link 2b-nav-item> <b-nav-item href="#" disabled>Disabledb-nav-item> b-navbar-nav> b-collapse> b-navbar> template>7Required Required | Sự mô tả | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>21 |
Prop: Đặt thuộc tính `Target` trên liên kết được hiển thị
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>21 hoặc <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>38 | Prop: Biểu thị lộ trình mục tiêu của liên kết. Khi được nhấp, giá trị của prop to prop sẽ được chuyển cho `router.push ()` bên trong, do đó giá trị có thể là một chuỗi hoặc một đối tượng mô tả vị trí | Prop: Biểu thị lộ trình mục tiêu của liên kết. Khi được nhấp, giá trị của prop to prop sẽ được chuyển cho `router.push ()` bên trong, do đó giá trị có thể là một chuỗi hoặc một đối tượng mô tả vị trí |
|---|---|---|
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>0 hỗ trợ tạo thành phần <div> <b-navbar toggleable="sm" type="light" variant="light"> <b-navbar-toggle target="nav-text-collapse">b-navbar-toggle> <b-navbar-brand>BootstrapVueb-navbar-brand> <b-collapse id="nav-text-collapse" is-nav> <b-navbar-nav> <b-nav-text>Navbar textb-nav-text> b-navbar-nav> b-collapse> b-navbar> div>3 hoặc <div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>25 (nếu sử dụng nuxt.js). Để biết thêm chi tiết về các đạo cụ cụ thể liên kết bộ định tuyến (hoặc NUXT liên kết), hãy xem phần Tham chiếu Hỗ trợ Bộ định tuyến. | Khe cắm |
Tên
Sự mô tả | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>21 | Prop: Biểu thị lộ trình mục tiêu của liên kết. Khi được nhấp, giá trị của prop to prop sẽ được chuyển cho `router.push ()` bên trong, do đó giá trị có thể là một chuỗi hoặc một đối tượng mô tả vị trí |
|---|---|---|
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>0 hỗ trợ tạo thành phần <div> <b-navbar toggleable="sm" type="light" variant="light"> <b-navbar-toggle target="nav-text-collapse">b-navbar-toggle> <b-navbar-brand>BootstrapVueb-navbar-brand> <b-collapse id="nav-text-collapse" is-nav> <b-navbar-nav> <b-nav-text>Navbar textb-nav-text> b-navbar-nav> b-collapse> b-navbar> div>3 hoặc <div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>25 (nếu sử dụng nuxt.js). Để biết thêm chi tiết về các đạo cụ cụ thể liên kết bộ định tuyến (hoặc NUXT liên kết), hãy xem phần Tham chiếu Hỗ trợ Bộ định tuyến. |
| Tên |
Sự mô tả
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>21
Nội dung để đặt trong thương hiệu Navbar | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>1 Bí danh thành phần | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>1 Thuộc tính |
|---|---|---|
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>1 khe cắm | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>1 Sự kiện | Bí danh thành phần |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>1 cũng có thể được sử dụng thông qua các bí danh sau: | Lưu ý: Bí danh thành phần chỉ khả dụng khi nhập tất cả Bootstrapvue hoặc sử dụng plugin nhóm thành phần. | Bí danh thành phần |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>1 cũng có thể được sử dụng thông qua các bí danh sau: | Lưu ý: Bí danh thành phần chỉ khả dụng khi nhập tất cả Bootstrapvue hoặc sử dụng plugin nhóm thành phần. | Bí danh thành phần |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>1 cũng có thể được sử dụng thông qua các bí danh sau: | Lưu ý: Bí danh thành phần chỉ khả dụng khi nhập tất cả Bootstrapvue hoặc sử dụng plugin nhóm thành phần. | Bí danh thành phần |
Example:
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>0
BootstrapVue
1 cũng có thể được sử dụng thông qua các bí danh sau:
Lưu ý: Bí danh thành phần chỉ khả dụng khi nhập tất cả Bootstrapvue hoặc sử dụng plugin nhóm thành phần.
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>1 Bí danh thành phần | <div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>1 Thuộc tính |
|---|---|
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>1 khe cắm | Bí danh thành phần |
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#"> <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten"> BootstrapVue b-navbar-brand> b-navbar> div>1 cũng có thể được sử dụng thông qua các bí danh sau:
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>
59<div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>
60<div> <b-navbar variant="faded" type="light"> <b-navbar-brand tag="h2" class="mb-0">BootstrapVueb-navbar-brand> b-navbar> div>
61
Example:
<div> <b-navbar variant="faded" type="light"> <b-navbar-brand href="#">BootstrapVueb-navbar-brand> b-navbar> div>1
