• Home
  • Tạo giao diện trang chủ website tin tức đơn giản với Bootstrap 4

Tạo giao diện trang chủ website tin tức đơn giản với Bootstrap 4


Tháng Năm 30, 2018 Bình luận 1873 Lượt xem

Chuyên mục:

Bootstrap là cái tên đã quá quen thuộc với các lập trình viên website. Bootstrap là một front-end framework khá phổ biến, được nhiều người tin dùng. Nhưng gì mà Bootstrap mang lại còn hơn cả mong đợi của người dùng. Nó cung cấp một hệ thống các style đồ sộ, đơn giản, dễ sử dụng. Công việc của chúng ta chỉ là nhúng nó vào website và sử dụng các class, form được cung cấp sẵn. Bạn có thể dễ dàng tìm thấy các thông tin về form, style, css này trên DOC của Bootstrap.

Vậy hôm nay, tận dụng lời thế đó của Bootstrap mình xin hướng dẫn các bạn sử dụng nó để tạo ra một giao diện trang chủ website tin tức đơn giản. Chúng ta cùng bước ngay và thực hiện thôi.

Đầu tiên, các bạn phải nhúng Bootstrap vào thẻ <head> của trang. Đoạn code cần sử dụng như sau:

Công việc tiếp theo của bạn chỉ là đọc Document của bootstrap và sử dụng cái gì bạn muốn. Trước hết mình sẽ hướng dẫn bạn tạo thanh menu ở đầu website. Bạn vào link sau: getbootstrap.com chọn Components > Navbar bạn sẽ nhìn thấy đoạn code đầu tiên để tạo thanh menu, copy đoạn code đó và thả vào thẻ <body>:

Tiếp đến là phần hiển thị các bài viết mới nhất và sidebar chứa các widget nằm bên phải của trang. Để chia layout phần này, bạn có thể sử dụng Layout > Grid. Dưới đây là 1 ví dụ mình đã chia sẵn:

Tiếp đến là tạo giao diện cho phần hiển thị danh sách bài viết mới nhất. Ở đây mình sử dụng Components > Card. Chèn code phần này nằm ngay dưới dòng “<!– List bài đăng mới –>”. Sau đây là mẫu code cho phần danh sách hiển thị bài viết:

Khu vực sidebar bạn có thể sử dụng lại Components > Card hoặc Navs dạng tab để tạo các widget mà mình thích.

Một phần hết sức quan trọng trong phần danh sách bài viết đó là phân trang hay là Pagination . Pagination nằm trong phần Components của Bootstrap, bạn có thể lên xem và chọn style mình thích. Ở đây mình chọn style đầu tiên mình nhìn thấy. Đặt code này nằm ngay duới danh sách bài viết.

Bootstrap hỗ trợ sẵn responsive nên bạn không cần phải tự tay responsive. Đây là thành quả cuối cùng. Chúc các bạn thành công.

Để lại bình luận

avatar
  Đăng ký theo dõi  
Thông báo về