Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Bootstrap Tabs và Pills

5/5 - (9 bình chọn)

Trong bài trước chúng ta đã tìm hiểu làm thế nào để ẩn hiện một lượng lớn nội dung mà không làm ảnh hưởng đến bố cục trang bằng cách sử dụng các lớp có sẵn của Bootstrap Collapse. Trong bài này chúng ta sẽ tìm hiểu về Bootstrap Tabs và Pills. Gần giống như bootstrap collapse, bootstrap tabs và pills cũng giúp chúng ta thu gọn một lượng lớn nội dung và phần nội dung sẽ được hiển thị qua các tabs tương ứng. Ngoài ra, bootstrap tabs và pills còn được sử dụng rất linh hoạt trong menu. Cụ thể:

Xem Thêm: Bootstrap Collapse

  1. Bootstrap Tabs với menu

Hầu hết các trang web đều có menu. Trong html, menu thường được định nghĩa trong một danh sách <ul>. Trong bootstrap, để menu hiển thị nằm ngang có thể hiển thị theo các cách sau:

a. Thêm lớp .list-inline vào phần tử <ul>

Bootstrap Tabs và Pills 01

b. Hoặc bạn có thể hiển thị menu bằng cách sử dụng bootstrap tabs

  • Tabs được tạo khi thêm các lớp: .nav và .nav-tabs vào phần tử <ul>
  • Thêm lớp .active vào phần tử <li> để đánh dấu trang hiện tại

Bootstrap Tabs và Pills 02

Lưu ý: Ví dụ trên hướng dẫn các tạo tab điều hướng cơ bản, nó chưa có tác dụng chuyển đổi nội dung giữa các tabs. Phần dưới mình sẽ hướng dẫn cách chuyển đổi giữa các tabs.

  1. Bootstrap Tabs với Dropdown Menu

Các tabs cũng có thể chứa các menu thả xuống bằng cách kết hợp sử dụng các lớp trong Bootstrap Dropdown mà chúng ta đã học ở bài trước.

Xem thêm: Bootstrap Dropdowns

Bootstrap Tabs và Pills 03

  1. Bootstrap Pills
  • Cũng giống như Tabs, Pills được tạo ra khi thêm lớp .nav và .nav-pills vào phần tử <ul>. Đánh dấu trang hiện tại bằng cách thêm lớp .active vào phần tử <li> tương ứng. Bạn sẽ thấy bootstrap tabs và bootstrap pills giống nhau, tuy nhiên cách hiển thị của chúng lại khác nhau.

Bootstrap Tabs và Pills 04

a. Vertical Pills

Pills có thể được hiển thị theo chiều dọc bằng cách thêm lớp .nav-stacked vào phần tử <ul> chứa các lớp .nav và .nav-pills

Bootstrap Tabs và Pills 05

b. Bootstrap Pills với Dropdown Menu

Cũng giống như Tabs thì Pills cũng có thể chứa các menu thả xuống bằng cách sử dụng các lớp có sẵn trong bootstrap dropdowns

Bootstrap Tabs và Pills 06

Xem Thêm: Bootstrap Grid System: Hệ thống lưới trong bootstrap

  1. Chuyển đổi giữa các Tabs

Để chuyển đổi giữa các tabs:

  • Thêm thuộc tính data-toggle=“tab” vào mỗi liên kết
  • Thêm lớp .tab-pane vào phần tử <div> chứa id trong mỗi tab
  • Tất cả các tab được bao trong phần tử <div> có chứa lớp .tab-content

Bootstrap Tabs và Pills 07

  1. Chuyển đổi giữa các Pills

Tương tự như tabs, các thuộc tính và các lớp tương tự, bạn chỉ cần đổi thuộc tính data-toggle=“pill”.

Tổng kết

Qua phần chuyển đổi giữa các tabs và pills bạn sẽ thấy giống với bootstrap collapse. Tuy nhiên, với bootstrap tabs và pills ngoài việc sử dụng linh hoạt trong việc hiển thị nội dung, chúng còn được sử dụng linh hoạt trong tạo ra menu. Bootstrap tabs và pills cũng tương tự nhau, bạn chỉ cần nắm rõ một cái và tùy theo mục đích của mình mà vận dụng thật linh hoạt.

Xem Thêm: Dịch vụ thiết kế website

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Trên thanh menu chỉ chứa được một số các mục chính nhất định, trong khi bạn lại có rất nhiều...
    16 giây trước
  2. Cách check unique Content đóng vai trò vô cùng quan trọng, nhất là đối với dân content SEO. Bởi trong quá...
    29 giây trước
  3. Google lighthouse đưa ra các chỉ số cần tối ưu đặc biệt là trong Performance, đối với nhiều anh em...
    28 giây trước
  4. Xin chào mọi người, sau hàng loạt bài về PHP về: toán tử , câu lệnh điều khiển, thao tác...
    16 giây trước
  5. Việc tối ưu hóa công cụ tìm kiếm nghe có vẻ phức tạp, nhưng nếu chịu khó tìm hiểu các...
    12 giây trước
  6. Mẫu trang đích HTML miễn phí là một số công cụ cần thiết để tạo trang chào mừng, nơi mọi người sẽ...
    12 giây trước
  7. Đối với SEOer chúng ta, công việc phụ thuộc rất nhiều vào Google. Nhưng càng ngày những quyết định mới...
    24 giây trước
  8. Facebook Messenger có hơn tỷ người dùng mỗi tháng. Nó cho phép các doanh nghiệp có thể trao đổi trực...
    16 giây trước
  9. Ắt hẳn bạn sẽ nhận được các thông báo trong Google Search Console như: Vấn đề CLS: cao hơn 0,1...
    6 giây trước
  10. Làm thế nào để bạn có thể viết nội dung thân thiện với SEO nhất và có thể giữ cho...
    21 giây trước