Người Viết : ViKiMi Editor

Sử dụng Bootstrap framework đơn giản hiệu quả cho website
Hầu hết các nhà phát triển website hiện nay đều gặp phải vấn đề phát triển website cần phải tương thích trên nhiều nền tảng nhiều thiết bị và các phần mềm cũng như phần cứng khác nhau. Tất cả cần phải được hiển thị và hoạt động ổn định trên nhiều môi trường thiết bị.
Câu hỏi đó đã được trả lời nhờ Bootstrap? Một trong những Framework hữu ích cần thiết nhất hiện nay. Bootstrap hỗ trợ rất nhiều thứ cho phát triển lập trình và không hề thiếu một hỗ trợ nào.
Bootstrap là một Front-end Framework miễn phí để phát triển, xây dựng website nhanh chóng và hữu hiệu. Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter, và được phát hành như một mã nguồn mở vào tháng 8 năm2011 trên GitHub.
Bootstrap có rất nhiều điểm hỗ trợ thiết kế một website, Ở Bootstrap có thể tìm được tất cả các tiện ích như một kho xử lý khổng lồ về thiết kế, Bootstrap hoàn thiện mọi thứ mà bạn có thể tin tưởng là hoàn thiện như khi thiết kế CSS và Javascript.
Bootstrap bao gồm các thiết kế dựa trên ngôn ngữ đánh dấu HTML và ngôn ngữ CSS. Bootstrap cho phép bạn thiết kế kiểu chữ/ font chữ, biểu mẫu, nút/ button, bảng/ Table, các điều hướng/ Navigation, Xử lý chuyển động trình diễn hình ảnh/ images carousels … Bootstrap cũng tốt như một Javascript Plugin.
TÍNH RESPONSIVE CỦA MỘT WEBSITE
Nhiều nhà phát triển luôn luôn phải xây dựng các ứng dụng hay website của họ hiển thị tốt trên nhiều thiết bị, tất cả phải cho cái nhìn tốt nhất dù thiết bị hiển thị là Smartphone hay một Máy tính để bàn…
Tính Responsive yêu cầu cho một website chuyển nghiệp là luôn cần thiết. Và chúng ta tìm thấy nó ở Front-end Framework Bootstrap.
CÁC THUẬN TIỆN, ƯU ĐIỂM TÌM THẤY Ở BOOTSTRAP
+ Dễ dàng sử dụng : Tất cả các lập trình viên có kiến thức về HTML và CSS đều có thể sử dụng Bootstrap một các thành thạo.
+ Tính năng Responsive đầy đủ : Tất cả các tính năng CSS responsive của Bootstrap đều đáp ứng cho tất cả các thiết bị.
+ Cách tiếp cận ưu tiên trên thiết bị Di động : Đây là điều cốt lỗi của Bootstrap.
+ Khả năng tương thích các dữ liệu trình duyệt cao (Chrome, Firefox, Internet Explorer, Edge, Safari và Opera).
LÀM THỂ NÀO BẠN CÓ THỂ CÓ BOOTSTRAP
Bạn có thể sử dụng Bootstrap trên website của mình theo 2 phương sau đây:
Phương pháp 1 :
DOWNLOAD BOOTSTRAP tại getbootstrap.com
Bạn có thể vào website của Bootstrap lag getbootstrap.com để download các file bootstrap cần thiết và sử dụng tại website cảu bạn.
Phương pháp 2 :
SỬ DỤNG BOOTSTRAP CDN (Content Delivery Network)
Nếu bạn không muốn download Bootstrap thì vẫn có thể sử dụng bằng cách thêm vào từ CDN .
MaxCDN cung cấp Bootstrap’s CSS và Javascript. Bạn cũng phải thêm vào Jquery. Và đây là đoạn mã bạn phải thêm vào website tại Header :
<!– File CSS –>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>
<!—Thư viện jQuery –>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js”></script>
<!– File JavaScript –>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script>
Lưu ý : Nếu bạn chỉ sử dụng Bootstrap’s CSS thì bạn không cần thêm vào JQuery.
VÍ DỤ DÙNG BOOTSTRAP XÂY DỰNG WEBSITE
LƯU Ý : Bootstrap’s grid cho phép bạn chia tối đa thành 12 cột trên một Page, và ví dụ ở dưới thì chia thành 3 cột trên một page với độ rộng bằng nhau.
KẾT QUẢ HIỂN THỊ TRÊN MÁY TÍNH ĐỂ BÀN :

KẾT QUẢ HIỂN THỊ TRÊN THIẾT BỊ DI ĐỘNG :

MÃ LẬP TRÌNH VỚI BOOTSTRAP VÀ NGÔN NGỮ ĐÁNH DẤU HTML :
<!DOCTYPE html>
<html lang="en"><head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Include Bootstrap -->
<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.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>SỬ DỤNG BOOTSTRAP</h1>
<p>HIỂN THỊ TƯƠNG THÍCH TRÊN NHIỀU THIẾT BỊ HIỂN THỊ!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>BÀI POST SỐ 1</h3>
<p>Nội dung hiển thị cho bài post số 1...</p>
<p>Bài viết số 1 dùng cho bootstrap được hiển thị cho nhiều thiết bị như điện thoại, máy tính...</p>
</div>
<div class="col-sm-4">
<h3>BÀI POST SỐ 2</h3>
<p> Nội dung hiển thị cho bài post số 2...</p>
<p> Bài viết số 2 dùng cho bootstrap được hiển thị cho nhiều thiết bị như điện thoại, máy tính...</p>
</div>
<div class="col-sm-4">
<h3>BÀI POST SỐ 3</h3>
<p> Nội dung hiển thị cho bài post số 3...</p>
<p> Bài viết số 3 dùng cho bootstrap được hiển thị cho nhiều thiết bị như điện thoại, máy tính...</p>
</div>
</div>
</div>
</body>
</html>