Progress進度條組件由兩個HTML元素、一些CSS寬度設置以及一些屬性構建。我們不使用HTML5<progress>元素，確保用戶可以方便的平行堆疊進度條、加上動態(tài)效果，并在共上放置文本標簽。使用.progress容器來指定進度條的最大值，使用.progress-bar來表示當前的進度，.progress-bar要求的內嵌樣式，使用全局實用CSS或自定義CSS來設置其寬度，.progress-bar還需要一些roleand與屬性，使其訪問友好（無障礙）。任務實施創(chuàng)建一個基本的進度條的步驟如下：添加一個帶有.progress類的<div>，接著，在上面的<div>內，添加一個帶有gress-bar的空的<div>，添加一個帶有百分比表示的寬度的style屬性，例如style="width:70%"表示進度條在70%的位置，還可以調整進度條的高度，設置進度條上顯示的文本，以下演示案例，效果如圖6-79所示。<h3>基本進度條、設置高度的進度條、進度條中顯示文本</h3><p>一個默認的進度條</p><divclass="progress"> <divclass="progress-bar"style="width:10%"></div></div><p>上面進度條高度默認為16px。下面三個進度條高度分別為10px、20px、30px</p><divclass="progress"style="height:10px;"> <divclass="progress-bar"style="width:40%;"></div></div><br><divclass="progress"style="height:20px;"> <divclass="progress-bar"style="width:50%;"></div></div><br><divclass="progress"style="height:30px;"> <divclass="progress-bar"style="width:60%;">60%</div></div>進度條還可以設置不同的顏色，而且還可以加上條紋，效果如圖6-80所示。<h3>設置不同顏色并且加條紋的進度條</h3><p>可以使用.progress-bar-striped類來設置條紋進度條：</p><divclass="progress"> <divclass="progress-barprogress-bar-striped"style="width:30%"></div></div><br><divclass="progress"> <divclass="progress-barbg-successprogress-bar-striped"style="width:40%"></div></div><br><divclass="progress"> <divclass="progress-barbg-infoprogress-bar-striped"style="width:50%"></div></div><br><divclass="progress"> <divclass="progress-barbg-warningprogress-bar-striped"style="width:60%"></div></div><br><divclass="progress"> <divclass="progress-barbg-dangerprogress-bar-striped"style="width:70%"></div></div>可以設置混合色彩進度條，每種顏色占不同的比例。 <divclass="progress-barbg-success"style="width:40%">success</div> <divclass="progress-barbg-warning"style="width:10%">Warning</div> <divclass="progress-barbg-danger"style="width:20%">Danger </div>條紋漸變也可以做成動畫效果，將.progress-bar-animated加到.progress-bar上，即實現CSS3繪制的從右到左的動畫效果。<divclass="progress-barprogress-bar-stripedprogress-bar-animated"style="width:40%"></div>任務總結通過本次任務，我們知道進度條可以顯示用戶任務的完成過程和進度，可以設置不同顏色的進度條，條紋進度條、動畫進度條以及混合色彩進度條。任務描述

網頁開發(fā)過程，如果碰到內容過多，一般都會做分頁處理。本次任務就是利用Bootstrap的pagination實現分頁。任務6.12應用pagination實現分頁Bootstrap4要創(chuàng)建一個基本的分頁可以在<ul>元素上添加.pagination類。然后在<li>元素上添加.item類，超鏈接中加入link即可。任務實施可以使用圖標或符號代替某些分頁鏈接的文本，比如使用圖標«和»分別表示向前翻頁和向后翻頁。對于顯示為不可點擊的鏈接，使用.disabled，顯示處于活動狀態(tài)的鏈接使用.active。.disabled使用pointer-events:none來禁用<a>的鏈接功能，但該CSS屬性尚未標準化，使用的時候要注意瀏覽器兼容性調式。下面的代碼進行演示，效果如圖6-81圖6-81所示。<ulclass="pagination"> <liclass="item"> <ahref="#"class="link">首頁</a> </li> <liclass="item"> <ahref="#"class="link">1</a> </li> <liclass="itemdisabled"> <ahref="#"class="link">2</a> </li>

<liclass="item"> <ahref="#"class="link">3</a> </li> <liclass="item"> <ahref="#"class="link">下一頁</a> </li></ul>

如果需要更大或更小的分頁，可以設置規(guī)格尺寸，在ul添加.pagination-lg或.pagination-sm樣式可以獲得大規(guī)格或小規(guī)格尺寸的分頁組件。

使用flexbox彈性布局通用樣式，可用.justify-content-center/end更改分頁組件的對齊方式。效果如圖6-82所示。任務總結

通過本次任務，我們知道網頁開發(fā)過程，如果碰到內容過多，一般都會做分頁處理。Bootstrap創(chuàng)建一個基本的分頁可以在<ul>元素上添加.pagination類，然后在<li>元素上添加.item類，<li>元素的<a>標簽上添加.link類實現。任務描述

利用Bootstrap的折疊實現內容的顯示與隱藏。任務6.13使用Collapse實現折疊面板Bootstrap4折疊可以使用帶href屬性的鏈接或者帶data-target屬性的按鈕來創(chuàng)建折疊效果，<a>元素上使用href屬性來代替data-target屬性，這兩種情況下data-toggle="collapse"屬性都是必須的，點擊按鈕后會在隱藏與顯示之間切換。.collapse設置隱藏的內容。任務實施下面的示例演示的是按鈕或者超鏈接使用id實現內容的顯示和隱藏，代碼如下，效果如圖6-83所示。<p><aclass="btnbtn-primary"data-toggle="collapse"href="#myCollapse">各大銀行</a><buttonclass="btnbtn-primary"data-toggle="collapse"data-target="#myCollapse">去轉賬</button></p><divclass="collapse"id="myCollapse"><divclass="cardcard-body">

建設銀行、中國銀行</div></div>

下面的示例演示按鈕或者超鏈接使用class實現內容的顯示和隱藏，因為class可以相同，所以就可以實現多個內容的顯示與隱藏。代碼如下，效果如圖6-84所示。<p> <ahref=".myCol"class="btnbtn-primary"data-toggle="collapse">各大銀行</a> <buttonclass="btnbtn-primary"data-toggle="collapse"data-target=".myCol">去轉賬</button></p><divclass="row"> <divclass="col"> <divclass="collapsemyCol"> <divclass="cardcard-body">

建設銀行、中國銀行 </div> </div> </div> <divclass="col"> <divclass="collapsemyCol"> <divclass="cardcard-body">

自助服務、專屬打造 </div> </div> </div></div>

結合card卡片組件使用，可以擴展折疊組件為手風琴效果。使用data-parent屬性來確保所有的折疊元素在指定的父元素下，這樣就能實現在一個折疊選項顯示時其他選項就隱藏。代碼如下，效果如圖6-85所示。<divid="accordion"><divclass="card"> <divclass="card-header"> <h5class="mb-0"> <buttonclass="btnbtn-link"data-toggle="collapse"data-target="#collapseOne">選項一</button> </h5> </div> <divclass="collapseshow"id="collapseOne"data-parent="#accordion"> <divclass="card-body">

選項一中的內容 </div> </div></div><divclass="card"> <divclass="card-header"> <h5class="mb-0"> <buttonclass="btnbtn-link"data-toggle="collapse"data-target="#collapseTwo">選項二</button> </h5> </div> <divclass="collapse"id="collapseTwo"data-parent="#accordion"> <divclass="card-body">

選項二中的內容 </div> </div></div></div>

默認情況下折疊的內容是隱藏的，可以添加.show類讓內容默認顯示也就是使用.collapse.show顯示內容。

可以使用自定義樣式創(chuàng)建手風琴效果，只要添加data-children屬性，并指定一組相鄰元素來切換(如.item)，然后使用與上述相同的屬性和class，來切換/隱藏其關聯(lián)的內容。代碼如下，效果如圖6-83圖6-86所示。<divid="accordion"data-children=".item"> <divclass="item"> <ahref="#collapseOne"data-toggle="collapse"data-parent="#accordion">選項一</a>