Bootstrap, một CSS Framework phổ biến và rộng rãi sử dụng, là một trong những Framework CSS đầu tiên xuất hiện trên toàn thế giới. Trong bài viết này, chúng ta sẽ tìm hiểu về Bootstrap và cách sử dụng nó.
Bootstrap là gì?
Bootstrap là một CSS Framework có nguồn gốc từ Twitter, được phát triển với mã nguồn mở (open source), và là một trong những framework phổ biến và lâu đời nhất. Nó cung cấp cho bạn khả năng tạo các giao diện người dùng (UI/UX) một cách dễ dàng và nhanh chóng. Đặc biệt, Bootstrap được thiết kế để tương thích với mọi loại thiết bị, bao gồm cả các thiết bị di động và màn hình máy tính.
Ưu điểm khi sử dụng Bootstrap
- Vì là mã nguồn mở nên nó hoàn toàn miễn phí khi sử dụng.
- Tương thích với tất cả trình duyệt ngoại trừ Intenet Explore 9
- Nhẹ và có khả năng tùy biến tốt
- Có hệ thống tài liệu tốt và hỗ trợ cộng đồng đông đảo
- Rất nhiều template, chủ đề và plugin WordPress miễn phí và chuyên nghiệp
- Sử dụng JQuery – 1 plugin phổ biến cho các lập trình viên
Hướng dẫn tạo template với Bootstrap
Đầu tiên chúng ta tạo file index.html chứa nội dung sau:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Option 2: jQuery, Popper.js, and Bootstrap JS
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
-->
</body>
</html>
Kết quả khi xem trên trình duyệt:
