文章前提

Pagination 分頁 、 Popovers 彈出提示窗 、 Tooltips 工具提示框

Pagination 分頁

CH7 71
課程練習下載
Bootstrap 路徑 : Components / Pagination

| Pagination 分頁 |

  • nav
    • ul.pagination
      • li.page-item
        • a.page-link
  • nav 為導覽標籤置於外層,實際上從 <ul> 開始
  • 替換 pagination 不同尺寸,加於 <ul>
    • .pagination-{ sm | lg }
  • pagination 亦使用 Flex 排版,所以可用 Utilities / Flex 讓它正確對齊
    • 例如 pagination 置中,可於 <ul> 加上 .justify-content-center

| Disabled and active states 禁用與啟用狀態 | 範例

  • 可使用 .active 或 .disabled 替換成不同狀態
  • .disable 還是會被選到 ( 在按鍵上方一點處 ),是 a 連結才會有的問題 ,可加上 tabindex="-1" 解決
    /
    註: 下方程式 aria-label 或是 sr-only 皆給無障礙使用

    aria-label="Previous"
    <span class="sr-only">Previous</span>

Popovers 彈出提示窗 , Tooltips 工具提示框 CH7 72

CH7 72
課程練習下載
Bootstrap 路徑 : Components / Popovers , Tooltips

  • Popovers , Tooltips 為 JavaScript 的額外插件,除了加入 data-toggle 外,還須加入 Bootstrap 提供的 <script> 程式碼。
  • popovers 顯示的訊息量較多, tooltips 顯示訊息量較少

| Popovers 提示窗基本架構 |

Bootstrap-Popovers-提示窗基本架構

  • 按下 Button 顯示右方提示窗,再次點擊 button 提示窗關閉
  • <button> 內的 title=" "data-content=" " 分別代表提示窗內的標題與內容
<!--button 與 popover 提示窗資訊-->
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover
</button>

<!--於<script>加入程式碼啟用 popover-->
<script>
    $(function () {
      $('[data-toggle="popover"]').popover()})
</script>

| popovers direction 提示窗方向 |

  • <button>data-placement=" 方向 " 中的方向改成 top , right , bottom , left 其一
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

| Dismiss on next click | 範例

  • 點擊 button 出現提示窗後,不須再點 button 提示窗才隱藏,點擊旁邊空白處即可。
  • Bootstrap 表示為了正確的跨瀏覽器和跨平台這邊 button 需用 <a> 標籤 & tabindex 屬性
  • 出處 : 方法一與方法二方法三
  • 助教回覆訊息
<!--方法一 : 使用 data-toggle 啟用提示窗 popover -->
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover
</a>

<script>
    $(function () {
      $('[data-toggle="popover"]').popover()
    })
</script>
<!--方法二 : <a>自訂一個Class 啟用它 -->
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover
</a>
<script>
    $(function () {
      $('.example-popover').popover({
        container: 'body'
      })
    })
</script>
<!--方法三 : <a> 自訂一個 Class 啟用它 。於方法二的基礎下,啟用方法三的方式-->
<a tabindex="0" class="btn btn-lg btn-danger popover-dismiss" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover
</a>
<script>
    $(function () {
        $('.popover-dismiss').popover({
          trigger: 'focus'
        })
     })
</script>

| Tooltips | 範例

Bootstrap-Tooltips示意

  • 需加入 <script> 程式碼啟用
  • 與 popover 可改變方向性,一樣使用 data-placement
  • popovers 顯示的訊息量較多, tooltips 顯示訊息量較少
<script>
    $(function () {
      $('[data-toggle="tooltip"]').tooltip()})
</script>

資料來源

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

作者