bootstrap入门【表格】

bootstrap入门【表格】_第1张图片
<link href="bootstrap.min.css" rel="stylesheet">  导入bootstrap的外部样式表

<thead>
    <tr>
        <th>表格标题</th>
        <th>表格标题</th>
        <th>表格标题</th>
    </tr>
</thead>      表头

<tbody>
    <tr class="info">
        <th>表格单元格</th>
        <th>表格单元格</th>
        <th>表格单元格</th>
    </tr>
</tbody>      表格内容

table-striped 斑马线
table-bordered 边框
table-hover 鼠标响应
table-condensed 浓缩布局
table-responsive 在div中,响应式布局

 
单元格颜色:
class="info" 蓝色
class="danger" 红色
class-="warning" 黄色
class="active" 选中
class="success" 绿色
 
 
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="table-responsive">
        <!--<table class="table table-striped table-bordered table-hover table-condensed">-->
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>表格标题</th>
                    <th>表格标题</th>
                    <th>表格标题</th>
                </tr>
            </thead>
            <tbody>
                <tr class="info">
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                </tr>
                <tr class="danger">
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                </tr>
                <tr class-="warning">
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                </tr>
                <tr class="active">
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                </tr>
                <tr class="success">
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                    <th>表格单元格</th>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>




你可能感兴趣的:(bootstrap入门【表格】)