Trong thiết kế website Bootstrap là thành phần không thể thiếu cho một trang web hoàn chỉnh. Với Bootstrap các lập trình viên sẽ xây dựng website nhanh và tiết kiệm thời gian hơn. Vậy Bootstrap là gì và cách sử dụng như thế nào? Đọc ngày bài viết giới thiệu về Bs4 ngay sau đây.

Tìm hiểu về Bootstrap là gì? 

Bootstrap là một Framework gồm CSS và Javascript được viết sẵn. Khi cần sử dụng chỉ cần gọi class (lớp) ra là mã sẽ thực thi. Bootstrap chỉ dùng để thiết kế Front-end.

Bootstrap là gì

Hiểu một cách đơn giản thông thường khi bạn muốn chia bố cục trang web thành các phần khác nhau thì sẽ phải định dạng bằng code CSS. Nhưng khi dùng Bootstrap bạn sẽ chẳng phải viết nhiều code mà vẫn đầy đủ tính năng.

Bootstrap là mã nguồn mở vì vậy các lập trình viên cũng có thể download về và chỉnh sửa theo ý thích của mình.

Nói đến Boostrap không thể không nói đến tính năng nổi bật Responsive Web Design. Ghé thăm bài viết Responsive là gì? Kích thước website responsive thế nào? để tìm hiểu thêm.

Lịch sử hình thành Bootstrap

Bootstrap được Mark Otto và Jacob Thornton tạo nên tại Twitter. Tên ban đầu là Twitter Blueprint. Vào ngày 19/8/2011 nó được xuất bản như mã nguồn mở trên Gibhub.

Đến ngày 31/1/2012 Bootstrap ra đời phiên bản thứ hai bổ sung bố cục 12 lưới.

Vào ngày 19/8/2013 Boostrap 3 ra đời với giao diện tương thích với các dòng smartphone.

Vào 10/2014 phiên bản Boostrap 4 được ra đời.

Vì sao nên dùng Bootstrap trong thiết kế website?

Bootstrap không quá phức tạp. Bạn chỉ cần am hiểu về CSS một chút kiến thức về JavaScript là có thể làm việc tốt.

Bootstrap là gì và cách sử dụng

Chính vì sự tiện lợi đó đã khiến cho nhiều người sử dụng Bootstrap.

Cách sử dụng Bootstrap

Để dùng trước tiên cần phải nhúng vào HTML bằng CDN hoặc download sau đó up lên Hosting để sử dụng.

Cách thứ nhất: Tải về sau đó tạo một thư mục chứa Boostrap

Chèn đoạn code sau vào trong cặp thẻ <head>…</head>

<link rel=”stylesheet” type=”text/css” href=”bootstrap/css/bootstrap.css”>

Đối với Javascript cũng tương tự

<script type=”text/javascript” src=”bootstrap/js/bootstrap.js”></script>

Cách thứ 2: Nhúng bằng CDN

<!– Latest compiled and minified CSS –>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!– Optional theme –>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<!– Latest compiled and minified JavaScript –>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Cách viết Boostrap

Khi viết để website Responsive thì bạn cần thêm 2 class container hoặc container-fluid.

  • container-fluid: sẽ mở rộng kích thước vùng xem ra toàn màn hình (Full width)
  • container: sẽ mở rộng độ lớn dựa vào kích thước màn hình thiết bị

Ví dụ một chương trình đơn giản

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Ví dụ về Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>Xin chào</h1>
  <div class="row">
    <div class="col-sm-4" style="background-color:#fafafa;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:#a2a2a2;">.col-sm-4</div>
    <div class="col-sm-4" style="background-color:#fafafa;">.col-sm-4</div>
  </div>
</div>

</body>
</html>

Như bạn thấy cấu trúc viết sẽ bắt đầu với class container, sau đó sẽ tới row (hàng), cuối cùng là chia 3 cột col-sm-4

Ký hiệu lớp khi áp dụng viết Bootstrap

Thiết bị Độ rộng lớp container

  • .col-xs-$ Extra small Auto Dùng cho điện thoại kích thước nhỏ hơn 768 pixels
  • .col-sm-$ Small devices 750px Dùng cho tablets kích thước >= 768 pixels
  • .col-md-$ Medium devices 970px Dùng cho desktop ( >=992 pixels)
  • .col-lg-$ Large devices 1170px Dùng cho desktops >=1200 pixels

Tại sao lại phải sử dụng nhưng lớp này?

Khi hiển thị website trên mỗi thiết bị để không bị vỡ khung chúng ta cần kết hợp các lớp với nhau.

Cũng với ví dụ trên bây giờ bạn thay

<div class="container">
  <h1>Xin chào</h1>
  <div class="row">
    <div class="col-xs-12 col-sm-6" style="background-color:#fafafa;">.col-sm-4</div>
    <div class="col-xs-12 col-sm-6" style="background-color:#a2a2a2;">.col-sm-4</div>
  </div>
</div>

Bootstrap được chia thành 12 cột vì vậy với các kích thước màn hình nhỏ sẽ thường xếp các phần tử website chồng từ trên xuống dưới để tránh tình trạng không hiển thị hết các phần còn lại của website.

Kết luận: Bootstrap ngày càng được cập nhật nhiều tính năng mới mẻ. Với mục đích tiết kiệm thời gian cho lập trình viên. Qua bài viết này bạn đã hiểu hơn về Bootstrap là gì và cách sử dụng như thế nào. Chúc bạn thành công!