我对twitter bootstrap网格中的各种选项以及它们如何组合起来感到困惑.
首先,你可以有一个普通的固定container,或者container-fluid.
然后,任何一个都可以包括普通row行或流体行row-fluid.也就是说,你可以拥有一个带有流体排的固定容器,或一个带有固定排的容器流体......
然后,您可以在其中包含"响应式"媒体查询.
我对这些事情如何相互作用感到困惑.但让我们从一个明显的例子开始.
但是,在我的浏览器中,在该示例页面本身上 - 两个网格的行为相同.也许是因为示例页面使用可选的响应式媒体查询？在两个网格示例中,如果我开始逐渐缩小我的浏览器窗口,则网格元素不会逐渐变窄 - 一旦达到某个(响应性)边界宽度,它们会捕捉到更小的尺寸,并再次在更大的边界宽度处.但是普通的"固定"示例和"流动"示例在这里表现完全相同 - 那么差异究竟是什么呢？
fixed-width fluid-layout responsive-design twitter-bootstrap
我试图在AngularJS中使用粘性页眉和页脚创建一个表.我设法做到了; 这是一个Plunker演示和代码:
<body ng-controller="MainCtrl as ctrl">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
<th>
Column5
</th>
</tr>
</thead>
<tbody>
<tr class="info" ng-repeat="item in items">
<td>
{{item.name}}
</td>
<td>
{{item.type}}
</td>
<td>
{{item.value}}
</td>
<td>
{{item.code}}
</td>
<td>
{{item.id}}
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>
Column1
</th>
<th>
Column2
</th>
<th>
Column3
</th>
<th>
Column4
</th>
<th>
Column5
</th>
</tr>
</tfoot>
</table>
</body>
但唯一的问题是:
知道如何解决这个问题吗？