极客教程Bootstrap 4固定布局
Bootstrap 是一个免费和开源的工具集，用于创建响应式网站和网络应用。这是最流行的HTML、CSS和JavaScript框架，用于开发响应式网站。它解决了跨浏览器的兼容性问题。
下面的类在每个响应的断点处设置一个最大宽度。
语法:
.container
Bootstrap固定布局：这种类型的布局使网站页面设计依赖于一个合适的像素数，容器宽度根据视口宽度的不同而不同，格式是响应式的。创建固定布局最常见的方式是从 ” .container ” 类开始的。你可以用” .row “类制作一个行，以包裹段的均匀聚集。行将被插入到一个”.container”（固定宽度）内，用于合法的排列和填充。
例子：下面的例子解释了一个使用Bootstrap 4的固定布局。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1,
shrink-to-fit=no">
<title>Bootstrap 4 Fixed Layout</title>
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet"
href=
"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</head>
<body>
<nav class="navbar navbar-expand-md
navbar-dark bg-success mb-3">
<div class="container">
<a href="#" class="navbar-brand mr-3">GeeksforGeeks</a>
<button type="button"
class="navbar-toggler"
data-toggle="collapse"
data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active"></a>
<a href="#" class="nav-item nav-link">Courses</a>
<a href="#" class="nav-item nav-link">DSA</a>
<a href="#" class="nav-item nav-link">Articles</a>
<a href="#" class="nav-item nav-link">Jobs</a>
<a href="#" class="nav-item nav-link">Student</a>
<a href="#" class="nav-item nav-link">Tutorials</a>
</div>
</div>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<h1>Get Hired With GeeksforGeeks and
<strong>Win Exciting Rewards!</strong>
</h1>
<p class="lead">
Imagine a situation of visiting a game parlor
or adventure park, having ultimate fun there,
and coming back home without paying a single
penny there and in fact, receiving some exciting
rewards or cash benefits from them.
</p>
<p><a href="#"
target="_blank"
class="btn btn-success btn-lg">
Register here</a>
</p>
</div>
<div class="row">
<div class="col-md-4">
<h2>Basic Concepts For Data Science</h2>
<p>
Data Scientist is one of the most lucrative
career options that offers immense
job satisfaction,insanely high salary,
global recognition, and amazing growth
opportunities
</p>
<p><a href="#"
class="btn btn-success">
Read More »</a>
</p>
</div>
<div class="col-md-4">
<h2>Stock Market APIs For Developers</h2>
<p>
Stock Market is all about the exchange of
stocks (also pronounced as Shares)
between various buyers and sellers.
Since stocks of variable prices are prone
</p>
<p><a href="#"
class="btn btn-success">
Read More »</a>
</p>
</div>
<div class="col-md-4">
<h2>Is Quick Sort Algorithm Adaptive or not</h2>
<p>
Pre-Requisites: Quick Sort Algorithm Adaptiveness
in the Quick Sort Algorithm refers to the decision
that if we are given an array that is already
sorted
</p>
<p><a href="#"
class="btn btn-success">
Read More »</a>
</p>
</div>
</div>
</div>
</body>
</html>
输出:
