《响应式页面设计》-项目6-任务6.11任务6.12任务6.13

Progress进度条组件由两个HTML元素、一些CSS宽度设置以及一些属性构建。我们不使用HTML5<progress>元素，确保用户可以方便的平行堆叠进度条、加上动态效果，并在共上放置文本标签。使用.progress容器来指定进度条的最大值，使用.progress-bar来表示当前的进度，.progress-bar要求的内嵌样式，使用全局实用CSS或自定义CSS来设置其宽度，.progress-bar还需要一些roleand与属性，使其访问友好（无障碍）。任务实施创建一个基本的进度条的步骤如下：添加一个带有.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>任务总结通过本次任务，我们知道进度条可以显示用户任务的完成过程和进度，可以设置不同颜色的进度条，条纹进度条、动画进度条以及混合色彩进度条。任务描述

网页开发过程，如果碰到内容过多，一般都会做分页处理。本次任务就是利用Bootstrap的pagination实现分页。任务6.12应用pagination实现分页Bootstrap4要创建一个基本的分页可以在<ul>元素上添加.pagination类。然后在<li>元素上添加.item类，超链接中加入link即可。任务实施可以使用图标或符号代替某些分页链接的文本，比如使用图标«和»分别表示向前翻页和向后翻页。对于显示为不可点击的链接，使用.disabled，显示处于活动状态的链接使用.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>

如果需要更大或更小的分页，可以设置规格尺寸，在ul添加.pagination-lg或.pagination-sm样式可以获得大规格或小规格尺寸的分页组件。

使用flexbox弹性布局通用样式，可用.justify-content-center/end更改分页组件的对齐方式。效果如图6-82所示。任务总结

通过本次任务，我们知道网页开发过程，如果碰到内容过多，一般都会做分页处理。Bootstrap创建一个基本的分页可以在<ul>元素上添加.pagination类，然后在<li>元素上添加.item类，<li>元素的<a>标签上添加.link类实现。任务描述

利用Bootstrap的折叠实现内容的显示与隐藏。任务6.13使用Collapse实现折叠面板Bootstrap4折叠可以使用带href属性的链接或者带data-target属性的按钮来创建折叠效果，<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显示内容。

可以使用自定义样式创建手风琴效果，只要添加data-children属性，并指定一组相邻元素来切换(如.item)，然后使用与上述相同的属性和class，来切换/隐藏其关联的内容。代码如下，效果如图6-83图6-86所示。<divid="accordion"data-children=".item"> <divclass="item"> <ahref="#collapseOne"data-toggle="collapse"data-parent="#accordion">选项一</a>