Điều hướng và tab – các tab bootstrap có nội dung

Tài liệu và ví dụ về cách sử dụng các thành phần điều hướng đi kèm của Bootstrap.

Bạn đang xem : tab bootstrap có nội dung

Base nav

Điều hướng có sẵn trong Bootstrap chia sẻ kiểu và đánh dấu chung, từ lớp cơ sở .nav đến trạng thái hoạt động và trạng thái bị vô hiệu hóa. Hoán đổi các lớp bổ trợ để chuyển đổi giữa từng kiểu.

Thành phần cơ sở .nav được xây dựng với flexbox và cung cấp nền tảng vững chắc để xây dựng tất cả các loại thành phần điều hướng. Nó bao gồm một số ghi đè kiểu (để làm việc với danh sách), một số đệm liên kết cho các vùng truy cập lớn hơn và kiểu tắt cơ bản.

Thành phần .nav cơ sở không bao gồm bất kỳ trạng thái .active nào. Các ví dụ sau bao gồm lớp, chủ yếu để chứng minh rằng lớp cụ thể này không kích hoạt bất kỳ kiểu đặc biệt nào.

Để chuyển trạng thái hoạt động cho các công nghệ hỗ trợ, hãy sử dụng thuộc tính aria-current – sử dụng giá trị page cho trang hiện tại hoặc true cho mục hiện tại trong một bộ.

  

& lt;

ul

lớp

=

" nav "

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link active"

aria-current

=

< p class = "s"> "trang"

href

=

"# "

& gt;

Đang hoạt động

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link bị vô hiệu hóa"

href

=

"#"

tabindex

=

"- 1"

aria-khuyết tật

=

"true"

& gt;

Đã tắt

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

Các lớp học được sử dụng xuyên suốt, vì vậy, đánh dấu của bạn có thể siêu linh hoạt. Sử dụng & lt; ul & gt; s như trên, & lt; ol & gt; nếu thứ tự các mặt hàng của bạn quan trọng hoặc tự cuộn với & lt; nav & gt; < / code> phần tử. Vì .nav sử dụng display: flex , các liên kết điều hướng hoạt động giống như các mục điều hướng nhưng không có thêm đánh dấu.

  

& lt;

nav

lớp

=

" nav "

& gt;

& lt;

a

class

= < / p>

"nav-link active"

aria-current

=

< p class = "s"> "trang"

href

=

"# "

& gt;

Đang hoạt động

& lt; /

a

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt;

a

class

= < / p>

"nav-link bị vô hiệu hóa"

href

=

"#"

tabindex

=

"- 1"

aria-khuyết tật

=

"true"

& gt;

Đã tắt

& lt; /

a

& gt;

& lt; /

nav

& gt;

Các kiểu có sẵn

Thay đổi kiểu của thành phần .nav bằng các công cụ sửa đổi và tiện ích. Trộn và kết hợp nếu cần, hoặc xây dựng của riêng bạn.

Căn chỉnh theo chiều ngang

Thay đổi căn chỉnh ngang của điều hướng bằng tiện ích flexbox . Theo mặc định, các nav được căn trái, nhưng bạn có thể dễ dàng thay đổi chúng thành căn giữa hoặc căn phải.

Căn giữa bằng .justify-content-center :

  

& lt;

ul

lớp

=

" nav justify-content-center "

& gt ;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link active"

aria-current

=

< p class = "s"> "trang"

href

=

"# "

& gt;

Đang hoạt động

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link bị vô hiệu hóa"

href

=

"#"

tabindex

=

"- 1"

aria-khuyết tật

=

"true"

& gt;

Đã tắt

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

Căn phải với .justify-content-end :

  

& lt;

ul

class

=

" nav justify-content-end "

& gt ;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link active"

aria-current

=

< p class = "s"> "trang"

href

=

"# "

& gt;

Đang hoạt động

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link bị vô hiệu hóa"

href

=

"#"

tabindex

=

"- 1"

aria-khuyết tật

=

"true"

& gt;

Đã tắt

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

Dọc

Xếp chồng điều hướng của bạn bằng cách thay đổi hướng mục linh hoạt với tiện ích .flex-column . Cần xếp chúng trên một số khung nhìn chứ không phải những khung nhìn khác? Sử dụng các phiên bản đáp ứng (ví dụ: .flex-sm-column ).

  

& lt;

ul

lớp

=

" nav flex-column "

& gt; < / p>

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link active"

aria-current

=

< p class = "s"> "trang"

href

=

"# "

& gt;

Đang hoạt động

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link bị vô hiệu hóa"

href

=

"#"

tabindex

=

"- 1"

aria-khuyết tật

=

"true"

& gt;

Đã tắt

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

Như mọi khi, có thể điều hướng dọc mà không cần & lt; ul & gt; s.

  

& lt;

nav

lớp

=

" nav flex-column "

& gt; < / p>

& lt;

a

class

= < / p>

"nav-link active"

aria-current

=

< p class = "s"> "trang"

href

=

"# "

& gt;

Đang hoạt động

& lt; /

a

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt;

a

class

= < / p>

"nav-link bị vô hiệu hóa"

href

=

"#"

tabindex

=

"- 1"

aria-khuyết tật

=

"true"

& gt;

Đã tắt

& lt; /

a

& gt;

& lt; /

nav

& gt;

Tab

Sử dụng điều hướng cơ bản từ phía trên và thêm lớp .nav-tabs để tạo giao diện theo thẻ. Sử dụng chúng để tạo các vùng có thể lập tab bằng plugin tab JavaScript của chúng tôi.

  

& lt;

ul

lớp

=

" nav nav-tabs "

& gt; < / p>

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link active"

aria-current

=

< p class = "s"> "trang"

href

=

"# "

& gt;

Đang hoạt động

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link bị vô hiệu hóa"

href

=

"#"

tabindex

=

"- 1"

aria-khuyết tật

=

"true"

& gt;

Đã tắt

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

Thuốc

Sử dụng cùng một HTML đó, nhưng sử dụng .nav-Drugs để thay thế:

  

& lt;

ul

lớp

=

" nav nav-thuốc "

& gt; < / p>

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link active"

aria-current

=

< p class = "s"> "trang"

href

=

"# "

& gt;

Đang hoạt động

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link bị vô hiệu hóa"

href

=

"#"

tabindex

=

"- 1"

aria-khuyết tật

=

"true"

& gt;

Đã tắt

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

Điền và căn đều

Buộc nội dung của .nav của bạn mở rộng toàn bộ chiều rộng có sẵn một trong hai lớp bổ trợ. Để lấp đầy một cách tương ứng tất cả không gian có sẵn với các .nav-item của bạn, hãy sử dụng .nav-fill . Lưu ý rằng tất cả không gian theo chiều ngang đều bị chiếm dụng, nhưng không phải mọi mục điều hướng đều có cùng chiều rộng.

  

& lt;

ul

lớp

=

" nav nav-thuốc nav-fill "

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link active"

aria-current

=

< p class = "s"> "trang"

href

=

"# "

& gt;

Đang hoạt động

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết điều hướng dài hơn nhiều

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link bị vô hiệu hóa"

href

=

"#"

tabindex

=

"- 1"

aria-khuyết tật

=

"true"

& gt;

Đã tắt

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

Khi sử dụng điều hướng dựa trên & lt; nav & gt; , bạn có thể bỏ qua .nav-item một cách an toàn vì chỉ .nav-link là cần thiết cho các phần tử & lt; a & gt; tạo kiểu.

  

& lt;

nav

lớp

=

" nav nav-thuốc nav-fill "

& gt;

& lt;

a

class

= < / p>

"nav-link active"

aria-current

=

< p class = "s"> "trang"

href

=

"# "

& gt;

Đang hoạt động

& lt; /

a

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết điều hướng dài hơn nhiều

& lt; /

a

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt;

a

class

= < / p>

"nav-link bị vô hiệu hóa"

href

=

"#"

tabindex

=

"- 1"

aria-khuyết tật

=

"true"

& gt;

Đã tắt

& lt; /

a

& gt;

& lt; /

nav

& gt;

Đối với các phần tử có chiều rộng bằng nhau, hãy sử dụng .nav-justified . Tất cả không gian ngang sẽ bị chiếm bởi các liên kết điều hướng, nhưng không giống như .nav-fill ở trên, mọi mục điều hướng sẽ có cùng chiều rộng.

  

& lt;

ul

lớp

=

" nav nav-Drugs nav-justified "

& gt;

& lt;

li

class

=

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link active"

aria-current

=

< p class = "s"> "trang"

href

=

"# "

& gt;

Đang hoạt động

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết điều hướng dài hơn nhiều

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link bị vô hiệu hóa"

href

=

"#"

tabindex

=

"- 1"

aria-khuyết tật

=

"true"

& gt;

Đã tắt

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

Tương tự với ví dụ .nav-fill bằng cách sử dụng điều hướng dựa trên & lt; nav & gt; .

  

& lt;

nav

lớp

=

" nav nav-Drugs nav-justified "

& gt;

& lt;

a

class

= < / p>

"nav-link active"

aria-current

=

< p class = "s"> "trang"

href

=

"# "

& gt;

Đang hoạt động

& lt; /

a

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết điều hướng dài hơn nhiều

& lt; /

a

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt;

a

class

= < / p>

"nav-link bị vô hiệu hóa"

href

=

"#"

tabindex

=

"- 1"

aria-khuyết tật

=

"true"

& gt;

Đã tắt

& lt; /

a

& gt;

& lt; /

nav

& gt;

Làm việc với các tiện ích flex

Nếu bạn cần các biến thể điều hướng đáp ứng, hãy cân nhắc sử dụng một loạt tiện ích flexbox . Mặc dù dài dòng hơn, nhưng các tiện ích này cung cấp khả năng tùy chỉnh tốt hơn trên các điểm ngắt đáp ứng. Trong ví dụ bên dưới, điều hướng của chúng ta sẽ được xếp chồng lên điểm ngắt thấp nhất, sau đó điều chỉnh theo bố cục ngang lấp đầy chiều rộng có sẵn bắt đầu từ điểm ngắt nhỏ.

  

& lt;

nav

class

=

" nav nav-Drugs flex-column flex-sm-row "

& gt;

& lt;

a

class

= < / p>

"flex-sm-fill text-sm-center nav-link active"

aria-current

=

"trang"

href

=

"#"

& gt;

Đang hoạt động

& lt; /

a

& gt;

& lt;

a

class

= < / p>

"flex-sm-fill text-sm-center nav-link"

href

=

"#"

& gt;

Liên kết điều hướng dài hơn

& lt; /

a

& gt;

& lt;

a

class

= < / p>

"flex-sm-fill text-sm-center nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt;

a

class

= < / p>

"flex-sm-fill text-sm-center nav-link vô hiệu hóa"

href

=

" # "

tabindex

=

"- 1"

aria-khuyết tật

=

"true"

& gt;

Đã tắt

& lt; /

a

& gt;

& lt; /

nav

& gt;

Nếu bạn đang sử dụng navs để cung cấp thanh điều hướng, hãy nhớ thêm role = "navigation" vào vùng chứa mẹ hợp lý nhất của & lt; ul & gt; hoặc bọc phần tử & lt; nav & gt; xung quanh toàn bộ điều hướng. Không thêm vai trò vào chính & lt; ul & gt; , vì điều này sẽ khiến nó không được công bố là danh sách thực tế bởi các công nghệ hỗ trợ.

Lưu ý rằng các thanh điều hướng, ngay cả khi được tạo kiểu trực quan là các tab có lớp .nav-tabs , không nên được cung cấp role = "tablist" , role = "tab" hoặc role = "tabpanel" . Những điều này chỉ thích hợp cho các giao diện được gắn thẻ động, như được mô tả trong Thực tiễn về tác giả của WAI ARIA . Xem hành vi JavaScript để biết giao diện được gắn thẻ động trong phần này để làm ví dụ. Thuộc tính aria-current không cần thiết trên giao diện tab động vì JavaScript của chúng tôi xử lý trạng thái đã chọn bằng cách thêm aria-select = "true" trên tab hiện hoạt.

Sử dụng menu thả xuống

Thêm menu thả xuống với một chút HTML bổ sung và plugin JavaScript thả xuống .

Tab có trình đơn thả xuống

  

& lt;

ul

lớp

=

" nav nav-tabs "

& gt; < / p>

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link active"

aria-current

=

< p class = "s"> "trang"

href

=

"# "

& gt;

Đang hoạt động

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item thả xuống"

& gt;

& lt;

a

class

= < / p>

"nav-link dropdown-toggle"

data-bs-toggle

= < / p>

"dropdown"

href

=

" # "

vai trò

=

" nút "

aria-expand

=

"false"

& gt;

Trình đơn thả xuống

& lt; /

a

& gt;

& lt;

ul

class

= < / p>

"menu thả xuống"

& gt;

& lt;

li

& gt; & lt;

a

class

=

"dropdown-item"

< p class = "na"> href

=

"#"

& gt;

Hành động

& lt; /

a

& gt; & lt; /

li

& gt;

& lt;

li

& gt; & lt;

a

class

=

"dropdown-item"

< p class = "na"> href

=

"#"

& gt;

Một hành động khác

& lt; /

a

& gt; & lt; /

li

& gt;

& lt;

li

& gt; & lt;

a

class

=

"dropdown-item"

< p class = "na"> href

=

"#"

& gt;

Một cái gì đó khác ở đây

& lt; /

a

& gt; & lt; /

li

& gt;

& lt;

li

& gt; & lt;

giờ

lớp

=

"dropdown-divider"

& gt; & lt; /

li

& gt;

& lt;

li

& gt; & lt;

a

class

=

"dropdown-item"

< p class = "na"> href

=

"#"

& gt;

Liên kết riêng

& lt; /

a

& gt; & lt; /

li

& gt;

& lt; /

ul

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link bị vô hiệu hóa"

href

=

"#"

tabindex

=

"- 1"

aria-khuyết tật

=

"true"

& gt;

Đã tắt

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

Thuốc có danh sách thả xuống

  

& lt;

ul

lớp

=

" nav nav-thuốc "

& gt; < / p>

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link active"

aria-current

=

< p class = "s"> "trang"

href

=

"# "

& gt;

Đang hoạt động

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item thả xuống"

& gt;

& lt;

a

class

= < / p>

"nav-link dropdown-toggle"

data-bs-toggle

= < / p>

"dropdown"

href

=

" # "

vai trò

=

" nút "

aria-expand

=

"false"

& gt;

Trình đơn thả xuống

& lt; /

a

& gt;

& lt;

ul

class

= < / p>

"menu thả xuống"

& gt;

& lt;

li

& gt; & lt;

a

class

=

"dropdown-item"

< p class = "na"> href

=

"#"

& gt;

Hành động

& lt; /

a

& gt; & lt; /

li

& gt;

& lt;

li

& gt; & lt;

a

class

=

"dropdown-item"

< p class = "na"> href

=

"#"

& gt;

Một hành động khác

& lt; /

a

& gt; & lt; /

li

& gt;

& lt;

li

& gt; & lt;

a

class

=

"dropdown-item"

< p class = "na"> href

=

"#"

& gt;

Một cái gì đó khác ở đây

& lt; /

a

& gt; & lt; /

li

& gt;

& lt;

li

& gt; & lt;

giờ

lớp

=

"dropdown-divider"

< p class = "p"> & gt; & lt; /

li

& gt;

& lt;

li

& gt; & lt;

a

class

=

"dropdown-item"

< p class = "na"> href

=

"#"

& gt;

Liên kết riêng

& lt; /

a

& gt; & lt; /

li

& gt;

& lt; /

ul

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link"

href

=

"#"

& gt;

Liên kết

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

& gt;

& lt;

a

class

= < / p>

"nav-link bị vô hiệu hóa"

href

=

"#"

tabindex

=

"- 1"

aria-khuyết tật

=

"true"

& gt;

Đã tắt

& lt; /

a

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

Sass

Biến

  

$ nav-link-padding-y

:

. 5

rem

;

$ nav-link-padding-x

:

1

rem

;

$ nav-link-font-size

:

null

;

$ nav-link-font-weight

:

null

;

$ nav-link-color

:

$ link-color

;

$ nav-link-hover-color

:

$ link-hover-color

;

$ nav-link-transfer

:

color

.15

s

dễ ra

,

background-color

. 15

s

dễ hiểu

,

border-color

. 15

s

dễ ra

;

$ nav-link-disable-color

:

$ gray-600

< p class = "p">;

$ nav-tabs-border-color

:

$ gray-300

< p class = "p">;

$ nav-tabs-border-width

:

$ border-width

< p class = "p">;

$ nav-tabs-border-radius

:

$ border-radius

< p class = "p">;

$ nav-tabs-link-hover-border-color

:

$ gray-200 < / p>

$ gray-200

$ nav-tabs-border-color

;

$ nav-tabs-link-active-color

:

$ gray-700

;

$ nav-tabs-link-active-bg

:

$ body-bg

;

$ nav-tabs-link-active-border-color

:

$ gray-300 < / p>

$ gray-300

$ nav-tabs-link-active-bg

;

$ nav-Drugs-border-radius

:

$ border-radius

< p class = "p">;

$ nav-Drugs-link-active-color

:

$ component-active-color < / p>

;

$ nav-Drugs-link-active-bg

:

$ component-active-bg < / p>

;

Hành vi JavaScript

Sử dụng plugin JavaScript tab — bao gồm nó riêng lẻ hoặc thông qua tệp bootstrap.js đã biên dịch — để mở rộng các tab và viên điều hướng của chúng tôi nhằm tạo các ngăn có thể tab cho nội dung cục bộ.

Giao diện theo thẻ động, như được mô tả trong Thực tiễn về tác giả WAI ARIA , yêu cầu role = "tablist" , role = "tab" , role = "tabpanel" và các thuộc tính aria- bổ sung để truyền đạt cấu trúc, chức năng và trạng thái hiện tại của chúng cho người dùng công nghệ hỗ trợ (chẳng hạn như trình đọc màn hình). Cách tốt nhất, chúng tôi khuyên bạn nên sử dụng các phần tử & lt; button & gt; cho các tab, vì đây là các điều khiển kích hoạt thay đổi động, thay vì các liên kết điều hướng đến một trang hoặc vị trí mới.

Lưu ý rằng giao diện theo thẻ động không được chứa menu thả xuống, vì điều này gây ra các vấn đề về khả năng sử dụng lẫn khả năng truy cập. Từ góc độ khả năng sử dụng, thực tế là phần tử trình kích hoạt của tab hiện đang hiển thị không hiển thị ngay lập tức (vì nó nằm bên trong menu thả xuống đã đóng) có thể gây ra nhầm lẫn. Từ quan điểm về khả năng tiếp cận, hiện không có cách hợp lý nào để ánh xạ loại cấu trúc này với một mô hình WAI ARIA tiêu chuẩn, có nghĩa là nó không thể dễ hiểu đối với người dùng công nghệ hỗ trợ.

Đây là một số nội dung trình giữ chỗ trong nội dung được liên kết của tab Trang chủ. Việc nhấp vào tab khác sẽ chuyển đổi chế độ hiển thị của tab này cho lần tiếp theo. Tab JavaScript hoán đổi các lớp để kiểm soát mức độ hiển thị và kiểu dáng của nội dung. Bạn có thể sử dụng nó với các tab, viên thuốc và bất kỳ điều hướng có cấp quyền nào khác của .nav .

Đây là một số nội dung trình giữ chỗ trong nội dung được liên kết của tab Tiểu sử. Việc nhấp vào một tab khác sẽ chuyển đổi chế độ hiển thị của tab này cho lần tiếp theo. Tab JavaScript hoán đổi các lớp để kiểm soát mức độ hiển thị và kiểu dáng của nội dung. Bạn có thể sử dụng nó với các tab, viên thuốc và bất kỳ điều hướng có cấp quyền nào khác của .nav .

  

& lt;

ul

lớp

=

" nav nav-tabs "

id

=

"myTab"

vai trò

=

"tablist"

& gt;

& lt;

li

class

= < / p>

"nav-item"

vai trò

=

"bản trình bày"

& gt;

Nút

& lt;

class

= < / p>

"nav-link active"

id

=

"home-tab"

data-bs-toggle

=

" tab "

data-bs-target

=

" # home "

loại

=

" nút "

vai trò

=

"tab"

aria-control

=

"nhà"

aria-select

=

" true "

& gt;

Trang chủ

& lt; / < / p>

nút

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

vai trò

=

"bản trình bày"

& gt;

Nút

& lt;

class

= < / p>

"nav-link"

id

=

"profile-tab"

data-bs-toggle

=

"tab"

data-bs-target

=

"# profile"

=

"nút"

vai trò

=

" tab "

aria-control

=

"hồ sơ"

aria-select

=

" false "

& gt;

Hồ sơ

& lt; /

nút

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

vai trò

=

"bản trình bày"

& gt;

Nút

& lt;

class

= < / p>

"nav-link"

id

=

"contact-tab"

data-bs-toggle

=

"tab"

data-bs-target

=

"# contact"

=

"nút"

vai trò

=

" tab "

aria-control

=

"contact"

aria-select

=

" false "

& gt;

Liên hệ

& lt; /

nút

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

& lt;

div

class

= < / p>

"tab-content"

id

=

"myTabContent"

& gt;

& lt;

div

class

= < / p>

"tab-ngăn phai hiển thị hoạt động"

id

=

"nhà"

vai trò

=

"tabpanel"

aria-labellingby

=

"tab nhà"

& gt;

...

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"tab-panel phai"

id

=

"hồ sơ"

vai trò

=

"tabpanel" < / p>

aria-labellingby

=

"profile-tab"

& gt;

...

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"tab-panel phai"

id

=

"liên hệ"

vai trò

=

"tabpanel" < / p>

aria-labellingby

=

"contact-tab"

& gt;

...

& lt; /

div

& gt;

& lt; /

div

& gt;

Để giúp phù hợp với nhu cầu của bạn, điều này hoạt động với đánh dấu dựa trên & lt; ul & gt; , như được hiển thị ở trên hoặc với bất kỳ đánh dấu "tự cuộn" nào tùy ý. Lưu ý rằng nếu bạn đang sử dụng & lt; nav & gt; , bạn không nên thêm role = "tablist" trực tiếp vào nó, vì điều này sẽ ghi đè vai trò gốc của phần tử là mốc dẫn đường. Thay vào đó, hãy chuyển sang một phần tử thay thế (trong ví dụ bên dưới, một & lt; div & gt; đơn giản) và quấn & lt; nav & gt; xung quanh nó.

Đây là một số nội dung trình giữ chỗ trong nội dung được liên kết của tab Trang chủ. Việc nhấp vào tab khác sẽ chuyển đổi chế độ hiển thị của tab này cho lần tiếp theo. Tab JavaScript hoán đổi các lớp để kiểm soát mức độ hiển thị và kiểu dáng của nội dung. Bạn có thể sử dụng nó với các tab, viên thuốc và bất kỳ điều hướng có cấp quyền nào khác của .nav .

Đây là một số nội dung trình giữ chỗ trong nội dung được liên kết của tab Tiểu sử. Việc nhấp vào một tab khác sẽ chuyển đổi chế độ hiển thị của tab này cho lần tiếp theo. Tab JavaScript hoán đổi các lớp để kiểm soát mức độ hiển thị và kiểu dáng của nội dung. Bạn có thể sử dụng nó với các tab, viên thuốc và bất kỳ điều hướng có cấp quyền nào khác của .nav .

  

& lt;

nav

& gt;

& lt;

div

class

= < / p>

"nav nav-tabs"

id

=

"nav-tab"

vai trò

=

"danh sách tab "

& gt;

Nút

& lt;

class

= < / p>

"nav-link active"

id

=

"nav-home-tab"

data-bs-toggle

=

"tab"

data-bs-target

=

" # nav-home "

type

=

" button "

vai trò

=

"tab"

aria -controls

=

"nav-home"

aria-select

=

"true"

& gt;

Trang chủ

& lt; /

nút

& gt;

Nút

& lt;

class

= < / p>

"nav-link"

id

=

"nav-profile-tab"

data-bs-toggle

=

" tab "

data-bs-target

=

" # nav-profile "

type

=

" button "

< p class = "na"> vai trò

=

"tab"

aria- điều khiển

=

"nav-profile"

aria-select

=

"false"

& gt;

Hồ sơ

& lt; /

nút

& gt;

Nút

& lt;

class

= < / p>

"nav-link"

id

=

"nav-contact-tab"

data-bs-toggle

=

" tab "

data-bs-target

=

" # nav-contact "

type

=

" button "

< p class = "na"> vai trò

=

"tab"

aria- điều khiển

=

"nav-contact"

aria-select

=

"false"

& gt;

Liên hệ

& lt; /

nút

& gt;

& lt; /

div

& gt;

& lt; /

nav

& gt;

& lt;

div

class

= < / p>

"tab-content"

id

=

"nav-tabContent"

& gt;

& lt;

div

class

= < / p>

"tab-panel phai hiển thị hoạt động"

id

=

< p class = "s"> "nav-home"

vai trò

=

"tabpanel"

aria-labellingby

=

"nav-home-tab"

& gt;

...

& lt; /

div

< p class = "p"> & gt;

& lt;

div

class

= < / p>

"tab-panel phai"

id

=

"nav-profile"

vai trò

=

"tabpanel "

aria-labellingby

=

" nav-profile-tab "

& gt;

...

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"tab-panel phai"

id

=

"nav-contact"

vai trò

=

"tabpanel "

aria-labellingby

=

" nav-contact-tab "

& gt;

...

& lt; /

div

& gt;

& lt; /

div

& gt;

Plugin tab cũng hoạt động với thuốc viên.

Đây là một số nội dung trình giữ chỗ trong nội dung được liên kết của tab Trang chủ. Việc nhấp vào tab khác sẽ chuyển đổi chế độ hiển thị của tab này cho lần tiếp theo. Tab JavaScript hoán đổi các lớp để kiểm soát mức độ hiển thị và kiểu dáng của nội dung. Bạn có thể sử dụng nó với các tab, viên thuốc và bất kỳ điều hướng có cấp quyền nào khác của .nav .

Đây là một số nội dung trình giữ chỗ trong nội dung được liên kết của tab Tiểu sử. Việc nhấp vào một tab khác sẽ chuyển đổi chế độ hiển thị của tab này cho lần tiếp theo. Tab JavaScript hoán đổi các lớp để kiểm soát mức độ hiển thị và kiểu dáng của nội dung. Bạn có thể sử dụng nó với các tab, viên thuốc và bất kỳ điều hướng có cấp quyền nào khác của .nav .

  

& lt;

ul

lớp

=

" nav nav-thuốc mb-3 "

id

=

"Drugs-tab"

vai trò

=

"danh sách tab"

& gt;

& lt;

li

class

= < / p>

"nav-item"

vai trò

=

"bản trình bày"

& gt;

Nút

& lt;

class

= < / p>

"nav-link active"

id

=

"Drugs-home-tab"

data-bs-toggle

=

"thuốc"

data-bs-target

=

" # thuốc-home "

loại

=

" nút "

vai trò

=

"tab"

aria -controls

=

"Drugs-home"

aria-select

=

"true"

& gt;

Trang chủ

& lt; /

nút

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

vai trò

=

"bản trình bày"

& gt;

Nút

& lt;

class

= < / p>

"nav-link"

id

=

"Drugs-profile-tab"

data-bs-toggle

=

" thuốc "

data-bs-target

=

" # Thuốc viên-hồ sơ "

loại

=

" nút "

< p class = "na"> vai trò

=

"tab"

aria- điều khiển

=

"Drugs-profile"

aria-select

=

"false"

& gt;

Hồ sơ

& lt; /

nút

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

vai trò

=

"bản trình bày"

& gt;

Nút

& lt;

class

= < / p>

"nav-link"

id

=

"Drugs-contact-tab"

data-bs-toggle

=

" thuốc "

data-bs-target

=

" # thuốc-contact "

loại

=

" nút "

< p class = "na"> vai trò

=

"tab"

aria- điều khiển

=

"Drugs-contact"

aria-select

=

"false"

& gt;

Liên hệ

& lt; /

nút

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

& lt;

div

class

= < / p>

"tab-content"

id

=

"Drugs-tabContent"

& gt;

& lt;

div

class

= < / p>

"tab-panel phai hiển thị hoạt động"

id

=

< p class = "s"> "Drugs-home"

vai trò

=

"tabpanel"

aria-labellingby

=

"Drugs-home-tab"

& gt;

...

& lt; /

div

< p class = "p"> & gt;

& lt;

div

class

= < / p>

"tab-panel phai"

id

=

"Drugs-profile"

role

=

"tabpanel "

aria-labellingby

=

" Drugs-profile-tab "

& gt;

...

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"tab-panel phai"

id

=

"Drugs-contact"

role

=

"tabpanel "

aria-labellingby

=

" Drugs-contact-tab "

& gt;

...

& lt; /

div

& gt;

& lt; /

div

& gt;

Và với thuốc dọc.

Đây là một số nội dung trình giữ chỗ trong nội dung được liên kết của tab Trang chủ. Việc nhấp vào tab khác sẽ chuyển đổi chế độ hiển thị của tab này cho lần tiếp theo. Tab JavaScript hoán đổi các lớp để kiểm soát mức độ hiển thị và kiểu dáng của nội dung. Bạn có thể sử dụng nó với các tab, viên thuốc và bất kỳ điều hướng có cấp quyền nào khác của .nav .

Đây là một số nội dung trình giữ chỗ trong nội dung được liên kết của tab Tiểu sử. Việc nhấp vào một tab khác sẽ chuyển đổi chế độ hiển thị của tab này cho lần tiếp theo. Tab JavaScript hoán đổi các lớp để kiểm soát mức độ hiển thị và kiểu dáng của nội dung. Bạn có thể sử dụng nó với các tab, viên thuốc và bất kỳ điều hướng có cấp quyền nào khác của .nav .

Đây là một số nội dung trình giữ chỗ trong nội dung được liên kết của tab Tin nhắn. Việc nhấp vào tab khác sẽ chuyển đổi chế độ hiển thị của tab này cho lần tiếp theo. Tab JavaScript hoán đổi các lớp để kiểm soát mức độ hiển thị và kiểu dáng của nội dung. Bạn có thể sử dụng nó với các tab, viên thuốc và bất kỳ điều hướng có cấp quyền nào khác của .nav .

Đây là một số nội dung trình giữ chỗ trong nội dung được liên kết của tab Cài đặt. Việc nhấp vào tab khác sẽ chuyển đổi chế độ hiển thị của tab này cho lần tiếp theo. Tab JavaScript hoán đổi các lớp để kiểm soát mức độ hiển thị và kiểu dáng của nội dung. Bạn có thể sử dụng nó với các tab, viên thuốc và bất kỳ điều hướng có cấp quyền nào khác của .nav .

  

& lt;

div

class

=

" d-flex align-items-start "

& gt;

& lt;

div

class

= < / p>

"nav flex-column nav-Drugs me-3"

id

= < / p>

"v-Drugs-tab"

vai trò

=

"tablist"

aria-direction

=

" dọc "

& gt;

Nút

& lt;

class

= < / p>

"nav-link active"

id

=

"v-Drugs-home-tab"

data-bs-toggle

=

"tablet"

data-bs-target

=

"# v-Drugs-home"

type

=

"button"

vai trò

=

"tab"

aria-control

=

"v-Drugs-home"

aria-select

=

"true Nút "

& gt;

Trang chủ

& lt; /

& gt;

Nút

& lt;

class

= < / p>

"nav-link"

id

=

"v-Drugs-profile-tab"

data-bs-toggle

=

"thuốc"

data-bs-target

=

"# v-Drugs-profile"

type

=

"button" < / p>

vai trò

=

"tab"

aria-control

=

" v-Drugs-profile "

aria -selected

=

"false"

& gt;

Hồ sơ < p class = "p"> & lt; /

nút

& gt;

Nút

& lt;

class

= < / p>

"nav-link"

id

=

"v-Drugs-messages-tab"

data-bs-toggle

=

"thuốc"

data-bs-target

=

"# v-Drugs-messages"

type

=

"button" < / p>

vai trò

=

"tab"

aria-control

=

" v-tonic-messages "

aria -selected

=

"false"

& gt;

Tin nhắn < p class = "p"> & lt; /

nút

& gt;

Nút

& lt;

class

= < / p>

"nav-link"

id

=

"v-Drugs-settings-tab"

data-bs-toggle

=

"thuốc"

data-bs-target

=

"# v-Drugs-settings"

type

=

"button" < / p>

vai trò

=

"tab"

aria-control

=

" v-Drugs-settings "

aria -selected

=

"false"

& gt;

Cài đặt < p class = "p"> & lt; /

nút

& gt;

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"tab-content"

id

=

"v-Drugs-tabContent"

& gt;

& lt;

div

class

= < / p>

"tab-panel phai hiển thị hoạt động"

id

=

< p class = "s"> "v-Drugs-home"

vai trò

=

" tabpanel "

aria-labellingby

=

" v-thuốc- tab trang chủ "

& gt;

...

& lt; /

div < / p>

& gt;

& lt;

div

class

= < / p>

"tab-panel phai"

id

=

"v-Drugs-profile"

vai trò

=

"tabpanel"

aria-labellingby

=

"v-Drugs-profile- tab "

& gt;

...

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"tab-panel phai"

id

=

"v-thuốc-tin nhắn"

vai trò

=

"tabpanel"

aria-labellingby

=

"v-tonic-messages- tab "

& gt;

...

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"tab-panel phai"

id

=

"v-Drugs-settings"

vai trò

=

"tabpanel"

aria-labellingby

=

"v-Drugs-settings- tab "

& gt;

...

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt; /

div

& gt;

Sử dụng thuộc tính dữ liệu

Bạn có thể kích hoạt điều hướng tab hoặc viên thuốc mà không cần viết bất kỳ JavaScript nào bằng cách chỉ định data-bs-toggle = "tab" hoặc data-bs-toggle = "tablet" trên một phần tử. Sử dụng các thuộc tính dữ liệu này trên .nav-tabs hoặc .nav-thuốc .

  

& lt;! - Các tab điều hướng - & gt;

& lt;

ul

class

= < / p>

"nav nav-tabs"

id

=

"myTab"

vai trò

=

"tablist" < / p>

& gt;

& lt;

li

class

= < / p>

"nav-item"

vai trò

=

"bản trình bày"

& gt;

Nút

& lt;

class

= < / p>

"nav-link active"

id

=

"home-tab"

data-bs-toggle

=

" tab "

data-bs-target

=

" # home "

loại

=

" nút "

vai trò

=

"tab"

aria-control

=

"nhà"

aria-select

=

" true "

& gt;

Trang chủ

& lt; / < / p>

nút

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

vai trò

=

"bản trình bày"

& gt;

Nút

& lt;

class

= < / p>

"nav-link"

id

=

"profile-tab"

data-bs-toggle

=

"tab"

data-bs-target

=

"# profile"

=

"nút"

vai trò

=

" tab "

aria-control

=

"hồ sơ"

aria-select

=

" false "

& gt;

Hồ sơ

& lt; /

nút

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

vai trò

=

"bản trình bày"

& gt;

Nút

& lt;

class

= < / p>

"nav-link"

id

=

"messages-tab"

data-bs-toggle

=

"tab"

data-bs-target

=

"# tin nhắn"

=

"nút"

vai trò

=

" tab "

aria-control

=

"tin nhắn"

aria-select

=

" false "

& gt;

Tin nhắn

& lt; /

nút

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

vai trò

=

"bản trình bày"

& gt;

Nút

& lt;

class

= < / p>

"nav-link"

id

=

"settings-tab"

data-bs-toggle

=

"tab"

data-bs-target

=

"# settings"

=

"nút"

vai trò

=

" tab "

aria-control

=

"cài đặt"

aria-select

=

" false "

& gt;

Cài đặt

& lt; /

nút

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

& lt;! - Ngăn tab - & gt;

& lt;

div

class

= < / p>

"tab-content"

& gt;

& lt;

div

class

= < / p>

"tab-pane active"

id

=

"nhà"

vai trò

=

"tabpanel" < / p>

aria-labellingby

=

"home-tab"

& gt;

...

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"tab-pane"

id

=

"hồ sơ"

vai trò

=

"tabpanel"

aria-labellingby

=

"profile-tab"

& gt;

...

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"tab-pane"

id

=

"tin nhắn"

vai trò

=

"tabpanel"

aria-labellingby

=

"messages-tab"

& gt;

...

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"tab-pane"

id

=

"cài đặt"

vai trò

=

"tabpanel"

aria-labellingby

=

"settings-tab"

& gt;

...

& lt; /

div

& gt;

& lt; /

div

& gt;

Qua JavaScript

Bật các tab có thể lập bảng qua JavaScript (mỗi tab cần được kích hoạt riêng lẻ):

  

var

triggerTabList

=

[].

lát

.

gọi

(

tài liệu

.

querySelectorAll

(

'# myTab a'

))

triggerTabList

.

forEach

(

function

(

triggerEl

)

{

var

tabTrigger

=

new

bootstrap

.

Tab

(

triggerEl

)

triggerEl

.

addEventListener

(

'click'

,

chức năng

(

sự kiện

)

{

event

.

PreventDefault

() < / p>

tabTrigger

.

hiển thị

() < / p>

})

})

Bạn có thể kích hoạt các tab riêng lẻ theo một số cách:

  

var

triggerEl

=

tài liệu

.

querySelector

(

'# myTab a [href = "# profile"]'

)

bootstrap

.

Tab

.

getInstance

(

triggerEl

) .

hiển thị

()

// Chọn tab theo tên

var

triggerFirstTabEl

=

document

.

querySelector

(

' #myTab li: first-child a '

)

bootstrap

.

Tab

.

getInstance

(

triggerFirstTabEl

) .

hiển thị

()

// Chọn tab đầu tiên

Hiệu ứng mờ dần

Để làm cho các tab mờ dần, hãy thêm .fade vào mỗi .tab-pane . Ngăn tab đầu tiên cũng phải có .show để hiển thị nội dung ban đầu.

  

& lt;

div

lớp

=

" tab-content "

& gt;

& lt;

div

class

= < / p>

"tab-panel phai hiển thị hoạt động"

id

=

< p class = "s"> "nhà"

vai trò

=

"tabpanel "

aria-labellingby

=

" home-tab "

& gt;

...

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"tab-panel phai"

id

=

"hồ sơ"

vai trò

=

"tabpanel" < / p>

aria-labellingby

=

"profile-tab"

& gt;

...

& lt; /

< p class = "nt"> div

& gt;

& lt;

div

class

= < / p>

"tab-panel phai"

id

=

"tin nhắn"

vai trò

=

"tabpanel" < / p>

aria-labellingby

=

"messages-tab"

& gt;

...

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"tab-panel phai"

id

=

"cài đặt"

vai trò

=

"tabpanel" < / p>

aria-labellingby

=

"settings-tab"

& gt;

...

& lt; /

div

& gt;

& lt; /

div

& gt;

Phương thức

Phương thức và chuyển đổi không đồng bộ

Tất cả các phương thức API đều không đồng bộ và bắt đầu chuyển đổi . Họ quay lại người gọi ngay sau khi quá trình chuyển đổi bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc . Ngoài ra, lệnh gọi phương thức trên thành phần chuyển tiếp sẽ bị bỏ qua .

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin .

constructor

Kích hoạt phần tử tab và vùng chứa nội dung. Tab phải có data-bs-target hoặc nếu sử dụng liên kết, thuộc tính href , nhắm mục tiêu một nút vùng chứa trong DOM.

  

& lt;

ul

lớp

=

" nav nav-tabs "

id

=

"myTab"

vai trò

=

"tablist"

& gt;

& lt;

li

class

= < / p>

"nav-item"

vai trò

=

"bản trình bày"

& gt;

Nút

& lt;

class

= < / p>

"nav-link active"

id

=

"home-tab"

data-bs-toggle

=

" tab "

data-bs-target

=

" # home "

loại

=

" nút "

vai trò

=

"tab"

aria-control

=

"nhà"

aria-select

=

" true "

& gt;

Trang chủ

& lt; / < / p>

nút

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

vai trò

=

"bản trình bày"

& gt;

Nút

& lt;

class

= < / p>

"nav-link"

id

=

"profile-tab"

data-bs-toggle

=

"tab"

data-bs-target

=

"# profile"

=

"nút"

vai trò

=

" tab "

aria-control

=

"hồ sơ"

aria-select

=

" false "

& gt;

Hồ sơ

& lt; /

nút

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

vai trò

=

"bản trình bày"

& gt;

Nút

& lt;

class

= < / p>

"nav-link"

id

=

"messages-tab"

data-bs-toggle

=

"tab"

data-bs-target

=

"# tin nhắn"

=

"nút"

vai trò

=

" tab "

aria-control

=

"tin nhắn"

aria-select

=

" false "

& gt;

Tin nhắn

& lt; /

nút

& gt;

& lt; /

li

& gt;

& lt;

li

class

= < / p>

"nav-item"

vai trò

=

"bản trình bày"

& gt;

Nút

& lt;

class

= < / p>

"nav-link"

id

=

"settings-tab"

data-bs-toggle

=

"tab"

data-bs-target

=

"# settings"

=

"nút"

vai trò

=

" tab "

aria-control

=

"cài đặt"

aria-select

=

" false "

& gt;

Cài đặt

& lt; /

nút

& gt;

& lt; /

li

& gt;

& lt; /

ul

& gt;

& lt;

div

class

= < / p>

"tab-content"

& gt;

& lt;

div

class

= < / p>

"tab-pane active"

id

=

"nhà"

vai trò

=

"tabpanel" < / p>

aria-labellingby

=

"home-tab"

& gt;

...

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"tab-pane"

id

=

"hồ sơ"

vai trò

=

"tabpanel"

aria-labellingby

=

"profile-tab"

& gt;

...

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"tab-pane"

id

=

"tin nhắn"

vai trò

=

"tabpanel"

aria-labellingby

=

"messages-tab"

& gt;

...

& lt; /

div

& gt;

& lt;

div

class

= < / p>

"tab-pane"

id

=

"cài đặt"

vai trò

=

"tabpanel"

aria-labellingby

=

"settings-tab"

& gt;

...

& lt; /

div

& gt;

& lt; /

div

& gt;

& lt;

script

& gt;

var

firstTabEl

=

document

.

querySelector

(

' #myTab li: last-child a '

)

var

firstTab

=

new

bootstrap

.

Tab

(

firstTabEl

)

firstTab

.

hiển thị

() < / p>

& lt; /

script

& gt;

hiển thị

Chọn tab đã cho và hiển thị ngăn được liên kết với nó. Bất kỳ tab nào khác đã được chọn trước đó sẽ trở thành không được chọn và ngăn liên kết của nó bị ẩn. Quay lại trình gọi trước khi ngăn tab thực sự được hiển thị (tức là trước khi sự kiện shows.bs.tab xảy ra).

  

var

someTabTriggerEl

=

tài liệu

.

querySelector

(

'# someTabTrigger'

)

var

tab

=

new

bootstrap

.

Tab

(

someTabTriggerEl

)

tab

.

hiển thị

() < / p>

vứt bỏ

Hủy tab của phần tử.

getInstance

Phương thức tĩnh cho phép bạn lấy bản sao tab được liên kết với phần tử DOM

  

var

triggerEl

=

tài liệu

.

querySelector

(

'# trigger'

)

var

tab

=

bootstrap

.

Tab

.

getInstance

(

triggerEl

)

// Trả về một phiên bản tab Bootstrap

getOrCreateInstance

Phương thức static cho phép bạn lấy bản sao tab được liên kết với phần tử DOM hoặc tạo một bản mới trong trường hợp nó chưa được khởi tạo

  

var

triggerEl

=

tài liệu

.

querySelector

(

'# trigger'

)

var

tab

=

bootstrap

.

Tab

.

getOrCreateInstance

(

triggerEl

)

// Trả về một phiên bản tab Bootstrap

Sự kiện

Khi hiển thị một tab mới, các sự kiện sẽ kích hoạt theo thứ tự sau:

  1. hide.bs.tab (trên tab đang hoạt động hiện tại)
  2. show.bs.tab (trên tab được hiển thị)
  3. hidden.bs.tab (trên tab hoạt động trước đó, tab giống với sự kiện hide.bs.tab )
  4. shows.bs.tab (trên tab vừa được hiển thị mới hoạt động, tab giống như đối với sự kiện show.bs.tab )

Nếu không có tab nào hoạt động, thì các sự kiện hide.bs.tab hidden.bs.tab sẽ không được kích hoạt.

Loại sự kiện
Sự mô tả

show.bs.tab
Sự kiện này kích hoạt trên chương trình tab, nhưng trước khi tab mới được hiển thị. Sử dụng event.target event.osystemTarget để nhắm mục tiêu tab đang hoạt động và tab hoạt động trước đó (nếu có) tương ứng.

shows.bs.tab
Sự kiện này kích hoạt trên tab hiển thị sau khi tab được hiển thị. Sử dụng event.target event.osystemTarget để nhắm mục tiêu tab đang hoạt động và tab hoạt động trước đó (nếu có) tương ứng.

hide.bs.tab
Sự kiện này kích hoạt khi một tab mới được hiển thị (và do đó tab đang hoạt động trước đó sẽ bị ẩn). Sử dụng event.target event.osystemTarget để nhắm mục tiêu tab đang hoạt động hiện tại và tab sắp hoạt động mới, tương ứng.

hidden.bs.tab
Sự kiện này kích hoạt sau khi một tab mới được hiển thị (và do đó tab hoạt động trước đó bị ẩn). Sử dụng event.target event.osystemTarget để nhắm mục tiêu tab hoạt động trước đó và tab hoạt động mới, tương ứng.

  

var

tabEl

=

tài liệu

.

querySelector

(

'button [data-bs-toggle = "tab"]'

)

tabEl

.

addEventListener

(

'show.bs.tab'

,

hàm

(

sự kiện

)

{

event

.

target

// mới tab kích hoạt

sự kiện

.

RelatedTarget

// tab hoạt động trước đó

})


Xem thêm những thông tin liên quan đến chủ đề các tab bootstrap có nội dung

Demo Tạo Menu Tab Sừ Dụng Bootstrap 4 and jQuery (Go to Specific Tab on Page Reload)

  • Tác giả: Học Lập Trình Online
  • Ngày đăng: 2020-12-11
  • Đánh giá: 4 ⭐ ( 7195 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Demo Create Menu Tab In Bootstrap4 and jQuery
    Go to Specific Tab on Page Reload or Hyperlink in Bootstrap
    Demo Tạo Menu Tab Sừ Dụng Bootstrap 4 and jQuery

Bài 6 - Tạo Tabs bằng Bootstrap

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 9909 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cho tới thời điểm này, chắc các bạn cũng đã khá quen thuộc với việc sử dụng Bootstrap trong quá trình xây dựng HTML. Sẽ còn rất nhiều ứng dụng thú vị của Bootstrap đang chờ chúng ta khám phá. Hôm nay...

Bootstrap Tab

  • Tác giả: comdy.vn
  • Đánh giá: 5 ⭐ ( 8330 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong hướng dẫn này, bạn sẽ học cách tạo các tab động để chuyển đổi giữa các nội dung bằng cách sử dụng plugin Bootstrap tab.

Tab và Pill trong Bootstrap, cách tạo và sử dụng

  • Tác giả: thuthuat.taimienphi.vn
  • Đánh giá: 3 ⭐ ( 6703 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tab và Pill trong Bootstrap, cách tạo và sử dụng

Cơ bản về Nav xây dựng Tab trong Bootstrap

  • Tác giả: xuanthulab.net
  • Đánh giá: 5 ⭐ ( 4362 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về Nav với phần tử .nav, .nav-item, .nav-link từ đó xây dựng nên HTML Tabs

Bài 9: Navs – Tạo thanh menu trong Bootstrap

  • Tác giả: goclamweb.com
  • Đánh giá: 5 ⭐ ( 7282 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài bày, chúng ta sẽ tìm hiểu về một thành phần khác của Bootstrap là Navs - tạo thanh menu trong Bootstrap. Mình sẽ hướng dẫn các bạn các tạo một menu đơn giản, với những kiến thức Bootstrap đã học. Ngoài ra, mình cũng hướng dẫn nâng cao về menu nhiều tab.

Hướng dẫn tạo Tabs trong bootstrap 3

  • Tác giả: getbootstrap.com.vn
  • Đánh giá: 5 ⭐ ( 7157 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tabs có quan hệ mật thiết với component navs bởi vì nó cũng là 1 dạng danh sách nằm ngang được phan làm từng khối riêng biệt.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Ví dụ đơn giản về Ajax / jQuery.getJSON - jquery ajax get json ví dụ