Bootstrap中table的用法

BOOTSTRAP中table的用法

1.table结构

<table >
    <caption>base table layoutcaption>
    <thead>
        <tr >
            <th>NAMEth>
           
        tr>
    thead>
    
    <tbody>
        <tr>
            <td>XIAOHONGtd>
         
        tr>

    tbody>

table>

2. class in table

类	描述
.table	为任意 添加基本样式 (只有横向分隔线)
.table-striped	在 tbody 内添加斑马线形式的条纹 ( IE8 不支持)
.table-bordered	为所有表格的单元格添加边框
.table-hover	在 tbody 内的任一行启用鼠标悬停状态
.table-condensed	让表格更加紧凑

.table

<table class="table" >
    <caption>base table layoutcaption>
    <thead>
  	 ...    
    thead>
    <tbody>
       ...
    tbody>

table>

.table-striped

<table class="table table-striped" >
    <caption>base table layoutcaption>
    <thead>
  	 ...    
    thead>
    <tbody>
       ...
    tbody>

table>

3. class in tr td th

类	描述
.active	将悬停的颜色应用在行或者单元格上
.success	表示成功的操作
.info	表示信息变化的操作
.warning	表示一个警告的操作
.danger	表示一个危险的操作

<table class="table table-hover" >
    <caption>base table layoutcaption>
    <thead>
        <tr class="active">
            <th>NAMEth>
            <th>AGEth>
            <th>GENDERth>
        tr>
    thead>
    <tbody>
        <tr class="info">
            <td>XIAOHONGtd>
            <td>14td>
            <td>MALEtd>
        tr>

        <tr class="warning">
            <td >JHONtd>
            <td>15td>
            <td>FEMALEtd>
        tr>

        <tr class="danger">
            <td>XIAOHONGtd>
            <td>14td>
            <td>MALEtd>
        tr>

        <tr >
            <td class="active">JHONtd>
            <td class="danger">15td>
            <td class="success">FEMALEtd>
        tr>
    tbody>

table>