Như phần trước đã thảo luận, nếu muốn tạo website "thời thượng" hơn, nhanh hơn, tiện lợi hơn, website nhìn đâu dù là máy tính bàn, cellphone hay tablet cũng đều "lung linh" thì nên "hợp tác" cùng Bootstrap (hay một web design framework nào đó). Vậy hợp tác bằng cách nào?
Có hai cách để sử dụng Bootstrap trên trang web của chúng ta.- Tải xuống Bootstrap.Nếu bạn muốn tự tải xuống và lưu trữ Bootstrap, hãy truy cập getbootstrap.com và làm theo hướng dẫn tại đó. Đại khái là trên web hosting, bạn sẽ cần tạo một thư mục giống như bạn đã tạo thư mục CSS hay IMAGES trong những phần trước, sau đó upload các thư mục, các file của Bootstrap lên, đồng thời trong các file .html chúng ta cần liên kết các file Bootstrap.
- Bao gồm Bootstrap từ CDN.Nếu bạn không muốn tự tải xuống và lưu trữ Bootstrap, bạn có thể đưa nó vào từ CDN (Content Delivery Network). Tương tự như ví dụ chúng ta đã làm trong phần trước.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Thật ra, nếu đọc các tài liệu chính thống, đôi khi rất dễ bị "tẩu hỏa nhập ma", vì vậy chúng ta sẽ tìm hiểu theo cách hơi "ngu ngơ" một chút.
Lịch sử Bootstrap
Bootstrap được phát triển bởi Mark Otto và Jacob Thornton tại Twitter và được phát hành dưới dạng sản phẩm mã nguồn mở vào tháng 8 năm 2011 trên GitHub.
Các phiên bản Bootstrap
Bootstrap 3, được phát hành vào năm 2013 chính là phiên bản chúng ta đã sử dụng trong ví dụ phần trước. Bootstrap 4 phát hành năm 2018 và Bootstrap 5 phát hành năm 2021.
Bootstrap 5 là phiên bản mới nhất của Bootstrap; với các thành phần mới, bảng định kiểu nhanh hơn, khả năng phản hồi tốt hơn, v.v. Phiên bản này hỗ trợ các bản phát hành ổn định mới nhất của tất cả các trình duyệt và nền tảng chính. Tuy nhiên, Internet Explorer 11 trở xuống không được hỗ trợ.
Điểm khác biệt chính giữa Bootstrap 5 và Bootstrap 3 & 4 là Bootstrap 5 đã chuyển sang JavaScript thay vì jQuery. Mọi thứ cụ thể về JavaScript chúng ta sẽ thảo luận trong phần JavaScript, trong phần này chúng ta chỉ nói qua khái niệm mà thôi.
JavaScript là ngôn ngữ kịch bản quan trọng để tăng cường khả năng tương tác và phản hồi của trang web. Nó bổ sung cho HTML và CSS, tăng thêm tính năng động cho các trang web. JavaScript là ngôn ngữ lập trình được sử dụng để phát triển web, trong khi jQuery là thư viện được viết bằng JavaScript, đơn giản hóa các tác vụ, giúp mã JavaScript ngắn gọn và dễ đọc hơn.
Quay lại với hai cách sử dụng, để bạn dễ hình dung, chúng ta sẽ thử với cả hai cách, nhưng trong các phần sau chúng ta chỉ dùng cách thứ hai: Bootstrap từ CDN.
Ngoài ra, trong phần này, chúng ta sẽ thử với Bootstrap 3, nhưng phần sau chúng ta sẽ sử dụng Bootstrap 5. Lý do: vẫn là lý do "cũ rích": chúng tôi muốn bạn thực hành nhiều, làm sai nhiều, sửa sai nhiều.
Cách 1: Tải xuống Bootstrap
Trước hết, chúng ta cần download "đồ cổ" Bootstrap 3.
Sau khi bấm vào Download Bootstrap, chúng ta sẽ nhận được một file Zip, bạn cần giải nén file zip đó.
Giải nén xong, chúng ta thu được 3 thư mục là css, js và fonts.
Truy cập vào 000webhost, tại thư mục gốc public_html, chúng ta sẽ tạo một thư mục mới, bạn có thể đặt bất cứ tên gì, chúng tôi đặt tên là vendor. Bạn hoàn toàn có thể đặt tên thư mục là Bootstrap, chúng tôi cố tình đặt tên khác để bạn không bị "lăn tăn" khi đọc nhiều tài liệu thấy đường dẫn ví dụ: bootstrap/css/bootstrap.min.css, liệu có bắt buộc phải "y hệt như vậy" không. Trong trường hợp của chúng ta nó sẽ là vendor/css/bootstrap.min.css.
Truy cập vào thư mục vendor, tạo 3 thư mục css, fonts và js. Sau đó upload các file tương ứng lên. Ví dụ đây là bên trong của thư mục js sau khi đã upload các file.
Tiếp theo chúng ta cần download jQuery.
Sau khi bấm vào download,chúng ta sẽ chuyển qua một "trang lạ"
Bạn cần bấm chuột phải và chọn Save as .
Lưu lại với tên jquery.min.js.
Tạo thêm một thư mục tên jquery trong vendor, sau đó upload file jquery.min.js lên
Đây là một mã HTML đơn giản
<!DOCTYPE html>
<html>
<head>
<title>
Đất Việt Lập Trình
</title>
</head>
<body>
<h2>Xin Chào!</h2>
</body>
</html>
Để tiếp tục với Bootstrap, chúng ta cần liên kết CSS và JavaScript.
Trong mã HTML trên, chúng ta liên kết tệp CSS của Bootstrap bằng cách thêm đoạn mã sau vào phần <head>:
<link rel="stylesheet" href="vendor/css/bootstrap.min.css"/>
Tiếp theo, liên kết file JavaScript của Bootstrap bằng cách thêm đoạn mã sau trước phần </body>
<script src="vendor/js/bootstrap.min.js"></script>
Ngoài ra, Bootstrap 3 yêu cầu sử dụng jQuery, vì vậy chúng ta cũng cần liên kết thư viện jQuery trước khi liên kết tệp JavaScript của Bootstrap:
<script src="vendor/jquery/jquery.min.js"></script>
Vậy là xong phần "chuẩn bị":
<!DOCTYPE html>
<html>
<head>
<title>
Đất Việt Lập Trình
</title>
<link rel="stylesheet" href="vendor/css/bootstrap.min.css"/>
</head>
<body>
<script src="vendor/js/bootstrap.min.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<h2>Xin Chào!</h2>
</body>
</html>
Với nền tảng này, chúng ta đã có thể "tung hoành" với Bootstrap .
Tiện nhất là ta "lôi" phần thực hành trong phần trước vào để thử.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Đất Việt Lập Trình
</title>
<link rel="stylesheet" href="vendor/css/bootstrap.min.css"/>
</head>
<body>
<script src="vendor/js/bootstrap.min.js"></script>
<script src="vendor/jquery/jquery.min.js"></script>
<h2>Xin Chào!</h2>
<div class="jumbotron text-center">
<h1>
Đất Việt Lập Trình
</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h2>Hội An: Viên Ngọc Cổ Kính Của Miền Trung</h2>
<p>Hội An, một thành phố cổ kính nằm bên dòng sông Thu Bồn, thuộc tỉnh Quảng Nam, là một trong những điểm đến du lịch nổi tiếng và hấp dẫn nhất của Việt Nam. Với bề dày lịch sử hàng trăm năm, Hội An không chỉ là nơi lưu giữ những giá trị văn hóa, kiến trúc cổ xưa mà còn là một bức tranh sống động về đời sống và phong cách sống của người dân địa phương..</p>
</div>
<div class="col-sm-4">
<h2>Lịch Sử và Văn Hóa</h2>
<p>Hội An từng là một thương cảng sầm uất từ thế kỷ 15 đến thế kỷ 19, nơi các thương nhân từ Nhật Bản, Trung Quốc, Ấn Độ và châu Âu giao thương. Sự giao thoa văn hóa này đã tạo nên một Hội An độc đáo với kiến trúc nhà cổ, đền chùa và hội quán mang đậm dấu ấn đa văn hóa. Các công trình như Chùa Cầu Nhật Bản, Hội Quán Phúc Kiến, và những ngôi nhà cổ có niên đại hàng trăm năm là minh chứng sống động cho thời kỳ hoàng kim của Hội An.</p>
</div>
<div class="col-sm-4">
<h2>Ẩm Thực Độc Đáo</h2>
<p>Hội An còn nổi tiếng với nền ẩm thực phong phú và độc đáo. Các món ăn như Cao Lầu, Mì Quảng, Bánh Bao Bánh Vạc, và Cơm Gà Hội An đều mang hương vị đặc trưng, không thể tìm thấy ở bất kỳ nơi nào khác. Đặc biệt, du khách không thể bỏ qua việc thưởng thức cà phê tại các quán cà phê cổ kính ven sông, vừa nhâm nhi vừa ngắm nhìn khung cảnh thanh bình.</p>
</div>
</div>
</div>
</body>
</html>
Lưu lại với tên index.html, sau đó upload lên thư mục gốc public_html và chạy thử
Cách 2: Bao gồm Bootstrap từ CDN
Đây là cách mà chúng ta đã là trong phần trước. Thay vì liên kết với file cùng nằm trên web hosting thì chúng ta liên kết qua "hàng xóm", miễn phí, tiết kiệm băng thông.
<!DOCTYPE html>
<html>
<head>
<title>
Đất Việt Lập Trình
</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.7.1/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>
Đất Việt Lập Trình
</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h2>Hội An: Viên Ngọc Cổ Kính Của Miền Trung</h2>
<p>Hội An, một thành phố cổ kính nằm bên dòng sông Thu Bồn, thuộc
tỉnh Quảng Nam, là một trong những điểm đến du lịch nổi tiếng và hấp
dẫn nhất của Việt Nam. Với bề dày lịch sử hàng trăm năm, Hội An không
chỉ là nơi lưu giữ những giá trị văn hóa, kiến trúc cổ xưa mà còn là một
bức tranh sống động về đời sống và phong cách sống của người dân địa
phương..</p>
</div>
<div class="col-sm-4">
<h2>Lịch Sử và Văn Hóa</h2>
<p>Hội An từng là một thương cảng sầm uất từ thế kỷ 15 đến thế kỷ
19, nơi các thương nhân từ Nhật Bản, Trung Quốc, Ấn Độ và châu Âu giao
thương. Sự giao thoa văn hóa này đã tạo nên một Hội An độc đáo với kiến
trúc nhà cổ, đền chùa và hội quán mang đậm dấu ấn đa văn hóa. Các công
trình như Chùa Cầu Nhật Bản, Hội Quán Phúc Kiến, và những ngôi nhà cổ có
niên đại hàng trăm năm là minh chứng sống động cho thời kỳ hoàng kim
của Hội An.</p>
</div>
<div class="col-sm-4">
<h2>Ẩm Thực Độc Đáo</h2>
<p>Hội An còn nổi tiếng với nền ẩm thực phong phú và độc đáo. Các
món ăn như Cao Lầu, Mì Quảng, Bánh Bao Bánh Vạc, và Cơm Gà Hội An đều
mang hương vị đặc trưng, không thể tìm thấy ở bất kỳ nơi nào khác. Đặc
biệt, du khách không thể bỏ qua việc thưởng thức cà phê tại các quán cà
phê cổ kính ven sông, vừa nhâm nhi vừa ngắm nhìn khung cảnh thanh
bình.</p>
</div>
</div>
</div>
</body>
</html>
Không có nhận xét nào:
Đăng nhận xét