Bootstrap-表格

最新推荐文章于 2021-12-03 20:39:36 发布

幸运的菇凉

最新推荐文章于 2021-12-03 20:39:36 发布

阅读量181

点赞数

分类专栏：学习心得

本文链接：https://blog.csdn.net/qq_27626645/article/details/78808453

版权

学习心得专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body style="margin: 50px" class="table-responsive"><!--表格父元素设置响应式，小于768px出现边框-->
    <table class="table table-striped table-bordered table-hover"><!--隔行背景颜色改变-->
        <thread>
            <tr>
                <th>咳咳咳</th>
                <th>咳咳咳</th>
                <th>咳咳咳</th>

            </tr>

        </thread>
        <tbody>
        <!--active鼠标悬停在单元格-->
        <!--success标识成功或积极的动作-->
        <!--info标识普通的提示信息和动作-->
        <!--Warning标识警告-->
        <!--danger表示危险潜在的带来的负面影响-->
            <tr class="info sr-only"><!--sr-only隐藏某一行-->
                <td>1</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
        </tbody>
    </table>
<!--按钮-->
<a href="#" class="btn btn-default">Link</a>
<input type="button" class="btn btn-default" value="按钮"/>
<button class="btn btn-default">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-info btn-lg">按钮</button>
<button class="btn btn-info btn-sm">按钮</button>
<button class="btn btn-default btn-xs">按钮</button>
<button class="btn btn-default btn-block">按钮</button><!--独占一行-->
<button class="btn btn-default btn-active">按钮</button><!--点击会有效果-->
<button class="btn btn-default  disabled">按钮</button><!--禁用-->



    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script><!--script:src快捷键  一般js加载慢，所以放在后面，先加载文档-->
</body>
</html>