• 技术文章 >web前端 >Bootstrap教程

    浅析Bootstrap中列表组、分页和进度条组件的用法

    青灯夜游青灯夜游2022-05-10 21:19:21转载433
    Bootstrap中怎么实现列表组、分页和进度条?下面本篇文章给大家介绍一下Bootstrap中列表组、分页和进度条组件的用法,希望对大家有所帮助!

    列表组

    代码练习:

    		<ul class="list-group">
    			<li class="list-group-item active">列表组一</li>
    			<li class="list-group-item">列表组二</li>
    			<li class="list-group-item disabled">列表组三</li>
    		</ul>
    		<br />
    		<div class="list-group list-group-flush">
    			<a href="#" class="list-group-item active list-group-item-action">列表组一</a>
    			<a href="#" class="list-group-item list-group-item-action">列表组二</a>
    			<a href="#" class="list-group-item disabled list-group-item-action">列表组三</a>
    		</div>
    		<br />
    		<ul class="list-group list-group-horizontal-sm">
    			<li class="list-group-item active">列表组一</li>
    			<li class="list-group-item list-group-item-danger">列表组二</li>
    			<li class="list-group-item disabled">列表组三</li>
    		</ul>
    		<br />
    		<ul class="list-group">
    			<li class="list-group-item d-flex justify-content-between align-items-center">列表组一
    			<span class="badge badge-danger">标记</span></li>
    			<li class="list-group-item">列表组二</li>
    			<li class="list-group-item disabled">列表组三</li>
    		</ul>

    分页

    添加.pagination,字标签添加.page-item,链接标签添加.page-link
    可添加.pagination-lg.pagination-sm设置大小分页效果 可添加.justify-content-*进行居中,居左,居右设置 代码练习:

    		<ul class="pagination pagination-sm justify-content-center">
    			<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">下一页</a></li>
    		</ul>

    进度条

    代码练习:

    		<div class="progress">
    			<div class="progress-bar w-50 ">
    			</div>
    		</div>
    		<br />
    		<div class="progress" style="height: 30px;">
    			<div class="progress-bar bg-danger" style="width: 35%;">
    				30%
    			</div>
    		</div>
    		<br>
    		<div class="progress">
    			<div class="progress-bar bg-success w-25"></div>
    			<div class="progress-bar bg-danger w-25"></div>
    			<div class="progress-bar bg-info w-25"></div>
    		</div>
    		<br />
    		<div class="progress">
    			<div class="progress-bar w-50 bg-info progress-bar-striped progress-bar-animated">
    			</div>
    		</div>

    更多关于bootstrap的相关知识,可访问:bootstrap基础教程!!

    以上就是浅析Bootstrap中列表组、分页和进度条组件的用法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:bootstrap
    上一篇:bootstrap panel是什么 下一篇:没有了
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• bootstrap的表格样式有哪些• bootstrap怎么实现右侧悬浮框• bootstrap怎么设置固定定位• bootstrap怎么让div隐藏• bootstrap清除浮动的类名是什么
    1/1

    PHP中文网