Người Viết : ViKiMi Editor

Hiển thị các bài Post không dùng Bootstrap. Hướng tới Responsive website chuyên nghiệp.
Cách hiển thị các posts trên Layout website với Bootstrap rất thuận tiện và cũng hữu ích. Nếu bạn sử dụng Bootstrap để thiết kế giao diện website một các thành thục điều đó rất tốt. Cách sử dụng các gói đã được Bootstrap thiết kế rất tốt cho nhiều trường hợp cần nhanh chóng.
Tuy nhiên, trong nhiều trường hợp để làm chủ việc lập trình nhiều lập trình viên vẫn chọn cách tuỳ chỉnh của bản thân, sử dụng mã code lập trình kèm theo. Phong cách này có lẽ với các Lập trình viên đó là điều thông thường, đem lại các lợi ích hơn.
Cũng vì thế mà trong nhiều cách hiển thị bài Posts trên bố cục website, nhiều Lập trình viên vẫn chọn cách tự lập trình, kiểm tra các Line code và không chọn các gói hỗ trợ có sẵn của Bootstrap Framework.
Trong bài viết này, sẽ đề cập tới hiển thị bài Post một cách đơn giản nhất và không sử dụng Bootstrap để đem lại tốc độ cao hơn cho Loading website. Việc hiển thị Posts lần này chỉ sử dụng tới HTML và CSS đơn thuần.Tất nhiên để việc hiển thị này thành công thì bạn cần phải tự thêm phần hiển thị Responsive cho website bằng CSS.
Trước tiên, Chúng ta sẽ đề cập tới định vị vị trí các phần tử bằng CSS. Trong CSS các phần tử sẽ được định vị nhờ thuộc tính Position và các giá trị của Position. Thuộc tính Position sẽ được gắn cho các phần tử HTML (Thông thường nhất là thẻ Div) để định vị vị trí.
+ Thuộc tính Position chỉ định loại phương thức định vị cho một phần tử được chỉ định. Các loại phương thức định vị : Static; relative; fixed; absolute; sticky;
+ Khi phần tử HTML được định vị bằng thuộc tính Position của CSS thì phần tử này sẽ được định vị theo các thuộc tính cơ bản là top, bottom, left và right.
+ Định vị phần tử bằng Position : related.
Phần tử sẽ được định vị dựa vào vị trí bình thường của nó.
+ Định vị phần tử bằng Position : absolute
Phần tử sẽ được định vị dựa vào vị trí của phần tử bậc thứ tự cao hơn, gần nhất của nó trong layout website. Nhiều lúc chúng ta vẫn gọi là phần tử cha.
Tuy nhiên, nếu một phần tử được định vị tuyệt đối không có tổ tiên nào được định vị, nó sẽ sử dụng phần <Body> của Website và di chuyển cùng với việc cuộn trang.
PHẦN TIẾP THEO, CHÚNG TA TẠO MỘT CÁCH HIỂN THỊ POSTS VỚI HTML VÀ CSS
Css được sử dụng cho việc hiển thị style của các bài Posts
<style>
.gallery {
width: 25em;
margin: 2em auto;
}
.gallery-item {
position: relative;
width : 328px;
float: left;
border: 1px solid #b1b1b1;
margin-bottom: 2em;
margin-right: 2%;
background-color: green;
}
.gallery-item img {
width: 370px;
position: inherit;
margin-left: -20px;
}
.gallery-item:hover .img-title {
opacity: 0.9;
}
.img-title {
position: absolute;
margin-top: -20.5%;
height: 50px;
width: 96%;
text-align: justify;
opacity: 0.7;
background-color: #ffffff;
padding: 2%;
/*transition: all 0.5s ease; */
}
.img-title h5 {
position: absolute;
color: #333;
top : -18%;
width: 80%;
text-align: justify;
line-height: 150%;
}
</style>
HTML được sử dụng trong bố cục Layout website
<div class=”wrapper clearfix”>
<figure class=”gallery-item”>
<img src=” C:/wamp/www/Internet-Sanf/wp-content/uploads/2022/09/lights.jpg”>
<figcaption class=”img-title”>
<h5>Tại Đây Hiển Thị Tiêu Đề Bài Post Số 1.</h5>
</figcaption>
</figure>
<figure class=”gallery-item”>
<img src=” C:/wamp/www/Internet-Sanf/wp-content/uploads/2022/09/Natural.jpg”>
<figcaption class=”img-title”>
<h5>Tại Đây Hiển Thị Tiêu Đề Bài Post Số 2.</h5>
</figcaption>
</figure>
<figure class=”gallery-item”>
<img src=” C:/wamp/www/Internet-Sanf/wp-content/uploads/2022/09/ Fjords.jpg”>
<figcaption class=”img-title”>
<h5>Tại Đây Hiển Thị Tiêu Đề Bài Post Số 3.</h5>
</figcaption>
</figure>
</div>
Lưu ý : Với Class Clearfix bạn có thể tham khảo ở một bài khác. Và việc xoá khoảng trống không cần thiết thì bạn có thêm Class Clearfix cho đối tượng HTML.
KẾT QUẢ HÌNH ẢNH HIỂN THỊ CHO POSTS TRÊN WEBSITE

Giao diện thân thiện với người sử dụng, theo chuẩn Interface!
XÂY DỰNG WEBSITE HIỆU QUẢ SẼ TẠO NÊN MỘT BỐI CỤC TRANG WEB TỐT NHẤT. KHI LỰA CHỌN XÂY DỰNG WEBSITE KHÔNG THỂ THIẾT VIỆC CHĂM SÓC GIAO DIỆN MỘT CÁCH TỐI ƯU. VỚI NHỮNG TUỲ CHỈNH LẬP TRÌNH THẬT ĐƠN GIẢN SẼ TẠO MỘT THUẬN LỢI LỚN CHO PHÁT TRIỂN LÂU DÀI. VẤN ĐỀ HIỂN THỊ POSTS CẦN THẬT ĐƠN GIẢN HIỆU QUẢ. TÍNH RESPONSIVE WEBSITE LUÔN LÀ YÊU CẦU PHẢI CÓ. ĐỂ CÓ GIAO DIỆN THÂN THIỆN !