bootstrap系列-5.BooStrap表格

奇点码农

已于 2022-08-26 09:08:16 修改

阅读量318

点赞数

分类专栏： bootStrap 文章标签： css3 前端 css

于 2022-08-24 20:06:26 首次发布

本文链接：https://blog.csdn.net/cdc8596/article/details/126511865

版权

bootStrap 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本节主要讲解BootStrap表格使用以及样式,最下面是运行效果图,讲解内容以备注的形式讲解,主要包括表格的边框风格样式等

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>BootStrap表格</title>
	<meta charset="utf-8" />
    <link href="bootstrap.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <!--table-condensed:表格为紧凑型表格,行高变小-->
        <!--table-striped:表格格式为条纹状表格(效果为灰白灰...)-->
        <!--table-bordered:为表格的边框效果-->
        <!--table-hover:鼠标经过表格时的效果-->
        <table class="table table-condensed table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th>标题1</th>
                    <th>标题2</th>
                    <th>标题3</th>
                </tr>
            </thead>
            <tbody>
                <tr class="active">
                    <td>单元格1</td>
                    <td>单元格2</td>
                    <td>单元格3</td>
                </tr>
                <tr class="success">
                    <td>单元格1</td>
                    <td>单元格2</td>
                    <td>单元格3</td>
                </tr>
                <tr class="info">
                    <td>单元格1</td>
                    <td>单元格2</td>
                    <td>单元格3</td>
                </tr>
                <tr class="warning">
                    <td>单元格1</td>
                    <td>单元格2</td>
                    <td>单元格3</td>
                </tr>
                <tr class="danger">
                    <td>单元格1</td>
                    <td>单元格2</td>
                    <td>单元格3</td>
                </tr>
                <tr>
                    <td>单元格1</td>
                    <td>单元格2</td>
                    <td>单元格3</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!--table-responsive:表示可以浏览器即时的变化改变表格的大小-->
    <div class="table-responsive">
        <table class="table table-condensed table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th>标题1</th>
                    <th>标题2</th>
                    <th>标题3</th>
                </tr>
            </thead>
            <tbody>
                <tr class="active">
                    <td>单元格1单元格1单元格1单元格1单元格1单元格1单元格1单元格1单元格1单元格1</td>
                    <td>单元格2</td>
                    <td>单元格3</td>
                </tr>               
            </tbody>
        </table>
    </div>
</body>
</html>