不二如是 发表于 2023-6-16 19:01:10

04 - 文本样式之「列表类」



对于列表元素，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>
效果：



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

注意一点：

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


这位鱼油，如果喜欢本帖子，请订阅>>> 专辑 <<<（不喜欢更要订阅{:10_278:} ）

官方 Web 课程：

https://www.bilibili.com/video/BV1QW411N762

中英文泡椒 发表于 2023-6-16 19:07:37

学起来，感谢分享

Threebody1 发表于 2023-6-16 20:15:30

学起来，感谢分享鱼币

歌者文明清理员 发表于 2023-6-16 20:16:54

- Start learning. Thank for sharing YuBi.

zsy0226 发表于 2023-6-16 20:51:43

学起来，感谢分享{:5_106:}

sfqxx 发表于 2023-6-16 21:01:53

学起来，感谢分享

sfqxx_小 发表于 2023-6-16 21:02:22

学起来，感谢分享

zhangjinxuan 发表于 2023-6-16 21:42:43

学起来，感谢分享

zhangjinxuan 发表于 2023-6-16 21:43:52

非常实用{:10_275:}

myd0311 发表于 2023-6-16 21:54:16

学起来，感谢分享

kerln888 发表于 2023-6-17 08:44:53

学起来，感谢分享

kerln888 发表于 2023-6-17 08:46:37

{:10_279:}{:10_279:}{:10_279:}{:10_279:}

kerln888 发表于 2023-6-17 08:47:06

。。。这

一点沙 发表于 2023-6-17 10:18:16

学起来，感谢鱼币

yinda_peng 发表于 2023-6-17 11:14:36

学起来，感谢分享

Axiujiu 发表于 2023-6-17 20:47:03

学起来，感谢分享，做回归分析总用stata跑，这回可以用python了

a905448839 发表于 2023-6-18 18:14:38

学起来，感谢分享
页: [1]
查看完整版本: 04 - 文本样式之「列表类」