鱼C论坛

 找回密码
 立即注册
查看: 1065|回复: 16

[技术交流] 04 - 文本样式之「列表类」

[复制链接]
发表于 2023-6-16 19:01:10 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
0_0.png

对于列表元素,Bootstrap提供了两种排版样式:

  • 使用 .list-unstyled 类,其会去掉默认样式、移除左边距
  • 使用 .list-inline 类,其会将列表设置为内联样式,且需要结合 .list-inline-item 类进行使用

我们来演示下:
<h2>前端基础</h2>
    <ul class="list-unstyled">
        <li>HTML5</li>
        <li>CSS3
            <ul>
                <li>flexbox</li>
                <li class="list-unstyled">grid</li>
                <li>inline</li>
            </ul>
        </li>
        <li>JavaScript</li>
    </ul>

    <hr>
    <h2>前端框架</h2>
    <ul class="list-inline">
        <li class="list-inline-item">Bootstrap</li>
        <li class="list-inline-item">Vue</li>
        <li class="list-inline-item">FishC UI</li>
    </ul>
效果:

2023-06-16_18-59-10.png

整体代码的结构很清晰,大家自己阅读和理解。

注意一点:

.list-unstyled类只能移除直接子级的默认样式,嵌套列表中的默认样式不会被移除,其需要手动移除。



这位鱼油,如果喜欢本帖子,请订阅>>> 专辑 <<<(不喜欢更要订阅


官方 Web 课程:

评分

参与人数 2荣誉 +10 贡献 +3 收起 理由
睦ちゃん她爹 + 5 + 3 鱼C有你更精彩^_^
zhangjinxuan + 5

查看全部评分

本帖被以下淘专辑推荐:

想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2023-6-16 19:07:37 | 显示全部楼层
学起来,感谢分享
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-16 20:15:30 | 显示全部楼层

回帖奖励 +2 鱼币

学起来,感谢分享鱼币
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-16 20:16:54 | 显示全部楼层

回帖奖励 +2 鱼币

- Start learning. Thank for sharing YuBi.
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-16 20:51:43 | 显示全部楼层

回帖奖励 +2 鱼币

学起来,感谢分享
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-16 21:01:53 | 显示全部楼层

回帖奖励 +2 鱼币

学起来,感谢分享
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-16 21:02:22 | 显示全部楼层

回帖奖励 +2 鱼币

学起来,感谢分享
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-16 21:42:43 | 显示全部楼层
学起来,感谢分享
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-16 21:43:52 | 显示全部楼层

回帖奖励 +2 鱼币

非常实用
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-16 21:54:16 | 显示全部楼层

回帖奖励 +2 鱼币

学起来,感谢分享
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-17 08:44:53 | 显示全部楼层
学起来,感谢分享
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-17 08:46:37 | 显示全部楼层
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2023-6-17 08:47:06 | 显示全部楼层

回帖奖励 +2 鱼币

。。。这
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复

使用道具 举报

发表于 2023-6-17 10:18:16 | 显示全部楼层

回帖奖励 +2 鱼币

学起来,感谢鱼币
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-17 11:14:36 | 显示全部楼层

回帖奖励 +2 鱼币

学起来,感谢分享
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-17 20:47:03 | 显示全部楼层
学起来,感谢分享,做回归分析总用stata跑,这回可以用python了
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2023-6-18 18:14:38 | 显示全部楼层
学起来,感谢分享
想知道小甲鱼最近在做啥?请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-11-23 19:41

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表