Bootstrap入门（四）表格

首页 > 代码库 > Bootstrap入门（四）表格

2024-08-12 12:20:34 218人阅读

Bootstrap入门（四）表格

<table>标签

首先，引入bootstrap的css文件，然后表格内容放在一个class为table的<table>标签中（class="table"补足了padding和水平方向上的分割线）

<table class="table">  ...</table>

1.几个不同样式的表格（修改<table>标签中的class）

1.1“table”普通

           <table class="table">                <thead>                    <tr>                        <th>biaoti</th>                        <th>biaoti</th>                        <th>biaoti</th>                    </tr>                </thead>                <tbody>                    <tr>                        <th>danyuange</th>                        <th>danyuange</th>                        <th>danyuange</th>                    </tr>                    <tr>                        <th>danyuange</th>                        <th>danyuange</th>                        <th>danyuange</th>                    </tr>                    <tr>                        <th>danyuange</th>                        <th>danyuange</th>                        <th>danyuange</th>                    </tr>                </tbody>            </table>

效果：

技术分享

1.2<table>标签中的class 改为“ table table-striped ”两行之前有不同的颜色（“斑马线”）

效果：

1.3<table>标签中的class 改为 “ table table-striped table-bordered ”多了水平方向上的分割线和边框

效果：

1.4<table>标签中的class 改为 “ table table-striped table-bordered table-hover ”鼠标经过、悬停时有效果

2.状态类（在<tr>标签中修改class）

跟之前的类似，有active，info，success，warning，danger等来为单元格添加标识

                <table class="table table-striped table-bordered">                    <thead>                        <tr class="active">                            <th>biaoti</th>                            <th>biaoti</th>                            <th>biaoti</th>                        </tr>                    </thead>                    <tbody>                        <tr class="success">                            <th>danyuange</th>                            <th>danyuange</th>                            <th>danyuange</th>                        </tr>                        <tr class="info">                            <th>danyuange</th>                            <th>danyuange</th>                            <th>danyuange</th>                        </tr>                        <tr class="warning">                            <th>danyuange</th>                            <th>danyuange</th>                            <th>danyuange</th>                        </tr>                        <tr class="danger">                            <th>danyuange</th>                            <th>danyuange</th>                            <th>danyuange</th>                        </tr>                    </tbody>                </table>