Kỹ thuật Bootstrap
Bootstrap là một khung công tác phổ biến với nhiều thành phần sẵn sàng sử dụng để bạn lựa chọn. Bootstrap có thể tối ưu hóa mã để triển khai thao tác cuộn thị sai.
Trong chương này, chúng ta hãy thảo luận với một ví dụ về cách chúng ta sẽ sử dụng thành phần Jumbotron để thực hiện thao tác cuộn thị sai.
Trang thị sai có chiều rộng đầy đủ với Bootstrap4 Jumbotron
Hãy tưởng tượng một trang web nơi người dùng được hiển thị với một hộp “kêu gọi hành động” lớn với một số nội dung liên quan đến giảm giá hoặc bán hàng. Thông thường, Jumbotron tìm thấy ứng dụng của nó ở những nơi như vậy. Nó là một hộp lớn hữu ích để thu hút sự chú ý của người dùng.
Vì chúng tôi chỉ sử dụng một thành phần của Bootstrap, chúng tôi sẽ không tạo một tệp CSS riêng cho ví dụ này. Hãy để chúng tôi đi sâu vào mã HTML.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin = "anonymous">
<style>
.jumbotron{
margin:15px 30px 0px 30px;
border-radius:10px;
background:
linear-gradient(
rgba(0, 0, 250, 0.25),
rgba(125, 250, 250, 0.45)),
url(img/ruin.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
color:white !important;
height:440px;
}
.page-scroll {
height:5000px;
}
.lead {
font-family:raleway;
font-weight:100;
margin-top:-10px;
}
</style>
</head>
<body>
<div class = "jumbotron jumbotron-fluid">
<div class = "container">
<h1 class = "display-2">Jumbotron Example</h1>
<p class = "lead">Example text for parallax using jumbotron</p>
</div>
</div>
<div class = "page-scroll"> </div>
</body>
</html>Phân tích mã
Các line 6tham khảo thư viện Bootstrap 4. Chúng tôi đang chỉ định lề và bán kính đường viền cho jumbotron từline 8 to 11.
Như chúng ta có thể thấy trên line 33, chúng tôi đang tạo một div với lớp jumbotron để hiển thị hộp lớn nơi chúng tôi sẽ tải hình ảnh cụ thể của mình. Xin lưu ý rằng không có URL trực tiếp cho hình ảnh lần này, chúng tôi sẽ sử dụng hình ảnh đã tải xuống. Bạn có thể tải xuống bất kỳ hình ảnh có độ phân giải cao nào cho ví dụ của mình và chỉ định nó trongline 16.
Đầu ra mà bạn có thể thấy khi thực thi đoạn mã đã cho ở trên được hiển thị bên dưới:
