Ra mắt hai series mới cực hot Trí tuệ nhân tạo A đến Z và Python công cụ không thể thiếu khi nghiên cứu Data science, Machine learning.
Todo List: Tút lại giao diện ứng dụng với Bootstrap
NỘI DUNG BÀI VIẾT
Tốt gỗ hơn tốt nước sơn.
Tục ngữ Việt Nam
Chúng ta có một website với nội dung phong phú, giàu giá trị sẽ vẫn hơn một website cực đẹp nhưng chẳng có nội dung gì. Nếu kết hợp được cả hai thì sao, toẹt vời chứ còn gì?
Tại sao dùng Bootstrap
Bootstrap là một framework CSS mã nguồn mở, giúp chúng ta tạo ra các website đẹp, tương thích với nhiều thiết bị, tốc độ nhanh và hiện được sử dụng nhiều nhất với 24.9% tức là có trên 1/4 số website trên toàn cầu (số liệu đầu năm 2019), một con số ấn tượng.
Nếu bạn đã từng sử dụng Bootstrap có thể thấy việc tạo ra giao diện hiện đại rất đơn giản, các thành phần trong web được mô đun hóa và bạn chỉ việc sử dụng lại, lắp ghép chúng thành một website. Các thành phần này được áp dụng vào hết sức đơn giản bằng cách thêm vào các class cho các thẻ HTML.
Tích hợp Bootstrap
Để tích hợp Bootstrap vào dự án, chúng ta đưa đường dẫn đến framework này vào phần đầu mỗi trang thông qua thẻ <link>. Mở trang Bootstrap, trong phần BootstrapCDN ở dưới chúng ta sẽ thấy đường dẫn CSS của framework này, chỉ việc copy và paste vào phần header của trang HTML.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">Đây là cách đơn giản nhất nhưng không phải là cách được khuyến cáo sử dụng khi tích hợp Bootstrap với Laravel. Bản thân Laravel đã tích hợp Bootstrap vào nhưng chúng ta chưa cấu hình Laravel Mix, một gói phần mềm giúp quản lý, tối ưu các tài nguyên Javascript, CSS trong Laravel. Chúng ta sẽ tìm hiểu chủ đề này sau, hiện giờ cứ tạm dùng cách cổ điển ở trên.
Thay đổi giao diện trang todos
Chúng ta tích hợp Bootstrap vào trang danh sách todos (View 'todos.index' hay file resources/views/todos/index.blade.php) theo nội dung sau:
<!DOCTYPE html>
<html>
<head>
<title>Todos</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="text-center my-5">TODOS PAGE</h1>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">
Todos
</div>
<div class="card-body">
<ul class="list-group">
@foreach($todos as $todo)
<li class="list-group-item">
{{ $todo->name }}
<a href="/todos/{{ $todo->id }}" class="btn btn-primary btn-sm float-right mr-2">View</a>
</li>
@endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>Kiểm tra giao diện trang danh sách todos http://localhost:8000/todos
Giao diện sau khi sử dụng Bootstrap đã đẹp hơn rất nhiều, đặc biệt nó co giãn theo kích thước của trình duyệt, nếu bạn duyệt ứng dụng trên điện thoại sẽ thấy các thành phần giao diện thay đổi theo.
Code: Bài 8 - Tút lại giao diện với Bootstrap
CÁC BÀI VIẾT KHÁC
FirebirD
Đam mê Toán học, Lập trình. Sở thích chia sẻ kiến thức, Phim hài, Bóng đá, Cà phê sáng với bạn bè.
0 Bình luận trong "Todo List: Tút lại giao diện ứng dụng với Bootstrap"