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í 17++ 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

Dù bạn dùng phiên bản WordPress với lưu lượng truy cập cao hay một blog nhỏ trên máy chủ chia...

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

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. Bạn đang kinh doanh online? Bạn là một marketer? Hay đơn giản bạn là một Web Developers ? Và một ngày...
    15 giây trước
  2. Làm thế nào để Kích hoạt và Vô hiệu hoá XMLRPC.PHP trong WordPress và tại sao File xmlrpc.php là gì?...
    23 giây trước
  3. Nhu cầu sở hữu những website chất lượng, thu hút người dùng đang ngày càng gia tăng đối với các...
    12 giây trước
  4. Rõ ràng tất cả chúng ta đều muốn có thêm lưu lượng truy cập công cụ tìm kiếm, bán hàng...
    30 giây trước
  5. Hiện nay các chiến dịch SEO về sản phẩm, dịch vụ trên các trang thương mại điện tử có sức...
    25 giây trước
  6. Trong bài này chúng ta sẽ tìm hiểu những thủ thuật tiếp theo giúp bạn hiển thị những chức năng...
    9 giây trước
  7. Đồ nội thất là mặt hàng có giá trị và cần thiết trong cuộc sống hiện đại. Nguồn cung ứng...
    7 giây trước
  8. Việc SEOer không biết CODE và Coder không biết SEO ở Việt Nam là rất phổ biến, vì thực ra...
    16 giây trước
  9. Tìm kiếm thông tin trên Internet là hình thức chủ yếu để mọi người tiếp cận thông tin hiện nay....
    30 giây trước
  10. Ngày nay khi việc mua sắm trực tuyến đang trở thành xu thế thời đại. Khi các trang thương mại...
    13 giây trước