Bootstrap 布局组件(全)(8)

为了在面板中创建一个无边框的表格,我们可以在面板中使用 class .table。假设有个 <div> 包含 .panel-body,我们可以向表格的顶部添加额外的边框用来分隔。如果没有包含 .panel-body 的 <div>,则组件会无中断地从面板头部移动到表格。

<div> <div> <h3>面板标题</h3> </div> <div>这是一个基本的面板 </div> <table> <th>产品</th><th>价格 </th> <tr><td>产品 A</td><td>200</td></tr> <tr><td>产品 B</td><td>400</td></tr> </table> </div>

(5)、带列表组的面板

我们可以在任何面板中包含列表组,通过在 <div> 元素中添加 .panel 和 .panel-default 类来创建面板,并在面板中添加列表组。

<div> <div>面板标题</div> <div> <p>这是一个基本的面板内容。</p> </div> <ul> <li>免费域名注册</li> <li>每年更新成本</li> </ul> </div>

20、Bootstrap Well

Well 是一种会引起内容凹陷显示或插图效果的容器 <div>。为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可。

<div>您好,我在 Well 中!</div>

(1)、尺寸大小

您可以使用可选类 well-lg 或 well-sm 来改变 Well 的尺寸大小。这两个类是与 .well 类结合使用的。这两个类会影响内边距(padding),根据使用的类,Well 会显示得更大或者更小。

<div>您好,我在大的 Well 中!</div>

<div>您好,我在小的 Well 中!</div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzswdy.html