Người Viết : ViKiMi Editor
Thiết website đòi hỏi bức thiết một trình độ chuyên môn nhất định. Buộc lòng bạn phải có một kiến thức lập trình cơ bản. Hiện nay, nhiều lập trình viên cho rằng việc nắm chắc các hỗ trợ Framework là có thể thực hiện lập trình. Nhưng sự thật bạn phải có những cách xử lý cơ bản nhất để có thể thay đổi kịp theo các môi trường sinh thái website.
Trong việc đề cập tới Bootstrap rất cần thiết những yếu tố cơ bản nhất. Nhưng để hoàn thiện việc lập trình website thì bạn nên nắm chắc CSS và Javascript. Việc bồi dưỡng kiến thức do quá trình học hỏi nên cần nhiều thời gian.
Với Bootstrap chúng ta cần nắm những thứ thiết yếu, thực hiện thiết kế tốt nhất. Trong bài viết này, sẽ đề cập đến yếu tố mới hơn, Chúng ta sẽ tìm đến một đích mới là các xử lý không thể thiết với Bootstrap. Những tổng hợp xử lý ngắn gọn của Bootstrap sẽ được hiểu rõ nhất.
A. Bootstrap Pagination
PHÂN TRANG VỚI BOOTSTRAP
Khi xây dựng một trang website bạn có quá nhiều trang, nói chính xác là dữ liệu trang website của bạn quá nhiều, quá dài. Bạn cần một website ngắn gọn hiệu quả với người sử dụng. Chắc chắn với nhu cầu đó buộc lòng bạn phải thực hiện phân trang cho trang website của bạn.
Việc phân trang sẽ tạo một cách nhìn khoa học :
Chúng ta sẽ có cách thanh phân trang như bên trên.
Để thực hiện hiển thị thanh phân trang với Bootstrap thì bạn cần tạo một danh sách hiển thị <UL> và thêm vào Class .pagination cho thẻ <UL> này. Nếu muốn thể hiện trạng thái active cho trang hiện tại current page thì sẽ thực hiện thêm Class .active cho thẻ <LI> cần thiết.
Tại Ví dụ này : Sẽ thực hiện thêm Class .active cho thẻ <LI> thứ 2, để thể hiện trạng thái active cho trang hoạt động hiện trại Current Page 2.
<div class="container">
<h2>PHÂN TRANG VỚI BOOTSTRAP</h2>
<p>SỬ DỤNG THẺ UL VỚI CLASS .pagination ĐỂ CUNG CẤP LINK PHÂN TRANG</p>
<ul class="pagination">
<li><a href="#">1</a></li>
<li class="active"><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
</ul>
</div>
+ THÊM TRẠNG THÁI DISABLE CHO LINK PHÂN TRANG KHÔNG THỂ THỰC HIỆN CLICK CHUỘT.
Để thực hiện vô hiệu hoá bất kỳ link liên kết phân trang nào thì chúng ta sẽ làm như sau :
<div class="container">
<h2>THỰC HIỆN THIẾT LẬP TRẠNG THÁI DISABLE VỚI LINK PAGINATION</h2>
<p>CHÚNG TA CHỈ CẦN THÊM CLASS . disable CHO MỘT LINK BẤT KỲ MUỐN THIẾT LẬP VÔ HIỆU HOÁ</p>
<ul class="pagination">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li class="disabled"><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
</ul>
</div>
+ ĐỂ THIẾT LẬP KÍCH THƯỚC CHO PAGINATION CHÚNG TA SỬ DỤNG CLASS .pagination-lg & .pagination-sm THÊM VÀO THẺ <UL>
Ví dụ :
<ul class=”pagination pagination-lg”>
<li><a href=”#”>1</a></li>
<li><a href=”#”>2</a></li>
<li><a href=”#”>3</a></li>
<li><a href=”#”>4</a></li>
<li><a href=”#”>5</a></li>
</ul>
<ul class=”pagination pagination-sm”>
<li><a href=”#”>1</a></li>
<li><a href=”#”>2</a></li>
<li><a href=”#”>3</a></li>
<li><a href=”#”>4</a></li>
<li><a href=”#”>5</a></li>
</ul>
LƯU Ý : Bootstrap chỉ giúp bạn hiển thị phần giao diện website; Nếu bạn muốn thực hiện trọn vẹn kỹ thuật phân trang thì cần thêm xử lý phân trang bằng các ngôn ngữ lập trình web như là php và java hay dotnet. Vì phân trang bằng các ngôn ngữ lập trình php và java hay dotnet sẽ giúp bạn xử lý dữ liệu từ cơ sở dữ liệu để hiển thị lên giao diện.
Phần trên giao diện chúng ta đã có Bootstrap hỗ trợ hiển thị; Vì vậy cần sự kết nối dưới tầng dữ liệu và giao diện để kỹ thuật phân trang được đầy đủ.
Một số CMS như WordPress và nhiều Framework MVC… hiện nay cũng đã hỗ trợ phân trang rất đơn giản và dễ sử dụng. Nên có thể dễ dàng phân trang với các hỗ trợ có sẵn này.
+ TẠO MỘT PHÂN TRANG BREADCRUMBS VỚI BOOTSTRAP
Để tạo một phân trang Breadcrumbs trong phân cấp điều hướng thường có của các website chúng ta sử dụng Thẻ <UL> với Class .breakcrumb
Để tạo trạng thái Active cho Breakcrumbs sẽ sử dụng Class .active
Ví Dụ :
<div class="container">
<h2>THIẾT LẬP PHÂN TRANG BREAKCRUMBS VỚI BOOSTRAP</h2>
<p>SỬ DỤNG CLASS .breakcrumb ĐỂ THIẾT LẬP PHÂN TRANG BREAKCRUMD, CÂY PHÂN CẤP :</p>
<ul class="breadcrumb">
<li><a href="#">Trang Chủ</a></li>
<li><a href="#">Tin Tức</a></li>
<li><a href="#">Thời Tiết</a></li>
<li class="active">Bão Lụt Miền Trung</li>
</ul>
</div>
LƯU Ý : CŨNG GIỐNG NHƯ PHẦN TRÊN
B. Bootstrap Pager
Sử dụng Bootstrap Pager cho phép hiển thị một dạng phân trang khác nữa gọi là Pager.
Bootstrap Pager sẽ thực hiện hỗ trợ phân trang có : TRANG TRƯỚC VÀ TRANG SAU.
Để thực hiện phân trang Pager thì bạn cần sử dụng thẻ <UL> với Class .pager để có Page Previous và Page Next
Mã code HTML và Bootstrap :
<div class="container">
<h2>PHÂN TRANG PAGER</h2>
<p>SỬ DỤNG THẺ UL VỚI CLASS .pager</p>
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
THỰC HIỆN CĂN ĐỀU NÚT PREVIOUS PAGER VÀ NEXT PAGER VỀ HAI PHÍA KHUNG CHỨA CONTAINER
<div class="container">
<h2>PHÂN TRANG PAGER</h2>
<p>SỬ DỤNG THẺ UL VỚI CLASS .pager VÀ LI VỚI CLASS .previous VÀ .next </p>
<ul class="pager">
<li class="previous"><a href="#">Previous Pager</a></li>
<li class="next"><a href="#">Next Pager</a></li>
</ul>
</div>
C. NHÓM DANH SÁCH VỚI BOOTSTRAP
BOOTSTRAP LIST GROUPS
+ NHÓM DANH SÁCH CƠ BẢN
Nhóm danh sách cơ bản là nhóm danh sách không có thứ tự trong danh sách các phần tử.
Để tạo được nhóm cơ bản với Bootstrap ta sử dụng thẻ <UL> với Class .list-group và sử dụng thẻ <LI> với Class .list-group-item
Mã code HTML và Bootstrap :
<div class="container">
<h2>NHÓM DANH SÁCH CƠ BẢN VỚI BOOTSTRAP</h2>
<ul class="list-group">
<li class="list-group-item">PHẦN TỬ 1</li>
<li class="list-group-item">PHẦN TỬ 2</li>
<li class="list-group-item">PHẦN TỬ 3</li>
<li class="list-group-item">PHẦN TỬ 4</li>
</ul>
</div>
+ NHÓM DANH SÁCH VỚI BADGES
Để thêm Badges vào nhóm danh sách List Groups, chúng ta chỉ cần thêm Badges, Và các badges sẽ hiển thị phía bên phải của List Groups
Mã code HTML và Bootstrap :
<div class="container">
<h2>NHÓM DANH SÁCH CÓ BADGES</h2>
<ul class="list-group">
<li class="list-group-item">TẠO MỚI <span class="badge">12</span></li>
<li class="list-group-item">ĐÃ XOÁ <span class="badge">5</span></li>
<li class="list-group-item">CẢNH BÁO <span class="badge">3</span></li>
</ul>
</div>
+ NHÓM DANH SÁCH VỚI CÁC MỤC LINKS LIÊN KẾT (Linked Items)
Chúng ta có thể tạo một List Groups với các mục liên kết và các mục liên kết này cũng có thể là một siêu liên kết.
Để tạo một nhóm danh sách có các Liên kết, chúng ta làm như sau :
Sử dụng thẻ DIV thay vì thẻ UL
Sử dụng thẻ a thay vì LI
Chúng ta có thẻ sử dụng Class .active để đánh dấu phần tử hiện tại.
Mã code HTML và Bootstrap :
<div class="container">
<h2>DANH SÁCH NHÓM VỚI CÁC MỤC LIÊN KẾT (LINKED ITEMS)</h2>
<div class="list-group">
<a href="#" class="list-group-item active">PHẦN TỬ SỐ 1</a>
<a href="#" class="list-group-item">PHẦN TỬ SỐ 2</a>
<a href="#" class="list-group-item">PHẦN TỬ SỐ 3</a>
</div>
</div>
THỰC HIỆN VÔ HIỆU HOÁ MỘT ITEM
Để vô hiệu hoá một mục nào đó thì chúng ta sử dụng Class .disabled
Mã code HTML và Bootstrap :
<div class="container">
<h2>DANH SÁCH NHÓM VỚI PHẦN TỬ BỊ VÔ HIỆU HOÁ DISABLED ITEM</h2>
<div class="list-group">
<a href="#" class="list-group-item disabled">PHẦN TỬ SỐ 1</a>
<a href="#" class="list-group-item">PHẦN TỬ SỐ 2</a>
<a href="#" class="list-group-item">PHẦN TỬ SỐ 3</a>
</div>
</div>
+ THIẾT LẬP MÀU SẮC CHO CÁC MỤC TRONG DANH SÁCH
Để thiết lập màu sắc cho các mục chúng ta sẽ sử dụng các Class ngữ cảnh (Contextual Class) :
.list-group-item-success
.list-group-item-info
.list-group-item-warning
.list-group-item-danger
+ THIẾT LẬP NỘI DUNG TUỲ CHỈNH :
Để tạo nội dung tuỳ chỉnh Bootstrap cung cấp các Class :
.list-group-item-heading
.list-group-item-text
Lưu ý : Bạn có thể thêm bất kỳ thành phần HTML nào vào một nhóm danh sách
<div class="container">
<h2>NỘI DUNG TUỲ CHỈNH (COSTUM CONTENT) VỚI BOOTSTRAP</h2>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">PHẦN TỬ HEADER CỦA MỤC 1</h4>
<p class="list-group-item-text">NỘI DUNG VĂN BẢN CỦA MỤC 1</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">PHẦN TỬ HEADER CỦA MỤC 2</h4>
<p class="list-group-item-text">NỘI DUNG VĂN BẢN CỦA MỤC 2</p>
</a>
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">PHẦN TỬ HEADER CỦA MỤC 3</h4>
<p class="list-group-item-text">NỘI DUNG VĂN BẢN CỦA MỤC 3</p>
</a>
</div>
</div>
VỚI HAI PHẦN VỀ CÁC PHẦN TỬ BOOTSTRAP HAY SỬ DỤNG HY VỌNG BẠN SẼ CÓ CÁCH NHÌN THIẾT KẾ MỚI DÙNG BOOTSTRAP. TẠO NÊN BỘ MẶT GIAO DIỆN MỚI CHO WEBSITE VÀ TẠO NHỮNG TIỆN ÍCH HỮU HIỆU CHO NGƯỜI SỬ DỤNG. SỬ DỤNG BOOTSTRAP ĐỂ THIẾT KẾ WEBSITE HIỆN NAY ĐANG ĐƯỢC ƯU TIÊN LỚN TẠI CÁC CÔNG TY LẬP TRÌNH WEBSITE, BOOTSTRAP LÀ FRAMEWORK KHÔNG THỂ THIẾU VỚI MỌI LẬP TRÌNH VIÊN.
