响应式网站的引导网格或表格
本文关键字：网格 表格 网站 响应 | 更新日期: 2023-09-27 18:16:53
我希望将C#ASP.NET MVC 3 web应用程序转换为MVC 5。在这个过程中，我希望通过使用bootstrap来创建一个响应性更强的表。使用带有标签的引导网格系统更好吗？还是使用表更好？是否有方法将网格系统中的列数增加到大于12的数字？
注：新应用程序将使用bootstrap 3.2.0、jquery 1.11.1、mvc 5.2.0n剃刀3.2.0。应用程序必须在IE8上正常工作(因此，必须留在jquery1.X分支上(。
下面是当前应用程序的一个示例表，我不确定如何格式化该表，以便在响应界面中具有类似的外观。
<table class="Assignmenttable">
<tbody>
<tr class="td">
<th id="Assignment_Title" colspan="4" style="width:20%"> </th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th id="Assignment_Title" colspan="9" style="width:30%"> First</th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th id="Assignment_Title" colspan="9" style=" width:30%"> Second</th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th id="Assignment_Title" colspan="4" style="width:11%"> Complete</th>
</tr>
<tr class="td">
<th rowspan="3" colspan="1" style="font-size: medium">Assignment</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Woot</th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 1</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 2</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 3</th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 4</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 5</th>
<th colspan="3" rowspan="2" style="font-size: medium; min-width:12%">Task 6</th>
<th id="blank" class="blank" colspan="1" rowspan="1">
</th>
<th colspan="4" rowspan="2" style="font-size: medium; min-width:12%">Task 7</th>
</tr>
<tr class="td">
<th id="blank" class="blank" colspan="1">
</th>
<th id="blank" class="blank" colspan="1">
</th>
<th id="blank" class="blank" colspan="1">
</th>
</tr>
<tr class="td">
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th id="blank" class="blank" colspan="1" rowspan="1"></th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th id="blank" class="blank" colspan="1" rowspan="1"></th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th></th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
<th id="blank" class="blank" colspan="1" rowspan="1"></th>
<th> P1 </th>
<th colspan=""> P2</th>
<th id="topBarDates">PL</th>
<th id="topBarDates">LE</th>
</tr>
<!-- This row is for each assignment entry-->
<tr class="td" style="height: 60px; max-height: 100px">
<td id="td" class="td" style="width: 350px">
Project 2
</td>
<td id="LongDelay" align="center">
<input id="item_Shipped" name="item.task1" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task1" type="hidden" value="false">
</td>
<td id="ProjectDate">11-Apr-13</td>
<td id="ProjectDate">17-Aug-13</td>
<td id="blank" class="blank" colspan="1"></td>
<td id="LongDelay" align="center">
<input checked="checked" id="item_taskComplete" name="item.taskComplete" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskComplete" type="hidden" value="false">
</td>
<td id="ProjectDate">
05-Apr-14
</td>
<td id="ProjectDate">
04-Aug-14
</td>
<td id="LongDelay" align="center">
<input id="item_taskComplete" name="item.task" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task" type="hidden" value="false">
</td>
<td id="ProjectDate">18-Apr-14</td>
<td id="ProjectDate">06-Aug-14</td>
<td id="LongDelay" align="center">
<input checked="checked" id="item_taskComplete" name="item.taskComplete" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskComplete" type="hidden" value="false">
</td>
<td id="ProjectDate">
21-Feb-14
</td>
<td id="ProjectDate">
15-Apr-14
</td>
<td id="blank" class="blank" colspan="1"></td>
<td id="SlightDelay" align="center">
<input checked="checked" id="item_taskComplete" name="item.taskComplete" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskComplete" type="hidden" value="false">
</td>
<td title="" id="ProjectDate">28-Mar-14</td>
<td title="" id="ProjectDate">11-Apr-14</td>
<td id="LongDelay" align="center">
<input id="item_task6" name="item.task6" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task6" type="hidden" value="false">
</td>
<td title="" id="ProjectDate">15-Apr-14</td>
<td title="" id="ProjectDate">28-Aug-14</td>
<td colspan="3"></td>
<td id="blank" class="blank" colspan="1"></td>
<td id="LongDelay" align="center">
<input id="item_taskAccepted" name="item.taskAccepted" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.taskAccepted" type="hidden" value="false">
</td>
<td id="LongDelay" align="center">
<input id="item_task2Accepted" name="item.task2Accepted" onclick="return false" onkeydown="return false" type="checkbox" value="true"><input name="item.task2Accepted" type="hidden" value="false">
</td>
<td id="ProjectDate">30-Apr-14 </td>
<td id="ProjectDate">07-Aug-14</td>
</tr>
<tr style="height: 4px">
<th id="blank" class="blank" colspan="29"></th>
</tr>
</tbody>
</table>
提前感谢您的建议！
您可以查看引导表。
在选择使用表格还是网格之间，这完全取决于您想要显示的内容。如果没有合适的例子，很难真正建议使用哪一个更好。
如果您想在代码中使用Bootstrap的表，那么只需为<table>元素放置一个.table类就可以了。然后，为了使其正确缩放，您需要删除附加到<th>、<tr>和<td>元素的内联样式。甚至连colspans。