标头

标头-Bootstrap 5和Material Design 2.0导航

标头是扩展标准导航栏功能的组合物。它们包含其他 诸如巨型飞机,导航栏或图像封面之类的组件,可作为额外的容器 导航元素-通常是链接,表单或号召性用语。


巨无霸

巨型机是一种轻巧,灵活的组件,可以有选择地扩展整个 视口,以在您的网站上展示关键的营销信息。

Heading

Subheading

Call to action

          <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实用程序将内容居中 垂直和水平。

Heading

Subheading

Call to action

          <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>
        

固定导航栏

您可以使用以下方法将导航栏粘贴到窗口顶部 .fixed-top 类。多亏了这一点,每当您滚动页面时,导航栏就会 总是可见的。

固定导航栏使用 position:fixed ,这意味着它们是从正常导航流中拉出的 DOM,并且可能需要自定义CSS(例如, padding-top <body>) 防止与其他元素重叠。在以下示例中,我们 将 margin-top:58px; (导航栏的高度)添加到巨型机和背景 为此目的的图像。

Heading

Subheading

Call to action

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down


          <header>
            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
              <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" style="margin-top: 58px">
              <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>
        

Heading

Subheading

Call to action

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down

Scroll down


          <header>
            <!-- Navbar -->
            <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">
              <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;
                margin-top: 58px;
              "
            >
              <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>
        

动画导航栏 MDB Pro组件

您可以使用我们的动画导航栏来获得非常令人印象深刻的效果,该导航栏在 开始,并在滚动后更改颜色。

单击下面的按钮以查看全屏演示。

Full screen demo

如果要自定义动画导航栏中的颜色,则需要覆盖以下内容 样式。

注意:这些是默认设置。如果您不想更改任何内容 那么您无需添加或修改以下代码。