bootstrap专栏 06.组件 06.列表组和旋转图标

# 06.列表组和旋转图标

[toc]{type: "ol", level: [3]}

### 列表组
```html
<ul class="list-group list-group-horizontal-lg">
    <li class="list-group-item active w-25">列表组1</li>
    <li class="list-group-item w-25">列表组2</li>
    <li class="list-group-item w-25">列表组3</li>
    <li class="list-group-item w-25">列表组3</li>
</ul>
```
![列表组和旋转图标-列表组-大](06.列表组和旋转图标-列表组-大.png)
![列表组和旋转图标-列表组-小](06.列表组和旋转图标-列表组-小.png)


### 旋转图标
- spinner-border
> 空心图标
- spinner-grow
> 实心图标
```html
<div class="spinner-border text-success"></div>
<div class="spinner-grow text-success"></div>
```
![列表组和旋转图标-旋转图标-1](06.列表组和旋转图标-旋转图标-1.png)
![列表组和旋转图标-旋转图标-1](06.列表组和旋转图标-旋转图标-2.png)