标头
标头-Bootstrap 5和Material Design 2.0导航
标头是扩展标准导航栏功能的组合物。它们包含其他 诸如巨型飞机，导航栏或图像封面之类的组件，可作为额外的容器 导航元素-通常是链接，表单或号召性用语。
巨无霸
巨型机是一种轻巧，灵活的组件，可以有选择地扩展整个 视口，以在您的网站上展示关键的营销信息。
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarExample01"
aria-controls="navbarExample01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarExample01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Jumbotron -->
<div class="p-5 text-center bg-light">
<h1 class="mb-3">Heading</h1>
<h4 class="mb-3">Subheading</h4>
<a class="btn btn-primary" href="" role="button">Call to action</a>
</div>
<!-- Jumbotron -->
</header>
背景图片
标有背景图片的标题可能会帮助您更好地理解号召性用语 眼睛看到背景中的一些美丽图像。
为了提供适当的对比度，强烈建议使用 遮罩。您可以更改颜色和 通过操纵RGBA代码实现蒙版的不透明度。
您还必须设置背景图片的高度，否则，
组件将崩溃。在下面的示例中，我们将高度设置为 400px 。
我们使用 flexbox实用程序将内容居中 垂直和水平。
<header>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarExample01"
aria-controls="navbarExample01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarExample01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background image -->
<div
class="p-5 text-center bg-image"
style="
background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp');
height: 400px;
"
>
<div class="mask" style="background-color: rgba(0, 0, 0, 0.6)">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="text-white">
<h1 class="mb-3">Heading</h1>
<h4 class="mb-3">Subheading</h4>
<a class="btn btn-outline-light btn-lg" href="#!" role="button"
>Call to action</a
>
</div>
</div>
</div>
</div>
<!-- Background image -->
</header>
如果您需要为大型和小型设备设置不同的背景图片高度， 最好通过常规CSS而不是嵌入式CSS进行设置。
在下面的示例中，我们给它一个 id =“ intro-example” 并将其高度设置为
小型设备为 400px ，大型设备为 600px 。
Learn Bootstrap 5 with MDB
Best & free guide of responsive web design
Start tutorial Download MDB UI KIT
<header>
<!-- Intro settings -->
<style>
/* Default height for small devices */
#intro-example {
height: 400px;
}
/* Height for devices larger than 992px */
@media (min-width: 992px) {
#intro-example {
height: 600px;
}
}
</style>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-white">
<div class="container-fluid">
<button
class="navbar-toggler"
type="button"
data-mdb-toggle="collapse"
data-mdb-target="#navbarExample01"
aria-controls="navbarExample01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarExample01">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item active">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Navbar -->
<!-- Background image -->
<div
id="intro-example"
class="p-5 text-center bg-image"
style="background-image: url('https://mdbcdn.b-cdn.net/img/new/slides/041.webp')"
>
<div class="mask" style="background-color: rgba(0, 0, 0, 0.7)">
<div class="d-flex justify-content-center align-items-center h-100">
<div class="text-white">
<h1 class="mb-3">Learn Bootstrap 5 with MDB</h1>
<h5 class="mb-4">Best & free guide of responsive web design</h5>
<a
class="btn btn-outline-light btn-lg m-2"
href="https://www.youtube.com/watch?v=c9B4TPnak1A"
role="button"
rel="nofollow"
target="_blank"
>Start tutorial</a
>
<a
class="btn btn-outline-light btn-lg m-2"
href="https://mdbootstrap.com/docs/standard/"
target="_blank"
role="button"
>Download MDB UI KIT</a
>
</div>
</div>
</div>
</div>
<!-- Background image -->
</header>