当前位置：首页 > ai >正文

BootStrap:进阶使用（其二）

ai 2025/7/23 4:10:03

今天我要讲述的是在BootStrap中第二篇关于进一步使用的方法与代码举例;

分页：

对于一些大型网站而言，分页是一个很有必要的存在，如果当数据内容过大时，则需要分页来分担一些，这可以使得大量内容能整合并全面地展示，这大大减小了网页的长度。使分页可以像翻书一样，一页一页地展示且工整。

以下则是分页栏的基础框架：

<nav><ul class="pagination"><li><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li></ul>
</nav>

效果展示：

注：可以通过增加样式来美观化分页栏的整体形式，如：

class="text-center" style="margin-top: -20px;"

效果：

注：通过调整的分页栏可以看到其形比较工整，有一丝真正制作软件的感觉（active意为：选中；即二号蓝色框内效果显示）

而上方效果图内左右两边的上下一页的效果则以下：

<nav style="margin-top: -20px;"><ul class="pager"><li style="float: left;"><a href="#">上一页</a></li><li style="float: right;"><a href="#">下一页</a></li></ul></nav>

列表组：

注：列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容。

介绍：最简单的列表组仅仅是一个带有多个列表条目的无序列表，另外还需要设置适当的类，可以根据自身的需求通过 CSS 自己定制。

<div class="list-group"><a href="#" class="list-group-item active">Cras justo odio</a><a href="#" class="list-group-item">Dapibus ac facilisis in</a><a href="#" class="list-group-item">Morbi leo risus</a><a href="#" class="list-group-item">Porta ac consectetur ac</a><a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

效果：（建议配合栅格效果制作）

缩略图：

通过缩略图组件扩展 Bootstrap 的栅格系统，可以很容易地展示栅格样式的图像、视频、文本等内容。

<!-- 面板内容 --><div class="panel-body"><div class="col-sm-4 col-md-4"><div class="thumbnail"><img src="img/3.jpg" width="100px" alt="...">   《==超链接<div class="caption"><h3 class="text-center">此处输入文字</h3></div></div></div>

效果：(配合下方的面板互相作用制作)

面版：

对于面板来说，它更像是一个展示柜，可以为我们展示它的基本信息，相当于大街上的商店，为想要进店购买商品的顾客展示这家店铺物品的“精美”，

           //面板风格
<div class="panel panel-default">//面板标题<div class="panel-heading">Panel heading without title</div>  《==标题//面板内容<div class="panel-body">Panel content</div>
</div>

效果：(内容参照上方缩略图相互作用制作)

进度条：

非常常见的一个小玩意儿，比如在我们熟知的4399小游戏里面就有好多它的身影，包括各类大型游戏。比如原神（原神加载新地区或者进入游戏中元素自左至右等效果也是进度条加载），王者荣耀这类游戏中（王者荣耀的百分比加载内容本质上就是进度条的一种，不过其样式是不一样的）

<!-- 进度条 --><div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div></div>

效果：