bootstrap表格和按钮

最新推荐文章于 2023-05-31 08:45:59 发布

西门吹雪叶孤城

最新推荐文章于 2023-05-31 08:45:59 发布

阅读量1.3k

点赞数

分类专栏： bootstrap 文章标签： bootstrap 表格按钮 bootstrap表格 bootstrap按钮

本文链接：https://blog.csdn.net/yangying496875002/article/details/72331263

版权

bootstrap 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

表格和按钮(将body中的代码直接复制运行看效果)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>表格和按钮</title>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="css/main.css">
    <!--[if lt IE 9]>
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.min.js"></script>
  <![endif]-->

    <style>
        /*让表格中的内容全部居中*/
        table th,table td{
            text-align: center;
            vertical-align: middle;!important;
        }
    </style>
</head>
<body>
<!--<body class="table-responsive">-->

<!--<table class="table table-striped table-bordered table-hover">-->
<table class="table table-striped table-hover">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>21</td>
        </tr>
        <tr class="danger">
            <td>2</td>
            <td>李四</td>
            <td>男</td>
            <td>32</td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>男</td>
            <td>23</td>
        </tr>
        <tr>
            <td>4</td>
            <td class="active">刘六</td>
            <td>男</td>
            <td>22</td>
        </tr>
    </tbody>
</table>


<a href="#" class="btn btn-info">按钮</a>
<input type="button" value="按钮" class="btn btn-danger">
<button class="btn btn-default">按钮</button>
<button class="btn btn-default btn-lg">按钮</button>
<button class="btn btn-default btn-xs">按钮</button>
<button class="btn btn-default btn-xs active">按钮</button>
<button class="btn btn-default btn-xs btn-block">按钮</button>
<button class="btn btn-default btn-xs btn-block disabled">按钮</button>



<script src="lib/jquery/jquery.js"></script>
<script src="lib/bootstrap/js/bootstrap.js"></script>
<script src="js/main.js"></script>
</body>

</html>

西门吹雪叶孤城

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap表格和按钮

表格和按钮(将body中的代码直接复制运行看效果) 表格和按钮 /*让表格中的内容全部居中*/ table th,table td{ text-align: center; vertical-align:
复制链接

扫一扫