Ngày 11: Hướng dẫn và ví dụ về Điều hướng Bootstrap 4 – ví dụ điều hướng bootstrap 4

Bạn đang xem : ví dụ điều hướng bootstrap 4

Xin chào và chào mừng bạn đến với ngày thứ 11 của Bootstrap 4 😎 Hôm nay chúng ta sẽ tìm hiểu về Bootstrap 4 Tùy chọn điều hướng. Việc phải sắp xếp một danh sách các liên kết là một tình huống rất phổ biến và biết cách tạo Bootstrap 4 Navs sẽ giúp bạn giải quyết điều này.

Có nhiều tùy chọn mà bạn có thể chọn: điều hướng cơ bản, tab điều hướng và thuốc điều hướng. Chúng tôi sẽ kiểm tra từng tùy chọn và giải thích cách sử dụng nó, cùng với các ví dụ. Chúng ta cũng sẽ bắt đầu xem thêm các tùy chọn JavaScript mà Bootstrap 4 cung cấp. Nghe hấp dẫn đấy? Hãy học cách điều hướng!

bootstrap-4-navigation

Ảnh ghi nhận quyền tác giả của Daryl Beaney cho cảnh quay của anh ấy.

Bài viết được cấu trúc thành các phần sau:

Ví dụ cơ bản về điều hướng Bootstrap 4

Khi bạn tổ chức menu điều hướng bên trong trang của mình, có nhiều tùy chọn bạn có thể chọn. Cách đầu tiên và đơn giản nhất là có một danh sách các liên kết dẫn đến các phần khác nhau trên trang của bạn hoặc các trang khác.

Vùng chứa cơ bản cho các liên kết phải có lớp .nav . Bạn sẽ cần sử dụng nó cùng với lớp .nav-link được áp dụng trên liên kết và lớp .nav-item được áp dụng trên vùng chứa của liên kết. Phần tử có lớp .nav hoạt động như một vùng chứa linh hoạt trong Bootstrap 4 và sử dụng .nav-item , bạn sẽ chắc chắn rằng các phần tử được sắp xếp như mong đợi.

Việc sử dụng các lớp Bootstrap 4, thay vì các liên kết thông thường mang lại nhiều điểm tích cực: nó thêm phần đệm vào các liên kết – đối với diện tích truy cập lớn hơn, nó cung cấp kiểu vô hiệu hóa và các tiện ích linh hoạt.

Đây là ví dụ cơ bản về danh sách các liên kết sử dụng lớp .nav :

tối tăm

 & lt; ul class = "nav" & gt;
    & lt; li class = "nav-item" & gt;
      & lt; a class = "nav-link active" href = "#" & gt; Falcon & lt; / a & gt;
    & lt; / li & gt;
    & lt; li class = "nav-item" & gt;
      & lt; a class = "nav-link" href = "#" & gt; Con vẹt & lt; / a & gt;
    & lt; / li & gt;
    & lt; li class = "nav-item" & gt;
      & lt; a class = "nav-link" href = "#" & gt; Cú & lt; / a & gt;
    & lt; / li & gt;
    & lt; li class = "nav-item" & gt;
      & lt; a class = "nav-link bị vô hiệu hóa" href = "#" & gt; Con cò & lt; / a & gt;
    & lt; / li & gt;
& lt; / ul & gt; 

Ghi chú bên lề: Tôi sẽ chủ yếu sử dụng các loài chim và mô tả trong các ví dụ tiếp theo. Có rất nhiều loài mà tôi có thể dễ dàng lựa chọn nên chúng có vẻ rất phù hợp 🙂

Điều hướng với Tiện ích linh hoạt

Vì phần tử .nav là một vùng chứa flex, bạn có thể sử dụng các lớp flex trong Bootstrap 4 để căn chỉnh các phần tử bên trong nó. Hành vi mặc định là đặt các phần tử trên một hàng, bắt đầu từ bên trái.

Nhưng bạn cũng có thể xếp chúng theo chiều dọc với lớp .flex-column :

tối tăm

 & lt; ul class = "nav flex-column" & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link active" href = "#" & gt; Vulture & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "#" & gt; Diều hâu & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "#" & gt; Chim cu & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link đã bị vô hiệu hóa" href = "#" & gt; Chim gõ kiến ​​& lt; / a & gt;
  & lt; / li & gt;
& lt; / ul & gt; 

Và bạn có thể căn chỉnh chúng trên trục đầu tiên bằng lớp .justify-content- [position] . Đây là một ví dụ với các liên kết được kéo sang bên phải với lớp .justify-content-end :

tối tăm

 & lt; ul class = "nav justify-content-end" & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link active" href = "#" & gt; bói cá & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "#" & gt; Hornbill & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "#" & gt; Chim cốc & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link bị vô hiệu hóa" href = "#" & gt; Penguin & lt; / a & gt;
  & lt; / li & gt;
& lt; / ul & gt; 

Và đây là một ví dụ với các liên kết được căn giữa bằng lớp .justify-content-center :

tối tăm

 & lt; ul class = "nav justify-content-center" & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link active" href = "#" & gt; Flamingo & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "#" & gt; Chim hải âu & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "#" & gt; Pigeon & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link bị vô hiệu hóa" href = "#" & gt; Cần trục & lt; / a & gt;
  & lt; / li & gt;
& lt; / ul & gt; 

Để xem thêm các tính năng linh hoạt khác, bạn có thể quay lại Hướng dẫn linh hoạt Bootstrap 4 và làm mới bộ nhớ của mình.

Một tùy chọn khác để điều hướng là hiển thị và ẩn nội dung tùy thuộc vào liên kết bạn chọn. Còn được gọi là vùng có thể tab, bạn có thể dễ dàng thực hiện điều này với plugin Bootstrap 4 tab Javascript. Plugin được bao gồm trong tệp bootstrap.js. Bạn cần chắc chắn rằng bạn có nó bao gồm. Bạn có thể kiểm tra Ngày 1: Bootstrap 4 CDN và Mẫu dành cho người mới bắt đầu để biết hướng dẫn về cách thực hiện việc này.

Có hai tùy chọn để tạo nội dung có thể lập tab: tab điều hướng và thuốc điều hướng. Chúng tôi sẽ đưa từng người một.

Tab Điều hướng Bootstrap 4

Tab là một tập hợp các liên kết có giao diện theo thẻ. Để sử dụng chúng, bạn cũng cần thêm lớp .nav-tabs cùng với lớp .nav . Đây là kết quả:

tối tăm

 & lt; ul class = "nav nav-tabs" & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link active" href = "#" & gt; Vịt & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "#" & gt; Gà & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "#" & gt; Kiwi & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link bị vô hiệu hóa" href = "#" & gt; Emu & lt; / a & gt;
  & lt; / li & gt;
& lt; / ul & gt; 

Hành vi JavaScript

Để thêm các bảng có nội dung, chúng tôi cần đặt chúng trong một vùng chứa có lớp .tab-content và cấp cho mỗi bảng là lớp .tab-pane . Theo mặc định, khả năng hiển thị của chúng bị ẩn. Để hiển thị một trong các tab, bạn cần thêm lớp .active vào đó. Phải có mối tương quan giữa liên kết đang hoạt động trong danh sách .nav-tabs và tab đang hoạt động trong .tab-content .

Trong ví dụ của chúng tôi, chúng tôi sẽ muốn hiển thị mô tả cho Vịt, vì liên kết Vịt đang hoạt động:

tối tăm

 & lt; ul class = "nav nav-tabs" & gt;
...
& lt; / ul & gt;
& lt; div class = "tab-content mt-3" & gt;
  & lt; div class = "tab-pane active" id = "duck" role = "tabpanel" aria-labellingby = "duck-tab" & gt; ... & lt; / div & gt;
  & lt; div class = "tab-pane" id = "gà" role = "tabpanel" aria-labellingby = "gà-tab" & gt; ... & lt; / div & gt;
  & lt; div class = "tab-pane" id = "kiwi" role = "tabpanel" aria-labellingby = "kiwi-tab" & gt; ... & lt; / div & gt;
  & lt; div class = "tab-pane" id = "emu" role = "tabpanel" aria-labellingby = "emu-tab" & gt; ... & lt; / div & gt;
& lt; / div & gt; 

Bước tiếp theo là liên kết tất cả các liên kết trong .nav-tabs với các bảng trong .tab-content . Hành vi mà chúng tôi muốn là khi một liên kết được nhấn, bảng điều khiển hiện tại sẽ bị ẩn và tab có thông tin được liên kết với nó được hiển thị. Chúng tôi có thể làm điều này theo hai cách: sử dụng các thuộc tính dữ liệu hoặc thông qua các lệnh gọi JavaScript. Chúng tôi sẽ có các ví dụ về cả hai.

Xem Thêm  Trình tạo số ngẫu nhiên trong JavaScript - tạo số ngẫu nhiên js

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

Bạn có thể tạo các liên kết trong .nav-tabs để chuyển đổi các bảng mà không cần tự viết bất kỳ JavaScript nào. Bạn sẽ cần thêm thuộc tính dữ liệu data-toggle = ”tab” vào các liên kết và cho mọi liên kết biết những gì sẽ hiển thị thông qua ký tự liên kết của nó.

Chúng tôi sẽ thực hiện việc này với ví dụ ở trên:

tối tăm

 & lt; ul class = "nav nav-tabs" role = "tablist" & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link active" data-toggle = "tab" href = "# duck" role = "tab" aria-control = "duck" aria-select = "true" & gt; Duck & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" data-toggle = "tab" href = "# gà" role = "tab" aria-control = "gà" aria-select = "false" & gt; Gà & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" data-toggle = "tab" href = "# kiwi" role = "tab" aria-control = "kiwi" aria-select = "false" & gt; Kiwi & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link vô hiệu hóa" data-toggle = "tab" href = "# emu" role = "tab" aria-control = "emu" aria-select = "false" & gt; Emu & lt; / a & gt;
  & lt; / li & gt;
& lt; / ul & gt;

& lt; div class = "tab-content mt-3" & gt;
  & lt; div class = "tab-pane active" id = "duck" role = "tabpanel" aria-labellingby = "duck-tab" & gt;
    ...
  & lt; / div & gt;
  & lt; div class = "tab-pane" id = "gà" role = "tabpanel" aria-labellingby = "gà-tab" & gt;
      ...
  & lt; / div & gt;
  & lt; div class = "tab-pane" id = "kiwi" role = "tabpanel" aria-labellingby = "kiwi-tab" & gt;
      ...
  & lt; / div & gt;
  & lt; div class = "tab-pane" id = "emu" role = "tabpanel" aria-labellingby = "emu-tab" & gt;
    ...
  & lt; / div & gt;
& lt; / div & gt; 

Sử dụng JavaScript Calls

Một cách khác để làm cho bảng điều khiển bên phải xuất hiện khi liên kết cho nó được nhấn là sử dụng JavaScript. Điều này có nghĩa là bạn sẽ không cần thuộc tính data-toggle = "tab" nữa. Nhưng bạn sẽ cần phải giữ neo vào bảng điều khiển tương ứng.

tối tăm

 // html
& lt; ul class = "nav nav-tabs" id = "birds" role = "tablist" & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link active" href = "# duck" role = "tab" aria-control = "duck" aria-select = "true" & gt; Duck & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "# gà" role = "tab" aria-control = "gà" aria-select = "false" & gt; Gà & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "# kiwi" role = "tab" aria-control = "kiwi" aria-select = "false" & gt; Kiwi & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link vô hiệu hóa" href = "# emu" role = "tab" aria-control = "emu" aria-select = "false" & gt; Emu & lt; / a & gt;
  & lt; / li & gt;
& lt; / ul & gt;

& lt; div class = "tab-content mt-3" & gt;
  & lt; div class = "tab-pane active" id = "duck" role = "tabpanel" aria-labellingby = "duck-tab" & gt;
    ...
  & lt; / div & gt;
  & lt; div class = "tab-pane" id = "gà" role = "tabpanel" aria-labellingby = "gà-tab" & gt;
      ...
  & lt; / div & gt;
  & lt; div class = "tab-pane" id = "kiwi" role = "tabpanel" aria-labellingby = "kiwi-tab" & gt;
    ...
  & lt; / div & gt;
  & lt; div class = "tab-pane" id = "emu" role = "tabpanel" aria-labellingby = "emu-tab" & gt;
    ...
  & lt; / div & gt;
& lt; / div & gt;
        
// js
$ ('# bird a'). on ('click', function (e) {
  e.preventDefault ()
  $ (this) .tab ('show')
}) 

Nếu trường hợp sử dụng của bạn cho các tab là những gì chúng tôi đã minh họa trước đây, thì việc sử dụng thuộc tính dữ liệu sẽ dễ dàng hơn và tôi khuyên bạn nên làm như vậy. Nhưng nếu bạn muốn các sự kiện khác xảy ra trên tab hiển thị, thì tốt hơn là sử dụng phương pháp JavaScript vì nó cung cấp nhiều khả năng hơn. Chúng tôi sẽ giải thích chúng trong phần Hành vi Javascript nâng cao trong điều hướng Bootstrap 4 .

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

Có 2 lớp để tạo kiểu các tab điều hướng trong Bootstrap 4 có thể giúp ích cho bạn. Nếu bạn muốn các tab trong .nav-tabs chiếm toàn bộ chiều rộng của phần cha của nó, bạn có thể sử dụng lớp .nav-fill và không gian sẽ được phân chia giữa các tab theo chiều rộng của chúng.

tối tăm

 & lt; ul class = "nav nav-tabs nav-fill" role = "tablist" & gt;
    ...
& lt; / ul & gt;

& lt; div class = "tab-content" & gt;
    ...
& lt; / div & gt; 

Hoặc bạn có thể sử dụng lớp .nav-justified nếu bạn muốn mọi tab có cùng chiều rộng.

tối tăm

 & lt; ul class = "nav nav-tabs nav-justified" role = "tablist" & gt;
    ...
& lt; / ul & gt;

& lt; div class = "tab-content" & gt;
    ...
& lt; / div & gt; 

Tiện ích linh hoạt

Bạn có thể thực hiện hành vi được mô tả ở trên bằng cách sử dụng các lớp .flex-fill và và .flex-grow mà chúng tôi đã học trong Bootstrap 4 flex tutorial .

.nav là vùng chứa flexbox, bạn có thể sử dụng bất kỳ tiện ích flex nào trong Bootstrap 4 và các điểm ngắt đáp ứng. Điều này sẽ cung cấp cho bạn nhiều quyền lực hơn về cách các mục được căn chỉnh. Dưới đây là một ví dụ về tab được kéo sang bên phải:

tối tăm

 & lt; ul class = "nav nav-tabs" role = "tablist" & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link active" data-toggle = "tab" href = "# duck" role = "tab" aria-control = "duck" aria-select = "true" & gt; Duck & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" data-toggle = "tab" href = "# gà" role = "tab" aria-control = "gà" aria-select = "false" & gt; Gà & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" data-toggle = "tab" href = "# kiwi" role = "tab" aria-control = "kiwi" aria-select = "false" & gt; Kiwi & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item ml-auto" & gt;
    & lt; a class = "nav-link vô hiệu hóa" data-toggle = "tab" href = "# emu" role = "tab" aria-control = "emu" aria-select = "false" & gt; Emu & lt; / a & gt;
  & lt; / li & gt;
& lt; / ul & gt;

& lt; div class = "tab-content mt-3" & gt;
  & lt; div class = "tab-pane active" id = "duck" role = "tabpanel" aria-labellingby = "duck-tab" & gt;
      ...
  & lt; / div & gt;
  & lt; div class = "tab-pane" id = "gà" role = "tabpanel" aria-labellingby = "gà-tab" & gt;
      ...
  & lt; / div & gt;
  & lt; div class = "tab-pane" id = "kiwi" role = "tabpanel" aria-labellingby = "kiwi-tab" & gt;
    ...
  & lt; / div & gt;
  & lt; div class = "tab-pane" id = "emu" role = "tabpanel" aria-labellingby = "emu-tab" & gt;
    ...
  & lt; / div & gt;
& lt; / div & gt; 

Thuốc điều hướng Bootstrap 4

Để thay đổi kiểu điều hướng thành dạng viên, bạn cần sử dụng lớp .nav-Drugs :

tối tăm

 & lt; ul class = "nav nav-Drugs" & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link active" href = "#" & gt; Flamingo & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "#" & gt; Chim cu & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "#" & gt; Đà điểu & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link bị vô hiệu hóa" href = "#" & gt; Tropicbird & lt; / a & gt;
  & lt; / li & gt;
& lt; / ul & gt; 

Giống như với các tab, bạn sẽ cần có nội dung của các bảng được chuyển đổi bên trong .tab-content . Và mỗi bảng sẽ cần lớp .tab-panel , việc sử dụng một bảng cũng có lớp .active để nó được hiển thị:

tối tăm

 & lt; ul class = "nav nav-Drugs" & gt;
    & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link active" href = "#" & gt; Flamingo & lt; / a & gt;
    & lt; / li & gt;
    & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "#" & gt; Chim cu & lt; / a & gt;
    & lt; / li & gt;
    & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "#" & gt; Đà điểu & lt; / a & gt;
    & lt; / li & gt;
    & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link bị vô hiệu hóa" href = "#" & gt; Tropicbird & lt; / a & gt;
    & lt; / li & gt;
& lt; / ul & gt;
& lt; div class = "tab-content mt-3" & gt;
    & lt; div class = "tab-pane active" id = "flamingo" role = "tabpanel" aria-labellingby = "flamingo-tab" & gt;
      ...
    & lt; / div & gt;
    & lt; div class = "tab-pane" id = "cuckoo" role = "tabpanel" aria-labellingby = "profile-tab" & gt;
      ...
    & lt; / div & gt;
    & lt; div class = "tab-pane" id = "ostrich" role = "tabpanel" aria-labellingby = "ostrich-tab" & gt;
      ...
    & lt; / div & gt;
    & lt; div class = "tab-pane" id = "tropicbird" role = "tabpanel" aria-labellingby = "tropicbird-tab" & gt;
      ...
    & lt; / div & gt;
& lt; / div & gt; 

Hành vi JavaScript

Để chuyển đổi các bảng điều khiển khi bạn nhấn vào một viên thuốc, bạn có hai tùy chọn. Bạn có thể sử dụng thuộc tính dữ liệu hoặc lệnh gọi JavaScript. Chúng giống nhau được liệt kê cho các tab điều hướng.

Xem Thêm  Các cách khác nhau để đọc tệp văn bản trong Java - cách đọc từ một tệp trong java

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

Bạn có thể sử dụng các thuộc tính dữ liệu và bằng cách thêm data-toggle = "tablet" trên mọi liên kết trong thanh điều hướng và liên kết vào bảng điều khiển:

tối tăm

 & lt; ul class = "nav nav-Drugs" & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link active" data-toggle = "tablet" href = "# flamingo" role = "tab" aria-control = "Drugs-flamingo" aria-select = "true" & gt; Flamingo & lt; / một & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" data-toggle = "tablet" href = "# cuckoo" role = "tab" aria-control = "Drugs-cuckoo" aria-select = "false" & gt; Cuckoo & lt; / a & gt ;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" data-toggle = "tablet" href = "# ostrich" role = "tab" aria-Control = "Drugs-ostrich" aria-select = "false" & gt; Ostrich & lt; / a & gt ;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link vô hiệu hóa" data-toggle = "tablet" href = "# tropicbird" role = "tab" aria-control = "Drugs-tropicbird" aria-select = "false" & gt; Tropicbird & lt; / một & gt;
  & lt; / li & gt;
& lt; / ul & gt;
& lt; div class = "tab-content mt-3" & gt;
  & lt; div class = "tab-pane active" id = "flamingo" role = "tabpanel" aria-labellingby = "flamingo-tab" & gt;
    ...
  & lt; / div & gt;
  & lt; div class = "tab-pane" id = "cuckoo" role = "tabpanel" aria-labellingby = "profile-tab" & gt;
    ...
  & lt; / div & gt;
  & lt; div class = "tab-pane" id = "ostrich" role = "tabpanel" aria-labellingby = "ostrich-tab" & gt;
    ...
  & lt; / div & gt;
  & lt; div class = "tab-pane" id = "tropicbird" role = "tabpanel" aria-labellingby = "tropicbird-tab" & gt;
    ...
  & lt; / div & gt;
& lt; / div & gt; 

Sử dụng JavaScript Calls

Hoặc bạn có thể sử dụng một hàm JavaScript gọi hàm .tab ('show') mỗi khi một liên kết được nhấn:

tối tăm

 // html
& lt; ul class = "nav nav-thuốc" id = "chim" & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link active" href = "# flamingo" role = "tab" aria-control = "Drugs-flamingo" aria-select = "true" & gt; Flamingo & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "# cuckoo" role = "tab" aria-control = "Drugs-cuckoo" aria-select = "false" & gt; Cuckoo & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "# ostrich" role = "tab" aria-control = "Drugs-ostrich" aria-select = "false" & gt; Ostrich & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link bị vô hiệu hóa" href = "# tropicbird" role = "tab" aria-control = "Drugs-tropicbird" aria-select = "false" & gt; Tropicbird & lt; / a & gt;
  & lt; / li & gt;
& lt; / ul & gt;
& lt; div class = "tab-content mt-3" & gt;
  & lt; div class = "tab-pane active" id = "flamingo" role = "tabpanel" aria-labellingby = "flamingo-tab" & gt;
    ...
  & lt; / div & gt;
  & lt; div class = "tab-pane" id = "cuckoo" role = "tabpanel" aria-labellingby = "profile-tab" & gt;
    ...
  & lt; / div & gt;
  & lt; div class = "tab-pane" id = "ostrich" role = "tabpanel" aria-labellingby = "ostrich-tab" & gt;
    ...
  & lt; / div & gt;
  & lt; div class = "tab-pane" id = "tropicbird" role = "tabpanel" aria-labellingby = "tropicbird-tab" & gt;
    ...
  & lt; / div & gt;
& lt; / div & gt;

// js
$ ('# bird a'). on ('click', function (e) {
  e.preventDefault ()
  $ (this) .tab ('show')
}) 

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

Cũng giống như với các tab điều hướng, bạn có thể sử dụng lớp .nav-fill .nav-justify nếu bạn muốn danh sách thuốc chiếm toàn bộ chiều rộng của cha mẹ họ.

Đây là giao diện của .nav-fill :

tối tăm

 & lt; ul class = "nav nav-Drugs nav-fill" & gt;
    ...
& lt; / ul & gt;
& lt; div class = "tab-content mt-3" & gt;
    ...
& lt; / div & gt; 

Và đây là giao diện của .nav-justified :

tối tăm

 & lt; ul class = "nav nav-Drugs nav-justified" & gt;
    ...
& lt; / ul & gt;
& lt; div class = "tab-content mt-3" & gt;
    ...
& lt; / div & gt; 

Tiện ích linh hoạt

Và vì .nav là vùng chứa linh hoạt của Bootstrap 4, bạn có thể tận dụng nhiều lớp mà nó cung cấp. Chúng tôi đã tạo một ví dụ cho thấy cách bạn có thể đặt thuốc theo chiều dọc trên thiết bị di động và theo chiều ngang trên các thiết bị bắt đầu bằng máy tính bảng.

tối tăm

 & lt; ul class = "nav nav-Drugs flex-column flex-md-row text-center" & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link active" data-toggle = "tablet" href = "# flamingo" role = "tab" aria-control = "Drugs-flamingo" aria-select = "true" & gt; Flamingo & lt; / một & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" data-toggle = "tablet" href = "# cuckoo" role = "tab" aria-control = "Drugs-cuckoo" aria-select = "false" & gt; Cuckoo & lt; / a & gt ;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" data-toggle = "tablet" href = "# ostrich" role = "tab" aria-Control = "Drugs-ostrich" aria-select = "false" & gt; Ostrich & lt; / a & gt ;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link vô hiệu hóa" data-toggle = "tablet" href = "# tropicbird" role = "tab" aria-control = "Drugs-tropicbird" aria-select = "false" & gt; Tropicbird & lt; / một & gt;
  & lt; / li & gt;
& lt; / ul & gt;
& lt; div class = "tab-content mt-3" & gt;
    ...
& lt; / div & gt; 

Hành vi JavaScript nâng cao

Hiệu ứng mờ dần

Bạn có thể làm cho các bảng mờ dần khi xuất hiện nếu bạn thêm lớp .fade vào mỗi .tab-pane . Lớp đang hoạt động khi tải trang cũng sẽ cần lớp .show để hiển thị.

tối tăm

 & lt; ul class = "nav nav-Drugs" & gt;
    ...
& lt; / ul & gt;
& lt; div class = "tab-content mt-3" & gt;
    & lt; div class = "tab-panel phai hiển thị hoạt động" id = "flamingo" role = "tabpanel" aria-labellingby = "flamingo-tab" & gt;
      ...
    & lt; / div & gt;
    & lt; div class = "tab-pane fade" id = "cuckoo" role = "tabpanel" aria-labellingby = "profile-tab" & gt;
     ...
    & lt; / div & gt;
    & lt; div class = "tab-pane fade" id = "ostrich" role = "tabpanel" aria-labellingby = "ostrich-tab" & gt;
      ...
    & lt; / div & gt;
    & lt; div class = "tab-pane fade" id = "tropicbird" role = "tabpanel" aria-labellingby = "tropicbird-tab" & gt;
      ...
    & lt; / div & gt;
& lt; / div & gt; 

Phương pháp

.tab (‘hiển thị’)

Khi bạn gọi phương thức .tab ('show') cho một liên kết trong .nav , liên kết sẽ hoạt động và bảng điều khiển cho nó sẽ hiển thị. Trong ví dụ trên, chúng tôi đang gọi .tab ('show') trên sự kiện nhấp chuột cho mọi liên kết trong .nav (đó là hành vi tiêu chuẩn). Nhưng chúng ta cũng có thể gọi phương thức trong các hàm khác. Ví dụ: đây là một nút mở tab thứ hai trong thanh điều hướng khi được nhấp vào:

tối tăm

 // html
& lt; ul class = "nav nav-thuốc" id = "chim" & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link active" href = "# flamingo" role = "tab" aria-control = "Drugs-flamingo" aria-select = "true" & gt; Flamingo & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" id = "cuckoo-tablet" href = "# cuckoo" role = "tab" aria-control = "Drugs-cuckoo" aria-select = "false" & gt; Cuckoo & lt; / a & gt ;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link" href = "# ostrich" role = "tab" aria-control = "Drugs-ostrich" aria-select = "false" & gt; Ostrich & lt; / a & gt;
  & lt; / li & gt;
  & lt; li class = "nav-item" & gt;
    & lt; a class = "nav-link bị vô hiệu hóa" href = "# tropicbird" role = "tab" aria-control = "Drugs-tropicbird" aria-select = "false" & gt; Tropicbird & lt; / a & gt;
  & lt; / li & gt;
& lt; / ul & gt;
& lt; div class = "tab-content mt-3" & gt;
    & lt; div class = "tab-pane active" id = "flamingo" role = "tabpanel" aria-labellingby = "flamingo-tab" & gt;
      ...
    & lt; / div & gt;
    & lt; div class = "tab-pane" id = "cuckoo" role = "tabpanel" aria-labellingby = "profile-tab" & gt;
      ...
    & lt; / div & gt;
    & lt; div class = "tab-pane" id = "ostrich" role = "tabpanel" aria-labellingby = "ostrich-tab" & gt;
      ...
    & lt; / div & gt;
    & lt; div class = "tab-pane" id = "tropicbird" role = "tabpanel" aria-labellingby = "tropicbird-tab" & gt;
      ...
    & lt; / div & gt;
& lt; / div & gt;

& lt; button type = "button" class = "btn btn-success btn-sm mt-3" id = "show-cuckoo" & gt; Show cuckoo & lt; / button & gt;

// js
$ ('# bird a'). on ('click', function (e) {
  e.preventDefault ();
  $ (this) .tab ('show');
})

$ ('# show-cuckoo'). on ('click', function () {
  $ ('# cuckoo-thuốc'). tab ('show');
}) 

Sự kiện

Khi thay đổi các tab, có một loạt các sự kiện diễn ra. Chúng tôi sẽ xem xét từng sự kiện và mô tả hành vi của nó cũng như thứ tự xảy ra.

Xem Thêm  Cách xác định một hàm trong Python - ví dụ về hàm xác định python

Gọi món
Biến cố
Mục tiêu
Sự mô tả

1
hide.bs.tab
tab đang hoạt động hiện tại
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.

2
show.bs.tab
tab được hiển thị
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 đang hoạt động trước đó (nếu có) tương ứng.

3
hidden.bs.tab
trên tab hoạt động trước đó, tab tương tự như đối với sự kiện hide.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.

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
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.

Nếu bạn chưa có tab đang hoạt động, thì các sự kiện hide.bs.tab hidden.bs.tab sẽ không được kích hoạt. < / p>

Để xem cách bạn có thể sử dụng các sự kiện, chúng tôi đã tạo một ví dụ sửa đổi màu của các viên thuốc điều hướng đã được truy cập thành màu xanh lam nhạt. Khi sự kiện hiển thị được kích hoạt, chúng tôi làm cho Mục tiêu liên quan (là tab bị ẩn) lấy lớp .light-blue để sửa đổi màu nền.

tối tăm

 // html
& lt; ul class = "nav nav-thuốc" & gt;
    ...
& lt; / ul & gt;
& lt; div class = "tab-content mt-3" & gt;
    & lt; div class = "tab-pane active" id = "flamingo" role = "tabpanel" aria-labellingby = "flamingo-tab" & gt;
      ...
    & lt; / div & gt;
    & lt; div class = "tab-pane" id = "cuckoo" role = "tabpanel" aria-labellingby = "profile-tab" & gt;
      ...
    & lt; / div & gt;
    & lt; div class = "tab-pane" id = "ostrich" role = "tabpanel" aria-labellingby = "ostrich-tab" & gt;
      ...
    & lt; / div & gt;
    & lt; div class = "tab-pane" id = "tropicbird" role = "tabpanel" aria-labellingby = "tropicbird-tab" & gt;
      ...
    & lt; / div & gt;
& lt; / div & gt;

// js
$ ('a [data-toggle = "tablet"]'). on ('show.bs.tab', function (e) {
  $ (e.target) .removeClass ("xanh lam nhạt");
  $ (e.osystemTarget) .addClass ("màu xanh lam nhạt");
}) 

Đó là tất cả cho ngày hôm nay! Bạn có thể xem và chỉnh sửa tất cả mã được sử dụng trong bài viết này trên Codepen. Hãy cho tôi biết nếu bạn gặp khó khăn khi cố gắng tạo điều hướng của mình. Chúc một buổi tối vui vẻ và nhớ ăn mừng sự tiến bộ của bạn!

bootstrap-4-navigation-end

Hình ảnh ghi có cho Kyle Letendre cho cảnh quay của anh ấy.

Đọc thêm

Nếu bạn có nhiều thời gian hơn, đây là một số tài nguyên hữu ích:

Hình ảnh ghi nhận của Yuliya cho cảnh quay của cô ấy.

Chia sẻ là quan tâm!

chia sẻ

>

  • LinkedIn


  • Xem thêm những thông tin liên quan đến chủ đề ví dụ điều hướng bootstrap 4

    Bootstrap 4 Scrollspy Tutorial

    alt

    • Tác giả: Clever Techie
    • Ngày đăng: 2018-02-26
    • Đánh giá: 4 ⭐ ( 5252 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Upgrade your Clever Techie learning experience:
      https://www.patreon.com/clevertechie

      UPDATE! (9/13/19) New features and improvements for Clever Techie Patreons:

      1. Download full source code with detailed comments – easy to learn and understand code
      2. Weekly source code file updates by Clever Techie – every time I learn new things about a topic I will add it to the source file and let you know about the update – keep up with the latest coding technologies
      3. Library of custom Clever Techie functions with descriptive, easy to understand comments – skyrocket coding productivity, code more efficiently by using Clever library of custom re-usable functions
      4. Syntax code summary – memorize and review previously learned code faster
      4. Organized file structure – access all Clever Techie lessons, source code, graphics, diagrams and cheat sheet from a single workspace – no more searching around for previously covered material and source code – save enormous amount of time and effort
      5. Outline of topics the source file covers – fast review of all previously learned coding lessons
      6. Access to all full HD 1080p videos with no ads
      7. Console input examples – interactive examples that make it easier to understand and learn coding
      8. Access to updated PHP Programming Book by Clever Techie
      9. Early access to Clever Techie videos

      Subscribe to Clever Techie patreon:
      https://www.patreon.com/clevertechie

      ““““““““““““““““““““““““““““““““““““““““““““““` In this video we’re going to learn how to create a scrollspy with bootstrap 4. A scrollspy is used to automatically update links in the navigation bar as we’re scrolling down the page.

      ““““““““““““““““““““““““““““““““““““““““““““““`
      Hey guys, I’m now using Patreon to share improved and updated video lesson material. For a small fee you can access all the downloadable files from this lesson (source code, icons & graphics, cheat sheets) and everything else included in the video from the Patreon page. Additionally, you will get access to ALL Clever Techie videos in HD format with no ads. Thank you so much for supporting Clever Techie 🙂

      Download this video’s files here:
      https://www.patreon.com/posts/bootstrap-4-20819340

      ( You also get access to ALL source code and any downloadable content of ALL Clever Techie videos, as well as access to ALL videos in HD 1080p quality format with all video ads removed! )

      “““““““““““““““““““““““““““““““““““““““““““““““
      ( Website ) https://clevertechie.com – PHP, JavaScript, WordPress, CSS, and HTML tutorials in video and text format with cool looking graphics and diagrams.

      ( YouTube Channel ) https://www.youtube.com/c/CleverTechieTube

      ( Google Plus ) https://goo.gl/J71p6f – clever techie video tutorials.

      ( Facebook ) https://www.facebook.com/CleverTechie/

      ( Twitter ) https://twitter.com/theclevertechie

    Bootstrap là gì? Hướng dẫn sử dụng Bootstrap cơ bản

    • Tác giả: ironhackvietnam.edu.vn
    • Đánh giá: 3 ⭐ ( 6839 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Bootstrap là gì? Tại sao có hơn 70% website hiện này sử dụng Bootstrap? Tìm hiểu ngay tại Hướng dẫn sử dụng Bootstrap 4 cơ bản tại Ironhack !

    Căn chỉnh các mục điều hướng sang bên phải trong bootstrap-4

    • Tác giả: vi.bannikherafarm.com
    • Đánh giá: 5 ⭐ ( 5839 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Tôi vừa chuyển sang bootstrap 4 và làm lại tất cả html và scss của mình để làm việc với nó và dường như tôi không thể tìm cách đặt một nhóm mục điều hướng ở bên phải của thanh điều hướng. Đây là mã điều hướng của tôi: & …

    [Bootstrap] Phần 19: Thanh điều hướng

    • Tác giả: www.dammio.com
    • Đánh giá: 4 ⭐ ( 3727 lượt đánh giá )
    • Khớp với kết quả tìm kiếm:

    Cách tạo thanh điều hướng trong Bootstrap

    • Tác giả: thuthuat.taimienphi.vn
    • Đánh giá: 3 ⭐ ( 5152 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: tao thanh dieu huong trong bootstrap, Cách tạo thanh điều hướng trong Bootstrap

    12 Ví Dụ Bootstrap Trong Website

    • Tác giả: www.niemvuilaptrinh.com
    • Đánh giá: 5 ⭐ ( 2420 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Xin chào các bạn quay lại blog của mình. Hôm nay chúng ta sẽ đi vào cách sử dụng Bootstrap 4 thông qua ví dụ và snippet. Nào hãy cũng mình tìm hiểu nhé!

    Navigation bar (Thanh điều hướng) trong Bootstrap 4

    • Tác giả: hoc.tv
    • Đánh giá: 4 ⭐ ( 1584 lượt đánh giá )
    • Khớp với kết quả tìm kiếm: Chúng ta cùng bắt đầu bài học để xem cách dùng thanh điều hướng (Navigation bar) trong Bootstrap 4 có ưu điểm gì hơn danh sách điều hướng nhé các bạn!

    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