Bootstrap4组件:分页与进度条


发布时间:2020-03-20 16:34    作者: Uncle Hui   已过去:4 月,3 周   阅读总量:293 已被赞:0


分页(Pagination)

1. 使用图标:«»

2. 禁用和活动状态:.disabled.active

.disabled 使用 pointer-events: none 來禁用 <a>的链接功能,但该CSS属性尚未标准化(使用的时候要注意浏览器兼容性调式)。

为了安全起见,请在这些链接上添加一个tabindex="-1"定义并使用自定义JavaScript来完全禁用其功能。

3. 规格尺寸:.pagination-lg/sm

4. 对齐:使用 flexbox弹性布局通用样式,可.justify-content-center/end更改分页组件的对齐方式。

<nav>

<ul class="pagination">

<li class="page-item">

<a href="" class="page-link">上一页</a>

</li>

<li class="page-item">

<a href="" class="page-link">1</a>

</li>

<li class="page-item">

<a href="" class="page-link">2</a>

</li>

<li class="page-item">

<a href="" class="page-link">3</a>

</li>

<li class="page-item">

<a href="" class="page-link">下一页</a>

</li>

</ul>

</nav>

进度条(Progress)

示例

1. 标签:在.progress-bar 中放置文字內容,可将标签添加到进度条中。

2. 高度:我们只在.progress上设置了一个height值,所以如果你改变了这个值,那么内部的 .progress-bar 高度会自动调整大小。

<div class="progress">

<div class="progress-bar" style="width:60%;">60%</div>

</div>

1%的时候,处理%被挡住的问题,用图片的方式,天机 min-width

背景

使用背景通用样式 Class 样式来定义进度条的外观。

<div class="progress">

<div class="progress-bar w-25">25%</div>

</div>

<br>

<div class="progress">

<div class="progress-bar bg-success w-25">25%</div>

</div>

<br>

<div class="progress">

<div class="progress-bar bg-info w-50">50%</div>

</div>

<br>

<div class="progress">

<div class="progress-bar bg-warning w-75">75%</div>

</div>

<br>

<div class="progress">

<div class="progress-bar bg-danger w-100">100%</div>

</div>

多进度条进度(嵌套)

<div class="progress">

<div class="progress-bar" style="width:15%;"></div>

<div class="progress-bar bg-success" style="width:30%;"></div>

<div class="progress-bar bg-info" style="width:20%;"></div>

</div>

条纹进度指示

.progress-bar-striped 添加到 .progress-bar 上,可以使用CSS渐变对背景颜色加上条纹效果。

<div class="progress">

<div class="progress-bar progress-bar-striped w-25"></div>

</div>

<br>

<div class="progress">

<div class="progress-bar progress-bar-striped bg-success w-25"></div>

</div>

<br>

<div class="progress">

<div class="progress-bar progress-bar-striped bg-info w-50"></div>

</div>

<br>

<div class="progress">

<div class="progress-bar progress-bar-striped bg-warning w-75"></div>

</div>

<br>

<div class="progress">

<div class="progress-bar progress-bar-striped bg-danger w-100"></div>

</div>

动画条纹进度指示

条纹渐变也可以做成动画效果,将.progress-bar-animated 加到 .progress-bar 上,即实现CSS3绘制的从右到左的动画效果。

动画条纹进度条不适用于 Opera 12浏览器—因为它不支持 CSS3 动画。

<div class="progress">

<div class="progress-bar progress-bar-striped progress-bar-animated w-25"></div>

</div>

<br>

<div class="progress">

<div class="progress-bar progress-bar-striped progress-bar-animated bg-success w-25"></div>

</div>

<br>

<div class="progress">

<div class="progress-bar progress-bar-striped progress-bar-animated bg-info w-50"></div>

</div>

<br>

<div class="progress">

<div class="progress-bar progress-bar-striped progress-bar-animated bg-warning w-75"></div>

</div>

<br>

<div class="progress">

<div class="progress-bar progress-bar-striped progress-bar-animated bg-danger w-100"></div>

</div>

点赞

0




登陆后方可评论