Trong hơn 4 năm, chúng tôi đã giúp các công ty đạt được các mục tiêu tài chính và thương hiệu của họ. GTVSEO là một công ty chuyên về SEO theo định hướng giá trị.
LIÊN HỆ
Blog

Bootstrap là gì? Những kiến thức cơ bản về Bootstrap cho người mới

Bootstrap là một phần cần thiết cho người làm front-end giúp bạn tiết kiệm thời gian, sự nhàm chán khi cứ lập đi lập lại những đoạn code hay cú pháp giống nhau.

Bootstrap là gì?

Bootstrap là một framework bao gồm các HTML, CSS và JavaScript template dùng để phát triển website chuẩn responsive.

Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS như typography, forms, buttons, tables, navigation, modals, image carousels… cũng như các plugin JavaScript tùy chọn.

Ưu điểm của Bootstrap (đặc biệt là bản 5.0)

Bootstrap hoạt động dựa trên HTML, CSS và Javascript.

CSS

  • Các lớp lưới .col- * riêng lẻ hiện có thể ghi đè .row-cols.
  • Cải thiện hỗ trợ cho các biểu thức phức tạp trong các hàm add () và subtract ().
  • Đã cập nhật màu đường viền cho tiêu đề cửa sổ bật lên để khớp với đường viền bên ngoài.

JS

  • Các cửa sổ bật lên hiện xóa tiêu đề hoặc nội dung khi chúng trống thay vì trả lại các phần tử HTML trống.
  • Các mục thả xuống hiện được tự động chọn khi sử dụng các phím mũi tên.
  • Chỉ có 1 DOMContentLoaded trong functions onDOMContentLoaded.

Bản vá mới 5.0 Bootstrap được phát hành để cải thiện các plugin JavaScript.

Các mẫu mặc định

Độ tương thích cao

Khả năng tương thích với hầu hết mọi trình duyệt và nền tảng số hiện có. Bootstrap có khả năng hỗ trợ tốt Responsive, tối ưu các giao diện trên smartphone.

Grid System của Bootstrap

Nhược điểm của Bootstrap

Nặng

Hướng dẫn sử dụng Bootstrap

Bạn đã hiểu vệ Bootstrap rồi, vậy việc cài đặt nó có dễ không? Có 2 cách cài đặt, một là bạn tải trực tiếp từ nhà cung cấp hai là thông qua CDN Bootstrap.

Sử dụng bằng tải về trực tiếp

Đầu tiên bạn vào trang chủ của Bootstrap (getbootstrap.com) hoặc tải tại đây.

Và import vào mẫu file .html của bạn sẽ như sau:

<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<title>Bootstrap 101 Template</title>
<!-- file .css bootstrap down về ở đây -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Sửu dụng bằng Bootstrap CDN

Bootstrap CDN là gì? Là file có bootstrap có sẵn trên mạng. Nhúng Bootstrap thông qua CDN (Content Delivery Network – mạng phân phối nội dung). Đây là cách mà đa số lập trình viên sử dụng để nhúng Bootstrap vì tiết kiệm băng thông cũng như tích hợp JavaScript, CSS, thư viện jQuerry.

Đổi 4.3.1 thành version bạn muốn nhé, ở thời điểm bài viết, version mới nhất là 5.0

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Bootstrap Grid System là gì?

Bootstrap Grid System là mấu chốt cho khả năng tương thích giao diện (web responsive) của Bootstrap. Khi khởi động Bootstrap, giao diện của nó sẽ hiển thị dưới dạng lưới (grid). Bootstrap được chia thành 12 cột đặt trong một class row. Trong đó, mỗi cột sẽ bao gồm các Padding tương ứng với từng độ phân giải của mỗi thiết bị (điện thoại, tablet, máy tính).

Ví dụ grid 6
<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

Bootstrap là một khung giao diện người dùng mạnh mẽ. Nó giúp cho việc phát triển “thiết bị di động ưu tiên” dễ dàng hơn và tiết kiệm thời gian quý báu cho các nhà phát triển. Nó giải quyết vấn đề phải viết một lượng lớn mã lặp đi lặp lại. Ngoài ra, là một khuôn khổ mã nguồn mở, bạn có thể sử dụng và sửa đổi nó mà không phải tốn một xu nào. Nó thực sự là một người thay đổi cuộc chơi trong ngành phát triển web.

Author

Mai Nguyên Vũ

Tôi là Mai Nguyên Vũ, hiện là IT Team Leader tại GTV SEO, chịu trách nhiệm cho việc đảm bảo tiến độ thực thi các dự án website wordpress tại GTV. Với kiến thức và kinh nghiệm Wordpress và SEO, tôi hy vọng kiến thức tôi chia sẻ mang lại giá trị hữu ích thu hút khách hàng của doanh nghiệp bạn.

Với sứ mệnh “Nâng tầm thương hiệu doanh nghiệp bằng chiến lược truyền thông đột phá” chúng tôi mong muốn giúp bạn đạt được mục tiêu kinh doanh to lớn của mình.

Address

91, Đường số 6, Cityland Park Hills, Phường 10, Quận Gò Vấp, TPHCM

Phone

Email

Nhận bài viết mỗi ngày    OK Lần khác