Người Viết : ViKiMi Editor

Trình bày Giao diện Website với bố cục hiển thị bài viết
Việc hiển thị bài viết trên các trang web càng ngày cang đa dạng, các hình thức cũng càng phong phú theo các mẫu thiết kế khác nhau nhưng tất cả để mang lại cho trang web giao diện hài hoà nhất, đúng mục đích nhất và đạt được yêu cầu thiết kế.
Các giao diện Web mà chúng ta vẫn bắt gặp với các bố cục hiển thị bài viết khá phổ biến. Tuy nhiên, không phải bất cứ khi nào bạn cũng có thể thực hiện được như mong muốn. Tất cả là chúng ta phải thực hiện theo chuẩn cơ bản nhất sao cho website không lỗi thời.
Chúng ta có thể kể đến các hình thức thể hiện bố cục và hiển thị bài post hiện nay như :

Hình 1 : Cách hiển thị Posts đơn giản ít hình ảnh.

Hình 2 : Cách hiển thị Posts với nhiều hình ảnh, cách này khá phổ biến

Hình 3 : Cách hiển thị Posts trên Website một cách đơn giản với cách hình ảnh của bài Post
Những cách hiển thị bài viết đều đạt được mục đích thiết kế giao diện ban đầu, các thiết kế mang tính khoa học để thuận theo luồng tiếp nhận thông tin website từ phía người dụng. Các hình ảnh và tiêu đề của các bài posts đều được xử lý và hiển thị có tính gắn kết cao tạo thành khối hiển thị với từng bài Post. Nhờ thiết kế như vậy mà đem lại tối giản nhưng vẫn đầy đủ thông tin.
Trong lập trình thiết kế website, đặc biệt khi xử lý với Bootstrap thì việc hiển thị bài viết càng được quan tâm. Cách hiển thị bài viết trong bố cục của website hoặc các Pages của website hoặc theo từng Category được kết quả cao hơn nhờ xử lý hình ảnh của Bootstrap. Các cách xử lý hình ảnh cơ bản của Bootstrap đem lại hiệu quả tốt theo yêu cầu chung, và cũng tăng tốc độ cho trang web. Dưới đây là những cách xử lý cơ bản về hình ảnh của Post với Bootstrap.
THỰC HIỆN BO GÓC TRÒN CHO HÌNH ẢNH
Trong hiển thị bài Post hình ảnh có thể được yêu cầu phải bo góc để tạo cách nhìn tốt hơn. Với Bootstrap cách bo góc khác đơn giản, chúng ta chỉ cần thêm class .img-rounded cho hình ảnh muốn thực hiện bo góc.
<img src="C:/wamp/www/Internet-Sanf/wp-content/uploads/2022/09/wordpress-theme-free.png" class="img-rounded" alt="Bo góc" width="304" height="236">
Chỉ cần thực hiện thêm class img-rounded cho hình ảnh <img/> cần bo góc.
THỰC HIỆN BO CÁC GÓC TRÒN CHO HÌNH ẢNH
Chúng ta cũng có thể bo các góc tròn cho hình ảnh khi cần thiết. Cách thực hiện với Bootstrap thì chúng ta cũng chỉ cần thực hiện thêm class .img-circle cho hình ảnh cần bo các góc tròn.
<img src="C:/wamp/www/Internet-Sanf/wp-content/uploads/2022/09/wordpress-theme-free-circle.png" class="img-circle" alt="Bo góc tròn" width="304" height="236">
Chỉ cần thực hiện thêm class img-circle cho <img/> cần bo các góc tròn
THỰC HIỆN TẠO HÌNH ẢNH THUMBNAIL
Với bất kỳ trang web nào việc hiển thị các hình ảnh thu nhỏ Thumbnail là hết sức cần. Nếu không nói là đến nay việc hiển thị này là quá phổ biến. Tất cả các website trên thế giới đều đang chọn cách này. Để tạo hình ảnh thu nhỏ Thumbnail chúng ta chỉ cần thêm class .img-thumbnail cho hình ảnh cần tạo hiệu ứng Thumbnail.
<img src="C:/wamp/www/Internet-Sanf/wp-content/uploads/2022/09/wordpress-theme-free-thumbnail.png" class="img-circle" alt="Bo góc tròn" width="304" height="236">
Chỉ cần thêm class img-thumbnail cho <img/> cần tạo hiệu ứng thumbnail

TRÊN ĐÂY LÀ NHỮNG CÁCH THÔNG THƯỜNG ĐƯỢC SỬ DỤNG ĐỂ TẠO CÁC HIỆU ỨNG ẢNH VỚI BOOTSTRAP.
TUY NHIÊN KHÔNG THỂ THIẾU ĐƯỢC LÀ CÁCH XỬ LÝ HIỂN THỊ HÌNH ẢNH TƯƠNG THÍCH CÁC LOẠI THIẾT BỊ RESPONSIVE IMAGES
THỰC HIỆN HIỂN THỊ RESPONSIVE IMAGE TRONG TRANG WEB
Để thực hiện tích Responsive cho hình ảnh chúng ta chỉ cần thêm class .img-responsive Cho hình ảnh cần thực hiện xử lý Responsive.
[ LAYOUT WEBSITE – THỰC HIỆN HIỂN THỊ BỐ CỤC CÁC BÀI VIẾT TRÊN WEBSITE ]
Layout website đem lại một cách nhìn tổng quan cho người dùng. Để tạo một Layout website tốt và có thể hiển thị đa phương tiện, đầy đủ tinh Responsive yêu cầu, buộc lòng phải có các đơn giản hiệu quả nhất. Và với Bootstrap thể hiện Layout rất đơn giản, hiện đại đúng theo phong cách các website hiện nay.
+ Chúng ta cần tạo các Grid system để hiển thị Layout phù hợp cho từng thiết bị
+ Sử dụng class .thumbnail để tạo các thư viện hình ảnh theo yêu cầu cho từng thiết bị hiển thị
+ Sử dụng class .caption để tạo hiệu ứng chữ cho các tiêu đề của hình ảnh bài viết.
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<a href="#">
<img src="C:/wamp/www/Internet-Sanf/wp-content/uploads/2022/09/ theme-free.jpg" style="width:100%">
<div class="caption">
<p>Bài viết về tình hình bão lụt...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#">
<img src="C:/wamp/www/Internet-Sanf/wp-content/uploads/2022/09/ theme-free.jpg" style="width:100%">
<div class="caption">
<p>Bài viết tình hình dự báo kết quả V-League...</p>
</div>
</a>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#">
<img src="C:/wamp/www/Internet-Sanf/wp-content/uploads/2022/09/ theme-free.jpg" alt="" style="width:100%">
<div class="caption">
<p>Bài viết thông tin tài chính chứng khoán...</p>
</div>
</a>
</div>
</div>
</div>
Kết quả hiển thị với hai cách thể hiện bên dưới, tuỳ theo lựa chọn cho website của bạn muốn thực hiện.
Khung hình hiển thị trên Browser với Div khung chứa có class .container

Khung hình hiển thị trên Browser với Div khung chứa có class .container-fluid

HIỂN THỊ BỐ CỤC CỦA CÁC BÀI VIẾT TRÊN LAYOUT CỦA WEBSITE LÀ VÔ CÙNG CÂNG THIẾT. DO ĐÓ VIỆC THIẾT KẾ CHO HIỂN THỊ BỐ CỤC BÀI VIẾT LÀ VÔ CÙNG CẦN THIẾT. NẾU QUAN TÂM VÀ THỰC HIỆN THẬT TỐT THÌ GIAO DIỆN WEBSITE SẼ ĐẠT ĐỘ THÂN THIỆN DỄ SỬ DỤNG NHẤT, HỮU ÍCH CHO NGƯỜI DÙNG. HIỂN THỊ LAYOUT WEBSITE CẦN LUÔN QUAN TÂM ĐÚNG CÁCH.