Bài 31: Xây dựng layout blog cơ bản với bootstrap 4

0
813

Xin chào cả nhà, sau khi kết thúc các bài phần Lý thuyết trong Bootstrap 4, thì ở bài này, mình sẽ hướng dẫn các bạn xây dựng layout blog cơ bản. Với những kiến thức đã được học qua 31 bài viết trước thì mình tin rằng việc xây dựng layout blog này sẽ hoàn toàn không làm khó được các bạn.

Chuẩn bị kiến thức

Để có thể làm được layout blog, các bạn cần nắm vững các phần kiến thức sau, nếu quên thì có thể click vào xem lại lý thuyết nhé:

Đây sẽ là những kiến thức được áp dụng vào bài thực hành này, vì thế nếu ban nào cảm thấy chưa đủ tự tin để xem bài này thì vui lòng xem kỹ lại các bài mà mình vừa liệt kê ở phía trên. Vì để xây dựng layout blog thì mình sẽ áp dụng một số kiến thức trong các bài trên.

Chuẩn bị cấu trúc HTML cho layout blog

Đầu tiên, các bạn cần download thư viện Bootstrap tại trang chủ, download phiên bản 4 nhé.

Giải nén và lưu vào 1 thư mục, ở đây mình đặt tên thư mục là blog.

Trong thư mục blog, tạo thêm thư mục images để chứa các hình ảnh cho blog.

Tạo file code index.html dùng để code cấu trúc HTML cho layout blog

Chuẩn bị file style.css lưu trong thư mục css của thư viện dùng để trang trí cho layout.

Lúc này, cấu trúc sơ đồ thư mục của chúng ta như sau:

Bây giờ, mở file index.html lên và các bạn paste đoạn code dưới đây vào:

Đoạn code trên tạo ra cấu trúc chuẩn của HTML và gọi các thư viện của Bootstrap vào bao gồm thư viện css và thư viện js.

  • Trên vùng thẻ <head> triệu gọi 2 thư viện CSS của Bootstrap và file style.css
  • Dưới nội dung <body> gọi thêm thư viện JS của Bootstrap và file thư viện js là jQuery

Ok, cấu trúc thì quá quen thuộc rồi nên mình không giải thích nửa, tiếp theo chúng ta sẽ xây dựng phần Navigation trước tiên.

Xây dựng Navigation Menu trong layout blog

Khi bắt đầu cho 1 website chúng ta sẽ bắt đầu với phần header và navigation (thanh menu ngang).

Mở file index.html lên và các bạn thêm nội dung sau vào trong thẻ <body>:

Và giao diện hiển thị như sau:

Đến bài này thì mình sẽ không đi vào giải thích lại cách làm cụ thể Navigation và Menu reponsive thế nào nữa, vì chúng ta đã có bài viết riêng về chúng. Các bạn quên thì chỉ cần vào những link mình đính ở trên và xem lại các class sử dụng là OK nhé.

Xây dựng phần Jumbotron cho Header trong Layout Blog

Bây giờ dưới phần Menu, tức là sau cặp thẻ <nav>, mình sẽ chọn Jumbotron để xây dựng Header. Các bạn thêm đoạn mã sau vào sau vùng Menu nhé:

Hiện tại giao diện hiển thị như sau:

Xây dựng nội dung content cho layout Blog

Tới phần quan trọng nhất đó là xây dựng nội dung cho Blog, phần này mình sẽ hiển thị các bài viết. Mỗi bài viết bao gồm hình ảnh đại diện, tiêu đề bài viết và nút button để click đọc chi tiết bài viết.

Với page content thì chúng ta sẽ chia chúng ra thành 2 khối đều . Phần hình đại diên chia cho nó 6 cột, phần hiển thị tiêu đề bài và mô tả ngắn của bài thì mình cho nó 6 cột luôn để nó khớp với 12 cột mà grid system hỗ trợ.

Bọc cả 2 thành phần hình ảnh và thông tin của bài viết trong class row, để nó hỗ trợ căn đều với phần jumbotron. col-md-x  là độ phân giải hay dùng nhất trong quá trình làm việc với bootstrap 4.

Và đây là đoạn CODE cho phần content (đặt sau phần Jumbotron nhé):

Hiển thị lên như sau:

Để thêm các bài viết khác thì chỉ việc copy và paste khối div row đó ra là được, có thể dùng thẻ <hr> để ngăn cách giữa các bài viết bằng dấu gạch ngang.

Xây dựng Pagination phân trang

Khi nội dung trên web quá nhiều thì chúng ta cần có giải pháp phân trang, và trong layout này mình sẽ hướng dẫn các bạn tạo ra 1 danh sách phân trang.

Đoạn code xây dựng phân trang như sau:

Xây dựng phần Footer cho Layout Blog

Cuối cùng là phần Footer, mình sẽ thiết lập cho nó full 12 cột.

Các bạn thêm đoạn code dưới đây vào sau phần Phân trang Pagination ở trên nhé:

Mình có ngăn cách phần content và footer bằng thẻ <hr>.

Và tới đây là chúng ta đã hoàn thành giao diện cơ bản rồi đấy.

Sau đây là toàn bộ code và hiển thị:

Kết luận

Như vậy là mình vừa hướng dẫn cho các bạn cách xây dựng layout Blog cơ bản trong Bootstrap 4. Layout này có cấu trúc 1 cột và khá đơn giản, nhưng giúp các bạn ôn tập lại các kiến thức trong Bootstrap 4 rất hữu hiệu. Các bạn nhớ theo dõi và hoàn thành trang Blog cơ bản này nhé.

Chúc các bạn học tập tốt!

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây