Bootstrap - 位置

上一頁
下一頁

本章討論元素位置的配置。

Bootstrap 提供了一組輔助類來設定頁面上元素的位置。Bootstrap 提供的一些類如下：。

  • .fixed-top

  • .fixed-bottom

  • .sticky-top

  • .sticky-bottom

讓我們看看每組類的示例。

固定頂部

類.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 將元素(s) 的位置貼上到小型視口頂部

  • .sticky-md-top 將元素(s) 的位置貼上到中等大小的視口頂部

  • .sticky-lg-top 將元素(s) 的位置貼上到大型視口頂部

  • .sticky-xl-top 將元素(s) 的位置貼上到特大型視口頂部

  • .sticky-xxl-top 將元素(s) 的位置貼上到超特大型視口頂部

讓我們看一個例子

注意：調整瀏覽器大小以檢視更改。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!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 將元素(s) 的位置貼上到小型視口底部

  • .sticky-md-bottom 將元素(s) 的位置貼上到中等大小的視口底部

  • .sticky-lg-bottom 將元素(s) 的位置貼上到大型視口底部

  • .sticky-xl-bottom 將元素(s) 的位置貼上到特大型視口底部

  • .sticky-xxl-bottom 將元素(s) 的位置貼上到超特大型視口底部

讓我們看一個響應式粘性底部類的示例

注意：調整瀏覽器大小以檢視更改。

示例

您可以使用編輯和執行選項編輯並嘗試執行此程式碼。

<!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>
列印頁面
上一頁
下一頁
廣告