1.　　Pagination 分頁

首先 .pagination 是基類，然後分頁項 如果是普通分頁項的話，那就加.page-item，如果是a標籤的話 就加.page-link 【下面所示： 和普通的一個分頁】

<!--首先 .pagination 是基類，然後分頁項 如果是普通分頁項的話，那就加.page-item，如果是a標籤的話 就加.page-link   -->
    <ul class="pagination">
        <li class="page-item" ><a class="page-link" href="#">
 
首頁 </a> </li>
        <li class="page-item" ><a class="page-link" href="#">1  </a>  </li>
        <li class="page-item" ><a class="page-link" href="#">2  </a>  </li>
        <li class="page-item" ><a class="page-link" href="#">3  </
 
a>  </li>
        <li class="page-item" ><a class="page-link" href="#">...</a>  </li>
        <li class="page-item" ><a class="page-link" href="#">10 </a>   </li>
        <li class="page-item" ><a class="page-link" href="#">11 </a>   </
 
li>
        <li class="page-item" ><a class="page-link" href="#">尾頁 </a>  </li>
    </ul>

禁用和活動狀態

兩種方法禁用：1..disabled類 2.把a標籤換成span或者其他標籤：

    <ul class="pagination">
        <li class="page-item" ><a class="page-link" href="#">首頁 </a> </li>
        <li class="page-item" ><a class="page-link" href="#">1  </a>  </li>
        <li class="page-item disabled" ><a class="page-link" href="#">2【disabled 禁用】  </a>  </li>
        <li class="page-item" ><a class="page-link" href="#">3  </a>  </li>
        <li class="page-item" ><a class="page-link" href="#">...</a>  </li>
        <li class="page-item" ><span class="page-link">10【a 換span 禁用】 </span>   </li>
        <li class="page-item" ><a class="page-link" href="#">11 </a>   </li>
        <li class="page-item" ><a class="page-link" href="#">尾頁 </a>  </li>
    </ul>

但是沒什麼用啊 那個換span 不好看 容易誤會

活動狀態就是 active了 老樣子 直接加 這裡不多說。

想要更大或更小的分頁？新增.pagination-lg或.pagination-sm額外尺寸。

emmm 只是變大、變小而已：

<ul class="pagination pagination-lg">
    <li class="page-item"><a class="page-link" href="#">首頁 </a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item disabled"><a class="page-link" href="#">...</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">尾頁 </a></li>
</ul>

<!--上大下小-->

<ul class="pagination pagination-sm">
    <li class="page-item"><a class="page-link" href="#">首頁 </a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item disabled"><a class="page-link" href="#">...</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">尾頁 </a></li>
</ul>

還有一個水平樣式對齊：

其實就是用那.justify-content-*這玩意來做 這玩意很經常用來水平樣式,

這個也不多說 主要看 最後 的 * 是什麼 這個應該很清楚吧。。。

2.　　進度條（Progress）

他是使用.progress作為最外層元素，

然後裡層用指示進度條（.progress-bar）設定最大值，且 這玩意會設定字型居中 字型白色 沒有文字則不存在樣式

    <div class="progress">
        <div class="progress-bar"></div>    <!--別再裡面填寫內容不然會按內容決定進度-->
    </div>

設定他的進度的2個方法： 請注意 這個設定進度是設定內層的【.progress-bar】 那個寬度，如果設定外層div（.progress）那麼就是單單設定寬度了。

1. 直接 .w-*　　由於直接這樣 只有 25% 50% 75% 100% 所以呢第二種是自定義進度的：

2. 直接設定寬度style="width: x% 即可：

<!--只要你設定了進度  在進度條中寫內容 只有超出 不存在用內容決定進度了-->
    <div class="progress mt-1">
        <div class="progress-bar w-25"></div>
    </div>

<div class="progress mt-1">
    <div class="progress-bar w-50"></div>
</div>

<div class="progress mt-1">
    <div class="progress-bar w-75"></div>
</div>

<div class="progress mt-1">
    <div class="progress-bar w-100"></div>
</div>

<!--自定義設定進度：-->
<div class="progress mt-1">
    <div class="progress-bar" style="width: 50%">50%</div>
</div>

區分：

<!--區分 寬度 和 進度：-->
<div class="progress mt-1" style="width: 50%">
    <div class="progress-bar bg-info" style="width: 50%">50%</div>
</div>

高度你自己在外層的div（.progress）設定即可。

還有就是 直接用.bg-* 進行更換顏色 ， 隨便你換背景顏色 還可以不同顏色 + 不同進度 合併：

<div class="progress mt-1" style="width: 50%">
<!--  進度 25 + 50 = 70%  -->
    <div class="progress-bar bg-warning" style="width: 25%">25%</div>
    <div class="progress-bar bg-success" style="width: 50%">50%</div>
</div>

甚至你還可以是條紋形狀的進度條：

用 .progress-bar-striped 來設定：

<div class="progress mt-1" style="width: 50%">

<!--  條紋的話 如果不存在 progress-bar 【沒有的話 字型預設毫無樣式】 為了好習慣 加進去咯. -->

<!--條紋是根據背景顏色來變化的 顏色預設都是藍色的 那個 info--> <div class="progress-bar progress-bar-striped bg-success" style="width: 70%">70%</div> <div class="progress-bar progress-bar-striped " style="width: 29%">預設 - 29%</div> </div>

有了條紋還不滿足 那就 條紋 + 動畫：

用.progress-bar-animated 首先 你得存在 條紋啊，別傻乎乎的 不然沒效果

<div class="progress mt-1" style="width: 50%">
    <div class="progress-bar progress-bar-striped  progress-bar-animated bg-success" style="width: 70%">70%</div>
    <div class="progress-bar progress-bar-striped " style="width: 29%">預設 - 29%</div>
</div>