Bootstrap（四）列表组和附加导航

最新推荐文章于 2025-06-11 16:04:52 发布

北风未起

最新推荐文章于 2025-06-11 16:04:52 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： bootstrap 文章标签：列表组附加导航

本文链接：https://blog.youkuaiyun.com/mysunniess/article/details/81126532

bootstrap 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用列表组创建带有预定义样式的列表，并利用固定导航实现页面滚动时导航栏的固定效果。包括HTML结构、CSS样式及JavaScript实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

列表组

普通列表组

Ul添加类.list-group

每一项li添加.list-group-item

利用list-group-item-*给列表项设置预定义样式风格

可以给列表项添加任何HTML内容

列表项内容标题设置.list-group-item-heading

列表项内容部分设置.list-group-item-text

附加导航

页面左侧或右侧的固定导航

1.实现方法：向需要监听的元素（即固定的列表）添加：data-spy=’affix’

2.如果要设置固距离页面顶部或者底部有一定距离切换导航的滚动和固定状态可以设置：data-offset-top=’数值’或data-offset-bottom=’数值’

3.随着页面滚动，固定导航样式改变，通过滚动监听实现

实现方式：给body添加data-spy=’scroll’

Data-target=’固定元素’

4.利用js实现

导航列表.affix();

参数配置offset：数值或者对象默认{top:10,bottom:10}

小案例，希望大家能去练习一下。

<div class="container">
    <ul class="list-group">
        <li class="list-group-item list-group-item-info">
            <h3 class="list-group-item-heading">
                HTML
            </h3>
            <p class="list-group-item-text">
                这是一门基础语言
            </p>
        </li>
        <li class="list-group-item list-group-item-success">CSS</li>
        <li class="list-group-item">javascript<span class="badge">最热</span></li>
        <li class="list-group-item">vue</li>
        <li class="list-group-item">Bootstrap</li>
    </ul>
    <div class="list-group">
        <a href="#" class="list-group-item">HTML</a>
        <a href="#" class="list-group-item">CSS</a>
        <a href="#" class="list-group-item">javascript<span class="badge">最热</span></a>
        <a href="#" class="list-group-item">vue</a>
    </div>
    <div class="list-group">
        <button class="list-group-item">HTML</button>
        <button class="list-group-item">CSS</button>
        <button class="list-group-item">javascript<span class="badge">最热</span></button>
        <button class="list-group-item">vue</button>
    </div>
</div>

希望这篇文章对大家有所帮助，可以的话帮忙点亮下旁边的小手，让更多人看到，

如果上述代码有错误和不足，请评论或私信，我好及时改正。