Với sự phát triển mạnh mẽ của nhiều công nghệ thiết kế website hiện nay lập trình viên đã được hỗ trợ rất nhiều. Họ có thể xây dựng nên một trang web nhanh chóng và tiết kiệm thời gian đáng kể. Một trong số công nghệ được nhắc tới nhiều nhất đó là Bootstrap. Vậy Bootstrap là gì và cách sử dụng như thế nào hãy đọc bài viết giới thiệu dưới đây tại DNMedia.
Tìm hiểu về Bootstrap là gì?
Bootstrap là một Framework phía Fronend bao gồm HTML, ngôn ngữ CSS và JavaScript. Được phát triển để hỗ trợ thiết kế website chuẩn Responsive. Khi dùng Bootstrap công việc làm web sẽ trở nên nhanh chóng, tiết kiệm thời gian hơn. Một số thành phần được xây dựng sẵn như button, form, menu, slideshow… đến khi dựng web chỉ việc viết một đoạn mã ngắn gọn, lắp ghép lại.
Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter. Đây là Framework mã nguồn mở bất ai cũng có thể chỉnh sửa theo ý thích.
Tại sao nên sử dụng Bootstrap?
Một ngôn ngữ lập trình hay Framework nhận được đông đảo lập trình viên đón cần phải có nhiều yếu tố tạo thành. Dưới đây là những lý do nên sử dụng Bootstrap.
1. Sử dụng dễ dàng
Lý do thứ nhất đó chính là dễ sử dụng. Nếu bạn có kiến thức nền tảng về HTML, CSS, Javácript thì không quá khó khăn khi sử dụng Bootstrap.
2. Hỗ trợ Responsive
Tất nhiên bạn vẫn có thể viết CSS Responsive nhưng khi dùng Bootstrap sẽ tiết kiệm thời gian code đi rất nhiều.
3. Hỗ trợ trên nhiều trình duyệt
Một lý do tiếp theo khiến cho Bootstrap trở nên phổ biến đó chính là được sự hỗ trợ của nhiều trình duyệt như Chrome, Opera, Firefox…
3. Tiếp cận Mobile-first
Hiện nay thuật toán của Google thay đổi bắt buộc các webssite phải được thiết kế hiển thị tốt trên Mobile. Nếu không sẽ bị tụt hạng. Chính vì vậy dùng Bootstrap sẽ giúp giải quyết vấn đề này.
Hướng dẫn cách sử dụng Bootstrap 4
– Cách 1: Tải trực tiếp từ
Trước tiên bạn truy cập vào trang chủ https://getbootstrap.com/ sau đó download về máy tính. Hiện tại có 2 phiên bản là Bootstrap 3 và 4.
Tiếp theo nhúng bootstrap vào HTML bằng cách đặt trong cặp thẻ <head>….</head> đoạn mã
<link rel=”stylesheet” type=”text/css” href=”bootstrap/css/bootstrap.css”>
– Cách 2: Sử dụng CDN
Nhúng 4 file bên dưới vào cặp thẻ <head>….</head>
<head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head>
Để sử dụng Bootstrap trước tiên cần viết đoạn
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
Vào trong cặp thẻ <head>…</head>
Tiếp theo dùng class container hoặc container-fluid
<body> <div class="container-fluid"> <h1>My First Bootstrap Page</h1> <p>This is some text.</p> </div> </body>
Container-fluid là gì?
Cung cấp các container mở chiều rộng full màn hình thiết bị xem.
Còn container hiển thị website bị giới hạn về chiều rộng.
Bootstrap 4 Grid System là gì?
Trong Bootstrap 4 sẽ được hỗ trợ hiển thị Responsive dạng Grid (Lưới). Bootstrap sẽ chia màn hình thành 12 cột. Khi hiển thị trên màn hình thiết bị website sẽ tự động co giãn và chia cột phù hợp không bị vỡ khung.
.col-* (extra small devices – chiều rộng màn hình < 576px)
.col-sm-* (small devices – chiều rộng màn hình >= 576px)
.col-md-* (medium devices – chiều rộng màn hình >= 768px)
.col-lg-* (large devices – chiều rộng màn hình >= 992px)
.col-xl-* (xlarge devices – chiều rộng màn hình >= 1200px)
Cách chia cột trong Bootstrap bằng Gridview:
<div class="container"> <div class="row"> <div class="col-sm-6">Đây là nội dung 1</div> <div class="col-sm-6">Đây là nội dung 2</div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> </div>
Với ví dụ ở trên thì bạn sẽ thấy rằng mỗi row là một hàng, mỗi col là một cột. Bắt buộc col phải nằm trong row. Khi chia cột bạn cần lưu ý phải ưu tiên mobile đầu tiên.
Ví dụ: <div class=”col-sm-6 col-md-6 col-lg-6″></div>
Kết luận: Qua bài viết này chúng ta vừa tìm hiểu về Bootstrap là gì và cách sử dụng. Hi vọng với bài viết này sẽ giúp bạn có cái nhìn tổng quan về Frontend Framework này.
