Tạo giao diện trang chủ website tin tức đơn giản với Bootstrap 4
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:
|
1 2 3 4 |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> |
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>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> |
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:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="container"> <div class="row"> <div class="col-md-9"> <!-- List bài đăng mới --> </div> <div class="col-md-3"> <!-- Sidebar - khu vực chứa widget --> </div> </div> </div> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="card" style="width: 18rem;"> <img class="card-img-top" src="..." alt="Ảnh thumbnail bài viết"> <div class="card-header"> <h2>Tiêu đề bài viết</h2> </div> <div class="card-body"> <p class="card-text">Đoạn ngắn giới thiệu nội dung bài viết</p> </div> <div class="card-footer"> <a class="btn btn-primary" href="#">Xem thêm</a> </div> </div> |
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.
|
1 2 3 4 5 6 7 8 9 |
<nav aria-label="Page navigation example"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">Previous</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">Next</a></li> </ul> </nav> |
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