Người Viết : ViKiMi Editor

Xây dựng website có cấu trúc hiển thị tốt là điều bất kỳ một lập trình viên nào cũng mong muốn. Để cấu trúc hiển thị ấy đạt được một hiệu quả toàn diện thì việc hiển thị cấu trúc của nội dung cần phải đa dạng. Cấu trúc này được biết đến như một mong muốn làm cho trang web tối ưu. Nếu đạt được điều này trang web sẽ tiếp tục thành công và có nhiều đáp ứng về phía User.
Chúng ta có thể thấy cấu trúc hiển thị dạng Tabs và Pills hiên nay đang phổ biến với bất kỳ website thông tin nào hoặc bất kỳ website hoạt động buôn bán nào. Nhờ có cấu trúc Tabs và Pills mà người thiết kế có thể tiết kiệm được một khoảng không gian vô cùng lớn trong thiết kế bố cục trang mà cũng nhờ vậy mà nội dung web site càng tốt hơn cho User
Hình ảnh minh hoạ :

Để đạt được hiệu quả như vậy, với sự hỗ trợ của Framework Bootstrap thì bạn hoàn toàn có thể yên tâm cho việc tạo ra các Tabs và Pills rất đơn giản. Hiệu quả người dùng hoàn toàn tuyệt đối.
So với việc tự lập trình bằng CSS và thư viện Jquery trước kia, thì công việc với Bootstrap thật đơn giản, còn với CSS và Jquery khiến bạn tốn quá nhiều thời gian. Tuy nhiên, vẫn có nhiều người vẫn muốn thực hiện tuỳ chỉnh bằng cách tự lập trình đoạn mã code. Điều đó cũng rất tốt nhưng có lẽ chỉ cần thiết khi bạn muốn tự tuỳ chỉnh chuyên sau vấn đề gì đó.
+ TẠO MENU ĐƠN GIẢN NHẤT VỚI BOOTSTRAP.
Chúng ta biết tất cả các website đều cần menu. Menu có thể thao chiều dọc hay chiều ngang.
Cách thông thường khi tạo một Menu theo chiều ngang thì chúng ta chỉ cần thẻ <UL> và Class .list-inline
EX :
<div class="container">
<h3>MENU THEO CHIỀU NGANG VỚI CLASS .LIST-INLINE</h3>
<ul class="list-inline">
<li><a href="#">Home</a></li>
<li><a href="#">Thời sự</a></li>
<li><a href="#">Bóng Đá</a></li>
<li><a href="#">Thời Trang</a></li>
<li><a href="#">Hot News</a></li>
</ul>
</div>

+ TẠO TABS ĐƠN GIẢN NHẤT VỚI BOOTSTRAP
Để tạo Tabs đơn giản chúng ta chỉ cần dùng thẻ <UL> của HTML và dùng thêm các Class .nav & .nav-tabs
Nếu bạn muốn thêm một trạng thái Active để dánh dấu trang hiện tại thì chỉ cần sử dụng Class .active
EX:
<div class="container">
<h3>TẠO TABS ĐƠN GIẢN NHẤT VỚI BOOTSTRAP</h3>
<ul class="nav nav-tabs">
<li class="active"><a href="#">TỔNG QUAN</a></li>
<li><a href="#">CHỈ SỐ SỨC KHOẺ</a></li>
<li><a href="#">NGÀNH NGHỀ CÔNG VIỆC</a></li>
<li><a href="#">QUAN TÂM ĐẾN</a></li>
<li><a href="#">TRÍCH DẪN</a></li>
</ul>
<br>
<p><strong>CHÚ Ý:</strong> Tại đây chỉ hướng dẫn tạo Tabs cơ bản với Bootstrap. Chưa có bất ký hiệu ứng Toggleable/ Dynamic (Chưa có Click vào các Link trên Tabs để hiển thị ra các nội dung khác nhau</p>
</div>

+ TẠO PILLS ĐƠN GIẢN NHẤT VỚI BOOTSTRAP
Để tạp Pills đơn giản nhất với Bootstrap, chúng ta chỉ cần dùng thẻ UL của HTML và Class .nav & .nav-pills được tạo bởi Bootstrap.
EX :
<div class="container">
<h3>TẠO PILLS ĐƠN GIẢN NHẤT VỚI BOOTSTRAP</h3>
<ul class="nav nav-pills">
<li class="active"><a href="#">TỔNG QUAN</a></li>
<li><a href="#">CHỈ SỐ SỨC KHOẺ</a></li>
<li><a href="#">NGÀNH NGHỀ CÔNG VIỆC</a></li>
<li><a href="#">QUAN TÂM ĐẾN</a></li>
<li><a href="#">TRÍCH DẪN</a></li>
</ul>
</div>

CHÚNG TA THẤY RẰNG HIỆU ỨNG ĐÃ KHÁC HẲN SO VỚI KHI SỬ DỤNG BOOTSTRAP TABS.
TUY NHIÊN CẢ 2 KIỂU CƠ BẢN VỀ TABS VÀ PILLS Ở ĐÂY ĐỀU CHƯA CÓ BẤT KỲ HIỆU ỨNG TOGGLEABLE / DYNAMIC NÀO CẢ
CHÚNG TA SẼ ĐỀ CẬP TỚI HIỆU ỨNG TOGGLEABLE / DYNAMIC NGAY SAU ĐÂY.
A. TẠO TOGGLEABLE / DYNAMIC TABS VỚI BOOSTRAP
Để tạo toggleable Tabs chúng ta cần thêm thuộc tính data-toggle=”tab” vào từng link liên kết thẻ <A> trong mục của thẻ <UL>
Sau đó, Thêm Class .tab-pane vào từng thẻ DIV được dùng để hiển thị nội dung cho các TAB. Và các thẻ DIV này cần được định nghĩa có ID là duy nhất, không có ID nào khác trùng lập. Và các thẻ DIV nào được bao bọc bên trong một thẻ DIV có Class .tab-content
Chúng ta biết rằng, DIV ( được dùng để hiển thị nội dung cho các TAB ) có ID là duy nhất và trùng khớp với phần href của thẻ <A> trong mục của UL
Và nếu bạn muốn thêm các hiệu ứng Face in và Out thì bạn cần thêm Class .Fade vào các Tab-Pane
<div class="container">
<h2>TẠO MỘT DYNAMIC TABS VỚI BOOTSTRAP</h2>
<p>ĐỂ THỰC HIỆN ĐƯỢC ĐIỀU NÀY, BẠN CHỈ CẦN THÊM THUỘC TÍNH data-toggle="tab" VÀO MỖI LINK LIÊN KẾT. SAU ĐÓ, BẠN THÊM CLASS .tab-pane VÀO VỊ TRÍ PHÙ HỢP.</p>
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">TRANG CHỦ</a></li>
<li><a data-toggle="tab" href="#menu1">THỜI SỰ</a></li>
<li><a data-toggle="tab" href="#menu2">BÓNG ĐÁ</a></li>
<li><a data-toggle="tab" href="#menu3">THỜI TRANG</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>TRANG CHỦ</h3>
<p>Tại đây, hiển thị thông tin chính của trang chủ. Là các trang thông tin cần thiết nhất và đơn giản. giống như một sơ đồ rút gọn.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>THỜI SỰ</h3>
<p>Tại đây, Hiển thị thông tin trên trang hiển thị thông tin về thời sự, các tin thời sự trên thế giới.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>BÓNG ĐÁ</h3>
<p>Tại đây, hiển thị các thông tin về bóng đá, các thông tin rút gọn để người dùng dễ tiếp cận.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>THỜI TRANG</h3>
<p>Tại đây, Hiển thị các thông tin về thời trang, các thông tin rút gọn về thời trang để người dùng dễ tiếp cận.</p>
</div>
</div>
</div>




B. TẠO TOGGLEABLE / DYNAMIC PILLS VỚI BOOSTRAP
Tất cả chúng ta chỉ cần thực hiện tương tự giống với toggleable / dynamic Tabs.
Việc chúng ta cần làm là sử dụng thuộc tính data-toggle=”pill” và Class .nav-pills
<div class="container">
<h2>TẠO MỘT DYNAMIC TABS VỚI BOOTSTRAP</h2>
<p>ĐỂ THỰC HIỆN ĐƯỢC ĐIỀU NÀY, BẠN CHỈ CẦN THÊM THUỘC TÍNH data-toggle="tab" VÀO MỖI LINK LIÊN KẾT. SAU ĐÓ, BẠN THÊM CLASS .tab-pane VÀO VỊ TRÍ PHÙ HỢP.</p>
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">TRANG CHỦ</a></li>
<li><a data-toggle="pill" href="#menu1">THỜI SỰ</a></li>
<li><a data-toggle="pill" href="#menu2">BÓNG ĐÁ</a></li>
<li><a data-toggle="pill" href="#menu3">THỜI TRANG</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>TRANG CHỦ</h3>
<p>Tại đây, hiển thị thông tin chính của trang chủ. Là các trang thông tin cần thiết nhất và đơn giản. giống như một sơ đồ rút gọn.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>THỜI SỰ</h3>
<p>Tại đây, Hiển thị thông tin trên trang hiển thị thông tin về thời sự, các tin thời sự trên thế giới.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>BÓNG ĐÁ</h3>
<p>Tại đây, hiển thị các thông tin về bóng đá, các thông tin rút gọn để người dùng dễ tiếp cận.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>THỜI TRANG</h3>
<p>Tại đây, Hiển thị các thông tin về thời trang, các thông tin rút gọn về thời trang để người dùng dễ tiếp cận.</p>
</div>
</div>
</div>



VỚI CHUỖI GIỚI THIỆU VỀ TABS VÀ PILLS TRONG LẬP TRÌNH WEBSITE, CHẮC CÁC BẠN ĐÃ CÓ MỘT SỐ CÁCH XỬ LÝ HIỆU QUẢ KHI LẬP TRÌNH WEBSITE.
MONG RẰNG BẠN SẼ CÓ THIẾT KẾ PHÙ HỢP VÀ ĐẸP MẮT NHẤT CHO NHỮNG PHẦN THIẾT KẾ CHI TIẾT CÁC MẢNG DỮ LIỆU HIỂN THỊ THEO CÁC CHỦ ĐỀ KHÁC NHAU TRONG TỔNG QUAN CHUNG CỦA DỮ LIỆU TỔNG QUAN.