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

不二如是

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

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

我们来演示下：

1. <h2>前端基础</h2>
   
2.     <ul class="list-unstyled">
   
3.         <li>HTML5</li>
   
4.         <li>CSS3
   
5.             <ul>
   
6.                 <li>flexbox</li>
   
7.                 <li class="list-unstyled">grid</li>
   
8.                 <li>inline</li>
   
9.             </ul>
   
10.         </li>
    
11.         <li>JavaScript</li>
    
12.     </ul>
    
13. 
    
14.     <hr>
    
15.     <h2>前端框架</h2>
    
16.     <ul class="list-inline">
    
17.         <li class="list-inline-item">Bootstrap</li>
    
18.         <li class="list-inline-item">Vue</li>
    
19.         <li class="list-inline-item">FishC UI</li>
    
20.     </ul>

复制代码

效果：



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

注意一点：

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

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

官方 Web 课程：

中英文泡椒

学起来，感谢分享

Threebody1

学起来，感谢分享鱼币

歌者文明清理员

- Start learning. Thank for sharing YuBi.

zsy0226

学起来，感谢分享

sfqxx

学起来，感谢分享

sfqxx_小

学起来，感谢分享

zhangjinxuan

学起来，感谢分享

zhangjinxuan

非常实用

myd0311

学起来，感谢分享

kerln888

学起来，感谢分享

kerln888

kerln888

。。。这

一点沙

学起来，感谢鱼币

yinda_peng

学起来，感谢分享

Axiujiu

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

a905448839

学起来，感谢分享