bootstrap4--常用布局组件一

目录

列表组

一般列表项 

链接列表项 

按钮

单个按钮

按钮组

分页

---

列表组

        创建普通列表组方式：

1.<ul>元素添加.list-group类

2.<li>元素添加.list-group-item类

一般列表项 

        对列表项，我们可以通过 类的设置实现更多功能

●.active：设置激活状态列表项

●.disabled：设置禁用列表项

●.list-group-flush：删除列表边框和圆角

●.list-group-horizontal：创建水平列表组

●.list-group-item-*：设置列表项颜色。*代表诸如success、info等有代表意义的颜色类

         测试代码：

    <div class="container col-3">
        <!-- 列表组 -->
        <p>列表组</p>
        <ul class="list-group">
            <li class="list-group-item active">1</li>
            <li class="list-group-item">2</li>
            <li class="list-group-item disabled">3</li>
        </ul>
        <br>
        <!-- 水平列表组 -->
        <p>水平列表组</p>
        <ul class="list-group list-group-horizontal">
            <li class="list-group-item">1</li>
            <li class="list-group-item">2</li>
            <li class="list-group-item">3</li>
        </ul>
        <br>
        <!-- 移除列表边框 -->
        <p>移除列表边框</p>
        <ul class="list-group list-group-flush">
            <li class="list-group-item">1</li>
            <li class="list-group-item">2</li>
            <li class="list-group-item">3</li>
        </ul>
        <br>
        <!-- 多种颜色列表项 -->
        <p>多种颜色列表项</p>
        <ul class="list-group">
            <li class="list-group-item list-group-item-success">success</li>
            <li class="list-group-item list-group-item-info">info</li>
            <li class="list-group-item list-group-item-primary">primary</li>
        </ul>
    </div>

        实现效果：

链接列表项 

        想要创建一个链接的列表项，将<ul>替换为<div>，<li>替换为