Bootstrap响应式Web前端开发
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.2.3 响应式表格

同样，通过添加类名还可以实现响应式表格的创建。响应式表格就是能根据浏览器屏幕的尺寸自动调节大小的表格，例如图2-34和图2-35所示的就是Bootstrap实现的同一表格在iPhone 6屏幕中和iPad屏幕中的不同样式。使用Bootstrap创建响应式表格仅需添加类名.table-responsive即可。此外，还可以使用.table-responsive sm、.table-responsive-md、.table-responsive-lg、.table-responsive-xl等来设置各屏幕尺寸下表格的样式，具体说明如下。

响应式表格

图2-34　iPhone 6屏幕中表格的样式

图2-35　iPad屏幕中表格的样式

• .table-responsive-sm：当浏览器窗口宽度小于575.98px且浏览器窗口中无法放置表格所有内容时，显示滚动条。

• .table-responsive-md：当浏览器窗口宽度小于767.98px且浏览器窗口中无法放置表格所有内容时，显示滚动条。

• .table-responsive-lg：当浏览器窗口宽度小于991.98px且浏览器窗口中无法放置表格所有内容时，显示滚动条。

• .table-responsive-xl：当浏览器窗口宽度小于1199.98px且浏览器窗口中无法放置表格所有内容时，显示滚动条。

注意

设置响应式表格需要在表格的外层添加<div>，然后在<div>标签中添加以上类名，而并非在<table>标签中直接添加。

【例2-25】使用Bootstrap制作高考成绩信息表，并且设置表格为响应式表格。具体代码如下：

<div class=" table-responsive-lg table-responsive-md table-responsive-sm table-responsive-xl">
   <table class="table">
      <thead>
      <tr class="table-primary">
         <td>姓名</td>
         <td>语文</td>
         <td>数学</td>
         <td>英语</td>
         <td>历史</td>
         <td>地理</td>
         <td>政治</td>
         <td>化学</td>
         <td>生物</td>
         <td>物理</td>
      </tr>
      </thead>
      <tbody>
      <tr class="table-dark">
         <td>阿毛</td>
         <td>118</td>
         <td>119</td>
         <td>134</td>
         <td>80</td>
         <td>86</td>
         <td>70</td>
         <td>90</td>
         <td>80</td>
         <td>97</td>
      </tr>
      <tr class="table-warning">
         <td>脆猫</td>
         <td>114</td>
         <td>130</td>
         <td>110</td>
         <td>80</td>
         <td>85</td>
         <td>92</td>
         <td>86</td>
         <td>87</td>
         <td>87</td>
      </tr>
     <!-- 省略相似代码-->
      </tbody>
   </table>
</div>

在浏览器中运行本例时，当屏幕宽度大于或等于575.98px时，其运行效果如图2-36所示；反之，效果如图2-37所示。

图2-36　浏览器宽度大于或等于575.98px时的表格

图2-37　浏览器宽度小于575.98px时的表格

上一章目录下一章