Bootstrap 简明教程

Bootstrap - Position

本章讨论元素位置的配置。

Bootstrap 提供了一组帮助类来设置页面上元素的位置。Bootstrap 提供的一些类如下：

  1. .fixed-top

  2. .fixed-bottom

  3. .sticky-top

  4. .sticky-bottom

让我们看每个类集的示例。

Fixed top

.fixed-top 类将元素的位置设置在视口的顶部，从边缘到边缘。

这对于创建导航栏或页眉很有用，这些导航栏或页眉即使用户向下滚动也会一直显示在屏幕顶部。

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Position - Fixed top</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body style="height:1500px">
    <nav class="navbar navbar-expand-lg text-bg-success navbar-dark fixed-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Use of .fixed-top class</a>
      </div>
    </nav>
    <div class="container-fluid" style="margin-top:80px">
      <h4>Position fixed at top</h4>
      <p>The class .fixed-top of Bootstrap sets the position of the element at top of the screen.</p>
      <h1>Scroll down the page to see the position</h1>
    </div>
</body>
</html>

Fixed bottom

.fixed-bottom 类将元素的位置设置在视口的底部，从边缘到边缘。

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Position - Fixed bottom</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body style="height:1500px">
    <nav class="navbar navbar-expand-lg text-bg-primary navbar-dark fixed-bottom">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Use of .fixed-bottom class</a>
      </div>
    </nav>
    <div class="container-fluid" style="margin-top:80px">
      <h4>Position fixed at bottom</h4>
      <p>The class .fixed-bottom of Bootstrap sets the position of the element at the bottom of the page.</p>
      <h1>Scroll down the page to see the position</h1>
    </div>
  </body>
</html>

Sticky top

类 .sticky-top 用于创建粘性元素（从边缘到边缘），该元素会在屏幕顶部保持不动，但仅在你滚动经过它时。

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Position - Sticky top</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body style="height:1500px">
    <div class="container-fluid mt-3">
      <h3>Sticky Navbar</h3>
      <p>The class <b>.sticky-top</b> is used to create a sticky element that remains at the top of the screen, from edge to edge, but only after you scroll past it.</p>
      <p>Scroll down the page to see the effect.</p>
    </div>
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Sticky top</a>
      </div>
    </nav>
    <div class="container-fluid">
      <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
    </div>
  </body>
</html>

Responsive sticky top

响应式粘性顶部类用于网页设计中，以创建在用户向下滚动页面时仍粘在屏幕顶部的导航菜单或页眉。这可确保即使用户向下滚动页面，导航菜单也始终可见且易于访问。

Bootstrap 提供的部分响应式粘性顶部类如下：

  1. .sticky-sm-top 将元素位置固定在中小型视口顶部

  2. .sticky-md-top 将元素位置固定在中型视口顶部

  3. .sticky-lg-top 将元素位置固定在大尺寸视口顶部

  4. .sticky-xl-top 将元素位置固定在超大视口顶部

  5. .sticky-xxl-top 将元素位置固定在超超大视口顶部

我们看一个示例：

Note ：调整浏览器大小以查看更改。

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Position - Responsive Sticky top</title>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body style="height:1500px">
    <div class="container-fluid mt-3">
      <h3>Sticky Navbar</h3>
      <p>The class <b>.sticky-lg-top</b> is a responsive class, used to create a sticky element that remains at the top of the screen, from edge to edge, but only after you scroll past it.</p>
      <p>Scroll down the page to see the effect.</p>
    </div>
    <nav class="navbar navbar-expand-lg bg-dark navbar-dark sticky-lg-top">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Responsive Sticky top</a>
      </div>
    </nav>
    <div class="container-fluid">
      <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
      <p>Example for .sticky-lg-top class of Bootstrap to set the position of an element, like a navbar, stick to the top of the screen.</p>
    </div>
  </body>
</html>

Sticky bottom

类 .sticky-bottom 用于创建粘性元素（从边缘到边缘），该元素会在屏幕底部保持不动，但仅在你滚动经过它时。

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Position - sticky bottom</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body style=height:1000px class="d-flex flex-column">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="#">Sticky Bottom Example</a>
        </div>
    </nav>
    <!-- Content -->
    <div class="container-fluid flex-grow-1">
        <h4>sticky bottom</h4>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
    </div>
    <!-- Sticky Footer -->
    <footer class="footer text-bg-info py-3 sticky-bottom">
        <div class="container">
            <span class="display-6 text-dark">Sticky bottom</span>
        </div>
    </footer>
  </body>
</html>

Responsive sticky bottom

Bootstrap 提供的部分响应式粘性底部类如下：

  1. .sticky-sm-bottom 将元素位置固定在中小型视口底部

  2. .sticky-md-bottom 将元素位置固定在中型视口底部

  3. .sticky-lg-bottom 将元素位置固定在大尺寸视口底部

  4. .sticky-xl-bottom 将元素位置固定在超大视口底部

  5. .sticky-xxl-bottom 将元素位置固定在超超大视口底部

让我们看看响应式粘性底部类的示例：

Note ：调整浏览器大小以查看更改。

Example

可以使用 编辑和运行 选项编辑并尝试运行此代码。

<!DOCTYPE html>
<html>
  <head>
    <title>Position - Responsive sticky bottom</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
  </head>
  <body style=height:1000px class="d-flex flex-column">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
          <a class="navbar-brand" href="#">Responsive Sticky Bottom Example</a>
        </div>
    </nav>
    <!-- Content -->
    <div class="container-fluid flex-grow-1">
        <h4>Responsive sticky bottom</h4>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
        <p>Here is an example for responsive sticky bottom. Its a helper class in bootstrap 5.</p>
    </div>
    <!-- Sticky Footer -->
    <footer class="footer text-bg-warning py-3 sticky-lg-bottom">
        <div class="container">
          <span class="display-6 text-dark">Sticky bottom</span>
        </div>
    </footer>
  </body>
</html>