7.tables & pagination

table

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>jdoe@gmail.com</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Will</td>
            <td>Johnson</td>
            <td>will@yahoo.com</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Shannon</td>
            <td>Williams</td>
            <td>shannon@yahoo.com</td>
        </tr>
    </tbody>
</table>

inverse/dark table

<table class="table table-dark">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>jdoe@gmail.com</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Will</td>
            <td>Johnson</td>
            <td>will@yahoo.com</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Shannon</td>
            <td>Williams</td>
            <td>shannon@yahoo.com</td>
        </tr>
    </tbody>
</table>

table head inverse

<table class="table">
    <thead class="thead-dark">
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>jdoe@gmail.com</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Will</td>
            <td>Johnson</td>
            <td>will@yahoo.com</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Shannon</td>
            <td>Williams</td>
            <td>shannon@yahoo.com</td>
        </tr>
    </tbody>
</table>

striped table

<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>jdoe@gmail.com</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Will</td>
            <td>Johnson</td>
            <td>will@yahoo.com</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Shannon</td>
            <td>Williams</td>
            <td>shannon@yahoo.com</td>
        </tr>
    </tbody>
</table>

bordered table

<table class="table table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>jdoe@gmail.com</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Will</td>
            <td>Johnson</td>
            <td>will@yahoo.com</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Shannon</td>
            <td>Williams</td>
            <td>shannon@yahoo.com</td>
        </tr>
    </tbody>
</table>

borderless table

<table class="table table-borderless">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>jdoe@gmail.com</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Will</td>
            <td>Johnson</td>
            <td>will@yahoo.com</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Shannon</td>
            <td>Williams</td>
            <td>shannon@yahoo.com</td>
        </tr>
    </tbody>
</table>

hover table

<table class="table table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>jdoe@gmail.com</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Will</td>
            <td>Johnson</td>
            <td>will@yahoo.com</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Shannon</td>
            <td>Williams</td>
            <td>shannon@yahoo.com</td>
        </tr>
    </tbody>
</table>

contextual class

<table class="table">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-success">
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>jdoe@gmail.com</td>
        </tr>
        <tr class="table-danger">
            <th scope="row">2</th>
            <td>Will</td>
            <td>Johnson</td>
            <td>will@yahoo.com</td>
        </tr>
        <tr class="table-warning">
            <th scope="row">3</th>
            <td>Shannon</td>
            <td>Williams</td>
            <td>shannon@yahoo.com</td>
        </tr>
    </tbody>
</table>

small table

<table class="table table-sm table-striped table-hover">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>jdoe@gmail.com</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Will</td>
            <td>Johnson</td>
            <td>will@yahoo.com</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Shannon</td>
            <td>Williams</td>
            <td>shannon@yahoo.com</td>
        </tr>
    </tbody>
</table>

responsive table - scrollbars

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Email</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>John</td>
                <td>Doe</td>
                <td>jdoe@gmail.com</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Will</td>
                <td>Johnson</td>
                <td>will@yahoo.com</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Shannon</td>
                <td>Williams</td>
                <td>shannon@yahoo.com</td>
            </tr>
        </tbody>
    </table>
</div>

pagination

<nav>
    <ul class="pagination">
        <li class="page-item">
            <a class="page-link" href="#">Previous</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">Next</a>
        </li>
    </ul>
</nav>

pagination centered

<nav>
    <ul class="pagination justify-content-center">
        <li class="page-item disabled">
            <a class="page-link" href="#">Previous</a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">Next</a>
        </li>
    </ul>
</nav>

pagination right

<nav>
    <ul class="pagination justify-content-end">
        <li class="page-item disabled">
            <a class="page-link" href="#">Previous</a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">Next</a>
        </li>
    </ul>
</nav>

pagination large

<nav>
    <ul class="pagination pagination-lg">
        <li class="page-item disabled">
            <a class="page-link" href="#">Previous</a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">Next</a>
        </li>
    </ul>
</nav>

pagination small

<nav>
    <ul class="pagination pagination-sm">
        <li class="page-item disabled">
            <a class="page-link" href="#">Previous</a>
        </li>
        <li class="page-item active">
            <a class="page-link" href="#">1</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">2</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">3</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="#">Next</a>
        </li>
    </ul>
</nav>

with arrows

<nav>
    <ul class="pagination">
        <li class="page-item">
            <a href="#" class="page-link">
                <span>&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">1</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">2</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">3</a>
        </li>
        <li class="page-item">
            <a href="#" class="page-link">
                <span>&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>
    </ul>
</nav>

posted @ 2018-09-10 20:02 ret 阅读(69) 评论(0) 收藏举报

刷新页面返回顶部

ret

7.tables & pagination

公告