Bootstrap 布局组件(全)(7)

Bootstrap 中的多媒体对象(Media Object)。这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐。媒体对象可以用更少的代码来实现媒体对象与文字的混排。

媒体对象轻量标记、易于扩展的特性是通过向简单的标记应用 class 来实现的。你可以在 HTML 标签中添加以下两种形式来设置媒体对象:

A、.media:该 class 允许将媒体对象里的多媒体(图像、视频、音频)浮动到内容区块的左边或者右边。

B、.media-list:如果你需要一个列表,各项内容是无序列表的一部分,可以使用该 class。可用于评论列表与文章列表。

<div> <a href="#"> <img src="https://www.jb51.net/wp-content/uploads/2014/06/64.jpg" alt="媒体对象"> </a> <div> <h4>媒体标题</h4> 这是一些示例文本。这是一些示例文本。 </div> </div>

18、Bootstrap 列表组

列表组件用于以列表形式呈现复杂的和自定义的内容。创建一个基本的列表组的步骤如下:

A、向元素 <ul> 添加 class .list-group。

B、向 <li> 添加 class .list-group-item。

<ul> <li>免费域名注册</li> <li>免费 Window 空间托管</li> </ul>

(1)、向列表组添加徽章

我们可以向任意的列表项添加徽章组件,它会自动定位到右边。只需要在 <li> 元素中添加 <span> 即可。

<ul> <li>免费域名注册</li> <li><span>新</span> 24*7 支持 </li> </ul>

(2)、向列表组添加链接

通过使用锚标签代替列表项,我们可以向列表组添加链接。我们需要使用 <div> 代替 <ul> 元素。

<a href="#">24*7 支持</a>

<a href="#">免费 Window 空间托管</a>

(3)、向列表组添加自定义内容

我们可以向上面已添加链接的列表组添加任意的 HTML 内容。

19、Bootstrap 面板(Panels)

Bootstrap 面板(Panels)。面板组件用于把 DOM 组件插入到一个盒子中。创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .panel-default 即可,

<div> <div> 这是一个基本的面板 </div> </div>

(1)、面板标题

我们可以通过以下两种方式来添加面板标题:

A、使用 .panel-heading class 可以很简单地向面板添加标题容器。

B、使用带有 .panel-title class 的 <h1>-<h6> 来添加预定义样式的标题。

<div> <div>不带 title 的面板标题</div> <div>面板内容</div> </div>

(2)、面板脚注

我们可以在面板中添加脚注,只需要把按钮或者副文本放在带有 class .panel-footer 的 <div> 中即可。

<div> <div>这是一个基本的面板</div> <div>面板脚注</div> </div>

(3)、带语境色彩的面板

使用语境状态类 panel-primary、panel-success、panel-info、panel-warning、panel-danger,来设置带语境色彩的面板。

<div> <div> <h3>面板标题</h3> </div> <div> 这是一个基本的面板</div> </div>

(4)、带表格的面板

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

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