Bootstrap - 位置

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

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

  • .固定顶

  • .固定底

  • .粘顶

  • .粘底

让我们看看每组类的示例。

固定顶

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

这对于创建即使用户向下滚动也仍然在屏幕顶部可见的导航栏或标题非常有用。

例子

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

<!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类设置视口底部元素从边缘到边缘的位置。

例子

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

<!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类用于创建一个粘性元素，该元素从一个边缘到另一个边缘保留在屏幕顶部，但仅在您滚动经过它之后才保留。

例子

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

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

响应式置顶

响应式粘性顶部类在网页设计中用于创建导航菜单或标题，当用户向下滚动页面时，该导航菜单或标题会粘在屏幕顶部。这确保了导航菜单始终可见且易于访问，即使用户进一步向下移动页面也是如此。

Bootstrap提供的一些响应式置顶类如下：

  • .sticky-sm-top将元素的位置粘贴到小尺寸视口的顶部

  • .sticky-md-top将元素的位置粘贴到中等大小视口的顶部

  • .sticky-lg-top将元素的位置粘贴到大尺寸视口的顶部

  • .sticky-xl-top将元素的位置粘贴到超大尺寸视口的顶部

  • .sticky-xxl-top将元素的位置粘贴到超大尺寸视口的顶部

让我们看一个例子：

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

例子

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

<!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类用于创建一个粘性元素，该元素从边缘到边缘保留在屏幕底部，但仅在您滚动经过它之后才保留。

例子

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

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

响应式粘底

Bootstrap提供的一些响应式粘性底层类如下：

  • .sticky-sm-bottom将元素的位置粘贴到小尺寸视口的底部

  • .sticky-md-bottom将元素的位置粘贴到中等大小视口的底部

  • .sticky-lg-bottom将元素的位置粘贴到大尺寸视口的底部

  • .sticky-xl-bottom将元素的位置粘贴到超大尺寸视口的底部

  • .sticky-xxl-bottom将元素的位置粘贴到超大尺寸视口的底部

让我们看一个响应式粘性底层的例子：

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

例子

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

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