极客教程Bootstrap 4圣杯布局
圣杯布局是网页开发中一个经典的CSS问题。虽然在HTML和CSS中开发了很多创造性的解决方案，但面临的问题是，它涉及到牺牲，即丰富一个功能往往是以牺牲其他功能为代价的。现代框架，如Bootstrap 4，为实现这种布局提供了便利的工具。这种设计布局的一些要求是。
1.一个有页眉、页脚和三个响应式流体列的页面。
2.中间一栏包含主要内容。
3.左右两栏包含广告/导航的内容。
4.它们应该需要最少的标记。
5.当内容不多时，页脚应 “粘 “在页面底部。
方法：我们将使用Bootstrap 4来实现一个简单的布局。我们直接用来实现这个设计的组件是 。
- Responsive Navbar
- 流体网格系统BS4提供了一个与所有设备兼容的响应式布局系统。
- 响应性的margin和padding实用类 margin和padding等属性可以直接使用实用类来应用。
- 响应式页脚（根据要求做了一些调整）所使用的Flex CSS属性可在此阅读。
要了解BS4的情况，你可以在这里阅读文件。
解决方案:
<!-- Here, you are provided button 'Toggle' to hide & show content
to help you understand how sticky footer with flex is working. -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- meta adjustments -->
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- Imported libraries using CDN -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<!-- CSS configuration for the document -->
<style>
.container {
display: flex;
justify-content: center;
align-items: center;
padding: 0px;
}
.main {
flex: 1 0 auto;
}
h1 {
color: white;
}
p {
background-color: #efece9;
border-radius: 4px;
padding-left: 8px;
}
.card {
border-radius: 12px;
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.card-header:first-child {
border-top-left-radius: 12px;
border-top-right-radius: 12px;
border-bottom: 1px solid floralwhite;
}
.card-body {
min-height: 160px;
}
.card-footer {
padding-bottom: 0px;
}
footer {
flex-shrink: none;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar navbar-light justify-content-center">
<span class="navbar-brand mb-0 h1">
GeeksforGeeks
</span>
</nav>
<!-- Body Content -->
<div class="container-fluid main">
<div class="row">
<!-- Navigation/Other Links -->
<div class="col-sm-2">
<div class="container">
<div class="card w-100">
<div class="card-body">
<p>DSA Course</p>
<p>Machine Learning</p>
<p>Front End Course</p>
</div>
</div>
</div>
</div>
<!-- Content Panel -->
<div class="col-sm-8">
<div class="container">
<div class="card w-100">
<div class="card-header">
<button class="btn btn-success
btn-block">
Toggle for Langugaes
</button>
</div>
<!-- This is the content deciding
the nature of the footer -->
<div class="card-body content">
<p> </p>
<p> C </p>
<p> C++ </p>
<p> Java </p>
<p> Python </p>
<p> C# </p>
<p> JavaScript </p>
<p> jQuery </p>
<p> SQL </p>
<p> PHP </p>
</div>
</div>
</div>
</div>
<!-- Advertisement -->
<div class="col-sm-2">
<div class="container">
<div class="card w-100">
<div class="card-body">
<p>Adv - 1</p>
<p>Adv - 2</p>
<p>Adv - 3</p>
<p>Adv - 4</p>
<p>Adv - 5</p>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br>
<!-- Footer ('flex-shrink' property applied here)-->
<footer class=" bg-success">
<div class="container text-center">
<small style="color:white;">
<b>GeeksforGeeks: </b>
A Computer Science Portal for Geeks </small>
</div>
</footer>
<!-- jQuery implementation for showing and hiding Content -->
<script>
(document).ready(function () {
('button').click(function () {
$('.content').toggle('slow');
});
});
</script>
</body>
</html>
输出:
- 当内容被隐藏：
-
当内容被显示出来时。
