Day_26 滾動監控讀取圖示浮動標籤 With bootstrap

2023 iThome 鐵人賽

DAY 26

Modern Web

三十天持續努力挑戰py系列第 26 篇

15th鐵人賽

clevens1008

團隊NUTC_IMAC_WEB_桑貝比

2023-10-11 00:09:08

389 瀏覽

分享至

大家好，又來做一期我自認為蠻常用的Bootstrap重點整理及介紹。這次要介紹的是滾動監控、讀取圖示、工具提示框、浮動標籤等等，還請大家多多關照。
滾動監控 (Scrollspy):根據滾動位置自動更新 Bootstrap 導覽或列表元件，以指示當前處於啟用狀態的連結。
其顯示方式還有另外幾個這邊就不多作介紹，這主要功能是要用JS與此作連動，以下。
透過 data 屬性:要在您的導覽列中加上滾動監控行為，只要將 data-bs-spy="scroll" 加到您要監控的元素 (通常是 <body>)。接著將 data-bs-target 屬性加入任何Bootstrap .nav 元件的父元素 ID 或 class。
透過 JavaScript:在您的 CSS 加入 position: relative; 後，透過 JavaScript 調用滾動監控：

<style>
    body {
        position: relative;
    }
</style>

<body data-bs-spy="scroll" data-bs-target="#navbar-example">
    Lorem, <br>ipsum<br> dolor<br> sit<br> amet<br> consectetur<br> adipisicing <br>elit.<br> Iste!
    <div id="navbar-example">
        <ul class="nav nav-tabs" role="tablist">
            Lorem, <br>ipsum<br> dolor<br> sit<br> amet<br> consectetur<br> adipisicing <br>elit.<br> Iste!
        </ul>
    </div>
    Lorem, <br>ipsum<br> dolor<br> sit<br> amet<br> consectetur<br> adipisicing <br>elit.<br> Iste!
    <script>
        var scrollSpy = new bootstrap.ScrollSpy(document.body, {
            target: '#navbar-example'
        })
    </script>
</body>

以上淺介紹了滾動監控的基礎，想詳細了解請至https://bootstrap5.hexschool.com/docs/5.1/components/scrollspy/#item-2
接下來介紹幾個我個人在刻網站時，遇到LODING的時候，很常用的幾個ICON。
Border 讀取圖示:使用 border 讀取圖示來當作輕量的載入狀態顯示。

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

text-(warning/danger...)可以更改顏色。
漸變讀取圖示:如果你不喜歡 border 讀取圖示，可以切換到漸變讀取圖示。雖然技術上來說，它不會旋轉，但它會反覆漸變顯示！

<div class="spinner-grow" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

尺寸:增加 .spinner-border-sm 和 .spinner-grow-sm 製作一個較小的讀取圖示，讓它可以在其他元件中快速地被使用。
對其:可以使用margin，以及Flex裡面的align、float等等調整位置。
也可以新增至按鈕裡面。

<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  <span class="visually-hidden">Loading...</span>
</button>
<button class="btn btn-primary" type="button" disabled>
  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
  Loading...
</button>

接下來介紹一個輸入資料時蠻常用的功能之一，浮動標籤 (Floating labels)。他會把你的像是的東西placeholer縮小至同一個input框，裡面的一個地方。

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

如果已經定義 value ，則 <label> 會自動調整為其浮動位置。表單驗證樣式也可以按預期運作。
select也可以使用的:

    <div class="form-floating">
        <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
            <option selected>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        <label for="floatingSelect">Works with selects</label>
    </div>