Bootstrap-表格

来源：互联网发布：西装面料知乎编辑：程序博客网时间：2024/06/07 07:20
<!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>
阅读全文
0 0