文章前提

Scrollspy 滾動監聽 、 Progress 進度條 、 Tooltips 工具提示框

Scrollspy 滾動監聽

CH7 73
課程練習下載
Bootstrap 路徑 : Components / Scrollspy

| Scrollspy 基本架構 | 範例

  • nav.navbar.navbar-light.bg-light id="監控區域01" ( 這邊為 navbar 架構 )

    • a.navbar-bland
    • ul.nav.nav-pills ( 這邊為 nav 架構 )
      • li.nav-item
        • a.nav-link href="#監控內容01"
  • .scrollspy-space data-spy="scroll" data-target="監控區域01" ( .scrollspy-space 這邊 Class 自行命名即可,方便之後做 Css 設定 )

    • h4 id="監控內容01" ( 監控標題填此 )
    • p ( 監控內文填此 )
  • 最後記得寫上客製 Css ( 下方程式碼 )

  • 上方為 navbar 架構,下方為監控的目標內容

  • 監控的內容標題會有特定 ID 對應上方 nav.navbar 的 href 內 ID 。滾動監聽的內容,會對應到上方 navbar 標題

  • 監空區域 須加入 data-spy="scroll"data-target="目標" ,目標更改為上方 navbar 的 ID

  • 加入此 css 讓監控區域固定在特定空間產生 scroll ,class 自行命名

.scrollspy-example {
        position: relative;
        height: 200px;
        margin-top: .5rem;
        overflow: auto;
}

Progress 進度條

CH7 74
課程練習下載
Bootstrap 路徑 : Components / Progress

| Progress 基本架構 |

  • .progress
    • .progress-bar

| Progress 寬度與長度調整 |

Bootstrap-Progress-寬度與長度調整

  • 進度條長度, 可於 .progress-bar 加入 style="width: %"; ,如果長度太短就不建議在裡面加入文字
  • 進度條寬度,於 .progress 加入 style="height: "; 調整

| Backgrouns 色彩調整 |

  • 透過 Utilities / color 調整
  • .progress-bar 內加入 .bg-主題色 即可變換進度條顏色

| Multiple bars 進度條重疊 |

Bootstrap-Multiple-bars-進度條重疊

  • .progress
    • .progress-bar style="width: %";
    • .progress-bar.bg-主題色 style="width: %";
<div class="progress">
    <div class="progress-bar" style="width: 15%;">15%</div>
    <div class="progress-bar bg-info" style="width: 40%;">40%</div>
    <div class="progress-bar bg-warning" style="width: 18%;">18%</div>
</div>

| Striped 條紋 |

Bootstrap-Striped-條紋

  • .progress-bar 內加入 .progress-bar-striped

| Animated stripes 動態條紋 |

  • 動畫條紋挺消耗 CPU 資源,請斟酌使用
  • .progress-bar 加入 .progress-bar-animated.progress-bar-striped

資料來源

最後修改日期: 13 5 月, 2020

作者