Ngày nay, sự hiện diện trực tuyến đã trở nên cần thiết đối với mọi doanh nghiệp bất kể quy mô và loại hình để tồn tại và phát triển trên thị trường.
Với tiến bộ công nghệ, sở thích duyệt trang web của người dùng đã phát triển từ máy tính để bàn sang thiết bị di động. Từ đó xuất hiện nhu cầu thiết kế web hiện đại hoạt động tốt trên mọi màn hình thiết bị, mọi độ phân giải. Nói cách khác cần thiết phải thiết kế web có tính phản hồi cao Responsive Web Design. Tuy nhiên, việc tạo ra các thiết kế đáp ứng hoàn hảo về pixel cho mọi kích thước màn hình là một nhiệm vụ khá khó khăn. Rất may, các web design frameworks đáp ứng đã giải quyết vấn đề bằng cách tạo điều kiện cho việc tạo thiết kế web đáp ứng được giảm thời gian mà vẫn đảm bảo chất lượng cao. Trong số các web design frameworks, chúng ta sẽ thảo luận về Bootstrap.Bootstrap là gì?
- Bootstrap là một front-end framework miễn phí giúp quá trình phát triển web được nhanh và dễ dàng hơn. Bootstrap cung cấp một bộ công cụ và các lớp CSS có sẵn để tạo giao diện người dùng.
- Bootstrap bao gồm các mẫu thiết kế dựa trên HTML và CSS cho kiểu chữ, forms, buttons, tables, navigation, modals, image...Với Bootstrap, chúng ta không cần phải viết CSS từ đầu, mà chỉ cần sử dụng các lớp CSS đã được định nghĩa sẵn, giúp tiết kiệm thời gian và công sức. Chúng ta cũng có thể tùy chỉnh Bootstrap để phù hợp với nhu cầu cụ thể.
- Bootstrap hỗ trợ Responsive Web Design, có khả năng tương thích với đa dạng các thiết bị và kích thước màn hình khác nhau. Với việc sử dụng các lớp CSS và các thành phần sẵn có trong Bootstrap, trang web sẽ tự động thích ứng và hiển thị tốt trên điện thoại di động, máy tính bảng và máy tính để bàn.
- Bootstrap đã trở thành một trong những web design frameworks phổ biến nhất trên thế giới, được sử dụng rộng rãi trong cộng đồng phát triển web.
Chúng ta quay lại một ví dụ trong phần trước, đây là mã HTML, để đơn giản chúng ta bỏ phần menu.
<!DOCTYPE html>
<html>
<head>
<title>
Đất Việt Lập Trình
</title>
<style>
.header {
padding: 20px;
text-align: center;
background: #C0C0C0;
color: white;
font-size: 30px;
}
.column {
float: left;
width: 33.33%;
}
</style>
</head>
<body>
<div class="header">
<h2>
Đất Việt Lập Trình
</h2>
</div>
<div class="column">
<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="column">
<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="column">
<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>
</body>
</html>
Sử dụng OnlineGDB, chúng ta thực thi mã HTML
Còn đây là mã HTML khác, sử dụng Bootstrap 3 (Chúng ta sẽ bàn về con số 3 trong phần sau)
<!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>
Bấm Run để thực thi
Chúng ta sẽ không đề cập tới cái nào "đẹp hơn" vì mục đích phần này không liên quan tới "cái đẹp", đơn giản chúng ta thấy được Bootstrap là gì và "làm được" gì.
Không có nhận xét nào:
Đăng nhận xét