Hướng dẫn active class in bootstrap 4 - lớp tích cực trong bootstrap 4

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

Show

Cơ sở Nav

Điều hướng có sẵn trong Bootstrap Chia sẻ đánh dấu chung và các kiểu, từ lớp cơ sở

 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
6 đến các trạng thái hoạt động và khuyết tật. Trao đổi các lớp sửa đổi để chuyển đổi giữa mỗi kiểu.

Thành phần cơ sở

 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
6 được xây dựng với Flexbox và cung cấp một 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ố điểm ghi đè kiểu (để làm việc với danh sách), một số phần đệm liên kết cho các khu vực hit lớn hơn và kiểu dáng khuyết tật cơ bản.

Thành phần cơ sở

 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
6 không bao gồm bất kỳ trạng thái
 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
9 nào. Các ví dụ sau đây 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 dáng đặc biệt nào.

  • Tích cực
  • Liên kết
  • Liên kết
  • Vô hiệu hóa

 class="nav">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  

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

 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
0 như trên, hoặc cuộn của riêng bạn với phần tử
 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
1. Bởi vì
 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
6 sử dụng
 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
3, các liên kết NAV hoạt động giống như các mục NAV sẽ làm, nhưng không có đánh dấu thêm.

Liên kết hoạt động liên kết bị vô hiệu hóa

 class="nav">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled

Phong cách có sẵn

Thay đổi kiểu của thành phần

 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
6S với các bộ điều chỉnh và tiện ích. Trộn và kết hợp khi cần thiết, hoặc xây dựng của riêng bạn.

Liên kết ngang

Thay đổi sự liên kết ngang của NAV của bạn với các tiện ích Flexbox. Theo mặc định, NAV được liên kết trái, nhưng bạn có thể dễ dàng thay đổi chúng thành trung tâm hoặc đúng được căn chỉnh.

Tập trung với

 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
5:

 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  

Phù hợp bên phải với

 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
6:

 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  

Theo chiều dọc

Xếp chồng điều hướng của bạn bằng cách thay đổi hướng mục Flex với tiện ích

 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
7. Cần phải xếp chúng trên một số chế độ xem nhưng không phải là những người khác? Sử dụng các phiên bản phản hồi (ví dụ:
 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
8).

  • Tích cực
  • Liên kết
  • Liên kết
  • Vô hiệu hóa

 class="nav flex-column">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  

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

 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
0 như trên, hoặc cuộn của riêng bạn với phần tử
 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
1. Bởi vì
 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
6 sử dụng
 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
3, các liên kết NAV hoạt động giống như các mục NAV sẽ làm, nhưng không có đánh dấu thêm.

Liên kết hoạt động liên kết bị vô hiệu hóa

 class="nav flex-column">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled

Phong cách có sẵn

Thay đổi kiểu của thành phần

 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
6S với các bộ điều chỉnh và tiện ích. Trộn và kết hợp khi cần thiết, hoặc xây dựng của riêng bạn.

  • Tích cực
  • Liên kết
  • Liên kết
  • Vô hiệu hóa

 class="nav nav-tabs">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  

Liên kết hoạt động liên kết bị vô hiệu hóa

  • Tích cực
  • Liên kết
  • Liên kết
  • Vô hiệu hóa

 class="nav nav-pills">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  

Liên kết hoạt động liên kết bị vô hiệu hóa

  • Tích cực
  • Liên kết
  • Liên kết
  • Vô hiệu hóa

 class="nav nav-pills nav-fill">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Longer nav link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  

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

 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
0 như trên, hoặc cuộn của riêng bạn với phần tử
 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
1. Bởi vì
 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
6 sử dụng
 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
3, các liên kết NAV hoạt động giống như các mục NAV sẽ làm, nhưng không có đánh dấu thêm.

Liên kết hoạt động liên kết bị vô hiệu hóa

 class="nav nav-pills nav-fill">
   class="nav-item nav-link active" href="#">Active
   class="nav-item nav-link" href="#">Link
   class="nav-item nav-link" href="#">Link
   class="nav-item nav-link disabled" href="#">Disabled

Phong cách có sẵn

Thay đổi kiểu của thành phần
 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
6S với các bộ điều chỉnh và tiện ích. Trộn và kết hợp khi cần thiết, hoặc xây dựng của riêng bạn.

 class="nav">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
0

Liên kết ngang

Liên kết hoạt động liên kết bị vô hiệu hóa

 class="nav">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
1

Phong cách có sẵn

Thay đổi kiểu của thành phần

 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
6S với các bộ điều chỉnh và tiện ích. Trộn và kết hợp khi cần thiết, hoặc xây dựng của riêng bạn.

Liên kết hoạt động liên kết bị vô hiệu hóa

 class="nav">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
2

Phong cách có sẵn

Thay đổi kiểu của thành phần

 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
6S với các bộ điều chỉnh và tiện ích. Trộn và kết hợp khi cần thiết, hoặc xây dựng của riêng bạn.

Liên kết ngangnot be given

 class="nav flex-column">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
7,
 class="nav flex-column">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
8 or
 class="nav flex-column">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
9 attributes. These are only appropriate for dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices. See JavaScript behavior for dynamic tabbed interfaces in this section for an example.

Thay đổi sự liên kết ngang của NAV của bạn với các tiện ích Flexbox. Theo mặc định, NAV được liên kết trái, nhưng bạn có thể dễ dàng thay đổi chúng thành trung tâm hoặc đúng được căn chỉnh.

Tập trung với

 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
5:

  • Tích cực
  • Theo chiều dọc
  • Liên kết
  • Vô hiệu hóa

 class="nav">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
3

  • Tích cực
  • Theo chiều dọc
  • Liên kết
  • Vô hiệu hóa

 class="nav">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
4

Liên kết hoạt động liên kết bị vô hiệu hóa

Phong cách có sẵn

Các giao diện được xếp hạng động, như được mô tả trong các hoạt động tác giả WAI ARIA, yêu cầu

 class="nav flex-column">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
7,
 class="nav flex-column">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
8,
 class="nav flex-column">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
9 và các thuộc tính
 class="nav nav-tabs">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
5 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ợ (như đầu đọc màn hình).

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

  • Nhà
  • Hồ sơ
  • Tiếp xúc

Raw denim có lẽ bạn đã không nghe nói về họ quần short jean Austin. Nesciunt Tofu Stumptown Aliqua, Retro Synth Master Cleanse. Mustache Cliche Tempor, Williamsburg Carles Vegan Helvetica. Retrehenderit butcher retro keffiyeh dreamcatcher synth. Áo len cosby EU BAH MI, QUI IRURE TERRY RICHARDSON EX SQUID. Aliquip placeat salvia cillum iphone. Seitan Aliquip Quis Cardigan American Trang phục, Butcher Voluptate Nisi Qui.

Food Truck Fixie Locavore, Accusamus McSweeney's Marfa Nulla Coffee Coffee Squid. Tập thể dục +1 Labore Velit, Blog Sartorial PBR Leggings tiếp theo Wes Anderson Artisan Four Farm Farm-to-Table Craft Bia Twee. Qui Photo Gian hàng Letterpress, Commodo Enim Craft Bia Mlkshk Aliquip Jean Shorts Ullamco Ad Vinyl Cillum PBR. Homo Nostrud Organic, Assumenda Labore thẩm mỹ magna delectus mollit. Keytar Helvetica VHS Salvia Yr, Vero Magna Velit Sapiente Labore Stumptown. Vegan Fanny Pack Odio Cillum Wes Anderson 8-bit, quần short jean bền vững râu ut tự làm đạo đức culpa terry Richardson diesel sinh học. Bữa tiệc nghệ thuật Stumptown, Tumblr Butcher Vero Sint Qi Sapiente Accusamus xăm công viên Echo.

Etsy Mixtape Wayfarers, Đạo đức Wes Anderson Tofu trước khi họ bán hết Lomo Farmo Farm Farm Farm-to-Table hữu cơ của McSweeney. Túi Messenger Gentrify Pitchfork xăm bia thủ công, iPhone Skateboard Locavore Carles Etsy Salvia Banksy Hoodie Helvetica. DIY synth pbr ngân hàng trớ trêu. Quần legging gentrify squid 8 bit cred pitchfork. Williamsburg Banh mi bất cứ điều gì không có gluten, Carles Pitchfork Biod Diesel Fixie Etsy Retro MLKSHK Vice Blog. SCOREBER Tín dụng Bạn có thể chưa từng nghe về họ, Blog bia thủ công Vinyl Stumptown. Pitchfork Đậu phụ bền vững Synth Chambray Yr.

 class="nav">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
5

Để 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 ____ 30, như được hiển thị ở trên hoặc với bất kỳ đánh dấu tùy ý nào của riêng bạn. Lưu ý rằng nếu bạn đang sử dụng

 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
1, bạn không nên thêm
 class="nav flex-column">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
7 trực tiếp vào nó, vì điều này sẽ ghi đè lên vai trò bản địa của yếu tố là một địa điểm điều hướng. Thay vào đó, chuyển sang một yếu tố thay thế (trong exammple bên dưới, một
 class="nav nav-tabs">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
9 đơn giản) và bọc
 class="nav justify-content-end">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
1 xung quanh nó.

Et et profetetur ipsum labore oseur est proidident offeur ad velit occaecat Qi Minal Occaecat veniam. Fugiat Veniam Incididunt Anim Aliqua Enim Pariatur Veniam Sunt Sunt est Aute Sit Dolor Anim. Velit non irure adipising aliqua ullamco irure incididunt irure non esse lãnh sự nostrud tối thiểu không tối thiểu. Amet Duis do Nisi Duis Veniam Non Est Eiusmod Tempor Incididunt Tempor Dolor Ipsum trong Qui Sit. Tập thể dục mollit ngồi culpa nisi culpa không adipising retrewenderit do dolore. Duis retrehenderit Occaecat Anim Ullamco Ad Duis Occaecat Ex.

Nulla est ullamco ut irure incididunt nulla lorem lorem tối thiểu irure officia enim retrewenderit. Magna Duis Labore cillum Sint adipising tập thể dục ipsum. Nostrud ut hoạt hình không tập thể dục velit laboris fugiat cupidatat. Commodo Esse Dolore Fugiat Sint Velit Ullamco Magna Hemupat Voluptate AMET AMET AUTE IPSUM AUTE LABORIS NISI. Labore Labore Veniam Irure irure ipsum pariatur mollit magna trong Cupidatat dolore magna irure esse tempor ad mollit. Dolore Commodo Nulla Minim Amet Ipsum isectetur AMET Ullamco Voluptate Nisi Commodo e Sit Eu.

Sint ngồi mollit irure quis est nostrud cillum oblemat lorem esse do quis doror esse fugiat sunt do. EU EX Commodo Veniam Lorem Aliquip Labourum Occaecat Qi Lorem Esse Mollit Dolore Anim Cupidatat. Deserunt Officia id lorem nostrud id id commodo elit eiusmod enim irure ampe eiusmod q Fugiat Ipsum Offeur trong aliqua non et quis aliquip irure trong labore cillum elit enim. Hậu quả aliquip incididunt ipsum et tối thiểu LABAINUM LABALUM et cillum labore. Deserunt adipising cillum id nulla nostrud labore eiusmod et amet. Lao động Hậu quả là Hậu quả là không ut không phải aliquip repreetenderit nulla anim iscaecat. SUNT SIT ULLAMCO rEPREWENDERIT IRURE EA ULLAMCO LOREM AUTE NOSTRUD MAGNA.

 class="nav">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
6

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

  • Nhà
  • Hồ sơ
  • Tiếp xúc

Công thức cà rốt đen không phải là một cơn đau Nostrud Istrud là bài tập về nhà để làm động các dịch vụ. Tránh dự án ngoài trời Aliquip trừ khi tập thể dục mũi sẽ xảy ra trừ khi. Nhà phát triển lớn hoạt hình tiện lợi từ lỗi của bạn về Utrud IDMOD mà Nostrud đang háo hức đến. ETIODOD EU RIGING TUYỆT VỜI ĐẶT HÀNG TỐI THIỂU CUPIDATAT Lỗi ngoại trừ bất cứ ai. OCCAECAT là một liệu pháp tập thể dục bóng đá.

Để được chuẩn bị để chuẩn bị để được chuẩn bị bằng cách tập thể dục rất lỗi với việc đặt mềm ra. Nếu bạn không thể bắt đầu những người khởi xướng nếu bạn đang ở trong trường hợp của bạn. Aliquip từ niềm vui Etiodod của bài tập CTLTE mà các incidors là. Đánh dấu là một id lorem tuyệt vời và nỗi đau, xin vui lòng Lorem cà rốt thực hành bài tập về nhà bị bỏ rơi. Anim là một nỗ lực để làm việc trong nhà phát triển của Adipissising đó là cẩn thận để bị tước bài tập về nhà.

Có một người đàn ông không có dịch vụ ăn nhẹ để tiết kiệm từ lỗi Nostrud Lorem Offeur Aliquip Người tiêu dùng một số Irure. Không có bài tập về nhà trừ khi nhà phát triển hết, xin vui lòng chỉ trích những món ăn nhẹ đến ân xá bóng đá. Bài tập tối thiểu của ITSOD tránh irure từ công việc incididium để tránh xin vui lòng aliquip là id từ bỏ lỗi aliquip nostrud. Bắt buộc Cupidatat Offeur Auto Tôi sẽ không được Cupidatat không phải là dịch vụ Irure để cung cấp cho anh ta một Lorem. Ullamco đến minimo làm tự làm dịu lao động để làm việc rất quan trọng đối với sự thuận tiện là tạm thời cho vụ việc. Xin vui lòng ai là người đau đớn aute irure là tuyệt vời cho kỳ quan. Lỗi nâng cao của Ullamco sẽ trở thành Cteri bất kỳ sự cố nào mong muốn trở thành một Ullamento bất kỳ niềm vui tiện lợi nào. Làm dịu không có sự háo hức của một số người háo hức để được chuẩn bị với niềm vui của niềm vui hoặc niềm vui.

 class="nav">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
7

Và với những viên thuốc dọc.

Cellum đến irure của thời gian, xin vui lòng để cho Nostrud mù quáng một số linh hồn Lorem. Tôi sẽ đến bài tập về nhà của vụ việc có thể là một ngoại lệ tuyệt vời, người được làm dịu đi. Đó là những gì đã chỉ trích nó là một điều tốt đẹp của bất kỳ người da đen nào muốn trở thành những món ăn nhẹ của nỗi đau .Mod. Nỗi đau của nỗi đau trong rèm tiện lợi và niềm vui của những người kỳ lạ bị chỉ trích là làm dịu đi. Họ đã bỏ rơi, không phải là đồ ăn nhẹ, và một trong hai trong số hai bóng đá bị bỏ rơi, nó bị che khuất để rèm tối thiểu.

Lỗi hưởng thụ của người tiêu dùng đối với lao động, Irure chỉ trích một bất kể bài tập về nhà được chuẩn bị để trở thành một trận đấu lớn. Bóng đá tôi sẽ đến bài tập về nhà, không phải là người tiêu dùng bị bỏ rơi thuận tiện và kỳ lạ trong bất kỳ việc làm nào cũng muốn đến. Bất cứ ai cũng có thể tăng cường các dịch vụ adipising ngoại trừ thì không. Để một nhà tác giả aliquip lorem cho bóng đá. Nỗi đau đau đớn mà chính các dịch vụ làm dịu đi một Etiodo làm tối thiểu Minneapolis.

Tránh tội ác đau đớn của người này, Eusmod một con ngoài trời ngoài trời ngoại trừ nỗi đau của người tuyệt vời. Đối với việc cung cấp lao động của chiếc ô là một người truyền bá Lorem Lorem Pardon bất cứ ai Lorem Irure Blinds Outdoor Nostrud Great Zero. Xin vui lòng làm cả hai Lorem làm điều đó tại một thời điểm văn phòng đau. Bị chỉ trích khách hàng Aliquip Lao động là một sự tiện lợi tuyệt vời để đến cà chua.

EU Pain của cô ấy đau Ullamco Lorem Lorem, Cupidatat này đã chỉ trích cuộc thi chính mà người tiêu dùng nguyên tắc trong một dịch vụ Cupidatat. Niềm vui ngoại trừ sự tiện lợi để làm việc Lưu bài tập về nhà Cilla một số làm. Bất kỳ niềm vui nào làm mềm cà chua, không mềm, xin vui lòng xin lỗi nếu nó không phải từ bỏ bộ phim. Lỗi của trọng tài là sự quảng cáo của công việc của nhà phát triển vĩ đại, nhưng trong tác giả, trong một sự tiện lợi tuyệt vời của sự tiện lợi.

 class="nav">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
8

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

Bạn có thể kích hoạt một tab hoặc điều hướng thuốc mà không cần viết bất kỳ javascript nào bằng cách chỉ định

 class="nav nav-pills">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
1 hoặc
 class="nav nav-pills">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
2 trên một phần tử. Sử dụng các thuộc tính dữ liệu này trên
 class="nav flex-column">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
0 hoặc
 class="nav flex-column">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
1.

 class="nav">
   class="nav-link active" href="#">Active
   class="nav-link" href="#">Link
   class="nav-link" href="#">Link
   class="nav-link disabled" href="#">Disabled
9

Thông qua JavaScript

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

 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
0

Bạn có thể kích hoạt các tab riêng lẻ theo nhiều cách:

 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
1

Hiệu ứng mờ dần

Để làm cho các tab mờ dần,

 class="nav nav-pills">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
5 để đính kèm
 class="nav nav-pills">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
6. Khăn tab đầu tiên cũng phải có
 class="nav nav-pills">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
7 để hiển thị nội dung ban đầu.

 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
2

Phương pháp

Phương pháp và chuyển tiếp 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ọ trở lại với người gọi ngay khi quá trình chuyển đổi được bắt đầu nhưng trước khi nó kết thúc. Ngoài ra, một cuộc gọi có phương pháp về một thành phần chuyển tiếp sẽ bị bỏ qua.asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

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

$().tab

Kích hoạt một phần tử tab và container nội dung. Tab phải có

 class="nav nav-pills">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
8 hoặc
 class="nav nav-pills">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
9 nhắm mục tiêu một nút container trong DOM.

 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
3

.tab ('show')

Chọn tab đã cho và hiển thị bánh mì liên quan của nó. Bất kỳ tab nào khác đã được chọn trước đó đều không được chọn và bánh mì liên quan của nó bị ẩn. Trả về cho người gọi trước khi khung tab thực sự được hiển thị (nghĩa là trước khi sự kiện

 class="nav nav-pills nav-fill">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Longer nav link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
0 xảy ra).Returns to the caller before the tab pane has actually been shown (i.e. before the
 class="nav nav-pills nav-fill">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Longer nav link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
0 event occurs).

 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
4

.tab (‘vứt bỏ))

Phá hủy một tab yếu tố.

Sự kiện

Khi hiển thị một tab mới, các sự kiện bắn theo thứ tự sau:

  1.  class="nav nav-pills nav-fill">
       class="nav-item">
         class="nav-link active" href="#">Active
      
  2. class="nav-item"> class="nav-link" href="#">Longer nav link class="nav-item"> class="nav-link" href="#">Link class="nav-item"> class="nav-link disabled" href="#">Disabled 1 (trên tab hoạt động hiện tại)
  3.  class="nav nav-pills nav-fill">
       class="nav-item">
         class="nav-link active" href="#">Active
      
  4. class="nav-item"> class="nav-link" href="#">Longer nav link class="nav-item"> class="nav-link" href="#">Link class="nav-item"> class="nav-link disabled" href="#">Disabled 2 (trên tab Too-be-Shown)
  5.  class="nav nav-pills nav-fill">
       class="nav-item">
         class="nav-link active" href="#">Active
      
  6. class="nav-item"> class="nav-link" href="#">Longer nav link class="nav-item"> class="nav-link" href="#">Link class="nav-item"> class="nav-link disabled" href="#">Disabled 3 (trên tab hoạt động trước đó, cùng một sự kiện với sự kiện
     class="nav nav-pills nav-fill">
       class="nav-item">
         class="nav-link active" href="#">Active
      
       class="nav-item">
         class="nav-link" href="#">Longer nav link
      
       class="nav-item">
         class="nav-link" href="#">Link
      
       class="nav-item">
         class="nav-link disabled" href="#">Disabled
      
    
    1)
  7.  class="nav nav-pills nav-fill">
       class="nav-item">
         class="nav-link active" href="#">Active
      
  8. class="nav-item"> class="nav-link" href="#">Longer nav link class="nav-item"> class="nav-link" href="#">Link class="nav-item"> class="nav-link disabled" href="#">Disabled 0 (trên tab Just-Shown mới hoạt động, giống như đối với sự kiện
     class="nav nav-pills nav-fill">
       class="nav-item">
         class="nav-link active" href="#">Active
      
       class="nav-item">
         class="nav-link" href="#">Longer nav link
      
       class="nav-item">
         class="nav-link" href="#">Link
      
       class="nav-item">
         class="nav-link disabled" href="#">Disabled
      
    
    2)

Nếu không có tab nào đã hoạt động, thì các sự kiện

 class="nav nav-pills nav-fill">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Longer nav link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
1 và
 class="nav nav-pills nav-fill">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Longer nav link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
3 sẽ không được bắn.

Loại sự kiệnSự mô tả
show.bs.tabSự kiện này bắn vào Tab Show, nhưng trước khi tab mới được hiển thị. Sử dụng
 class="nav nav-pills nav-fill">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Longer nav link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
9 và
 class="nav nav-pills nav-fill">
   class="nav-item nav-link active" href="#">Active
   class="nav-item nav-link" href="#">Link
   class="nav-item nav-link" href="#">Link
   class="nav-item nav-link disabled" href="#">Disabled
0 để nhắm mục tiêu tab hoạt động và tab hoạt động trước đó (nếu có) tương ứng.
hiển thị.bs.tabSự kiện này bắn vào Tab Show sau khi một tab đã được hiển thị. Sử dụng
 class="nav nav-pills nav-fill">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Longer nav link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
9 và
 class="nav nav-pills nav-fill">
   class="nav-item nav-link active" href="#">Active
   class="nav-item nav-link" href="#">Link
   class="nav-item nav-link" href="#">Link
   class="nav-item nav-link disabled" href="#">Disabled
0 để nhắm mục tiêu tab hoạt động và tab hoạt động trước đó (nếu có) tương ứng.
ẩn.bs.tabSự kiện này bắn khi một tab mới sẽ được hiển thị (và do đó, tab hoạt động trước đó sẽ bị ẩn). Sử dụng
 class="nav nav-pills nav-fill">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Longer nav link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
9 và
 class="nav nav-pills nav-fill">
   class="nav-item nav-link active" href="#">Active
   class="nav-item nav-link" href="#">Link
   class="nav-item nav-link" href="#">Link
   class="nav-item nav-link disabled" href="#">Disabled
0 để nhắm mục tiêu tab hoạt động hiện tại và tab sắp hoạt động mới.
ẩn.bs.tabSự kiện này bắn sau khi một tab mới được hiển thị (và do đó, tab hoạt động trước đó được ẩn). Sử dụng
 class="nav nav-pills nav-fill">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Longer nav link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
9 và
 class="nav nav-pills nav-fill">
   class="nav-item nav-link active" href="#">Active
   class="nav-item nav-link" href="#">Link
   class="nav-item nav-link" href="#">Link
   class="nav-item nav-link disabled" href="#">Disabled
0 để nhắm mục tiêu tab hoạt động trước đó và tab hoạt động mới, tương ứng.
 class="nav justify-content-center">
   class="nav-item">
     class="nav-link active" href="#">Active
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link" href="#">Link
  
   class="nav-item">
     class="nav-link disabled" href="#">Disabled
  
5

Bootstrap lớp hoạt động là gì?

Danh sách đầy đủ của tất cả các lớp bootstrap.

Làm thế nào đặt lớp Navbar hoạt động trong bootstrap?

Để thực hiện nhiệm vụ này, bạn có thể sử dụng ng-Controller (NavigationControll) để đặt lớp hoạt động của Bootstrap Navbar với AngularJS.Để chạy một bộ điều khiển duy nhất bên ngoài ng-View.Bạn có thể đặt class = hoạt động trực tuyến khi nhấp chuột góc.use ng-controller(NavigationController) to set the bootstrap navbar active class with AngularJS. To run a single controller outside ng-view. You can set class= “active” when the angular route is clicked.

Lớp NAV trong Bootstrap là gì?

Thanh điều hướng cơ bản với bootstrap, một thanh điều hướng có thể mở rộng hoặc sụp đổ, tùy thuộc vào kích thước màn hình.Một thanh điều hướng tiêu chuẩn được tạo với lớp .navbar, theo sau là lớp thu gọn đáp ứng: .navbar-expand-xl | lg | md | sm (xếp các navbar theo chiều dọc trên màn hình cực lớn, lớn, trung bình hoặc nhỏ).A standard navigation bar is created with the .navbar class, followed by a responsive collapsing class: .navbar-expand-xl|lg|md|sm (stacks the navbar vertically on extra large, large, medium or small screens).

Cột Nav Flex là gì?

Thành phần cơ sở .nav được xây dựng với Flexbox và cung cấp một 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ố điểm ghi đè kiểu (để làm việc với danh sách), một số phần đệm liên kết cho các khu vực hit lớn hơn và kiểu dáng khuyết tật cơ bản.provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.