媒体

媒体对象有助于构建复杂且重复的组件，其中一些媒体与不环绕所述媒体的内容并置。此外，由于 flexbox，它只需两个必需的类即可实现此目的。

<div>
  <b-card>
    <b-media>
      <template #aside>
        <b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
      </template>

      <h5 class="mt-0">Media Title</h5>
      <p>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </p>
      <p>
        Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
        penatibus et magnis dis parturient montes, nascetur ridiculus mus.
      </p>

      <b-media>
        <template #aside>
          <b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
        </template>

        <h5 class="mt-0">Nested Media</h5>
        <p class="mb-0">
          Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
          faucibus.
        </p>
      </b-media>
    </b-media>
  </b-card>
</div>

<!-- b-media.vue -->

用法

<div>
  <b-media>
    <template #aside>
      <img src="..." alt="Media Aside">
    </template>

    <h2>Media Body</h2>
    <p>Some text</p>

    <!-- b-[Optional: add media children here for nesting] -->
  </b-media>
</div>

无正文（带子组件）

<div>
  <b-card>
    <b-media no-body>
      <b-media-aside vertical-align="center">
        <b-img blank blank-color="#ccc" width="64" height="128" alt="placeholder"></b-img>
      </b-media-aside>

      <b-media-body>
        <h5 class="mt-0">Media Title</h5>
        <p>
          Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante
          sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce
          condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
        </p>
        <p class="mb-0">
          Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis
          natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
        </p>

        <b-media>
          <template #aside>
            <b-img blank blank-color="#ccc" width="64" alt="placeholder"></b-img>
          </template>
          <h5 class="mt-0">Nested Media</h5>
          Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in
          faucibus.
        </b-media>
      </b-media-body>
    </b-media>
  </b-card>
</div>

<!-- b-media-no-body.vue -->

顺序

通过添加 right-align 属性来更改媒体对象中内容的顺序。

<div>
  <b-media right-align vertical-align="center">
    <template #aside>
      <b-img blank blank-color="#ccc" width="80" alt="placeholder"></b-img>
    </template>
    <h5 class="mt-0 mb-1">Media object</h5>
    <p class="mb-0">
      Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
      Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac
      nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
    </p>
  </b-media>
</div>

<!-- b-media-order.vue -->

嵌套

你可以通过在父级正文中包含另一个 <b-media> 轻松地嵌套媒体对象。

垂直对齐

可以使用 vertical-align 属性将侧边栏垂直对齐，设置为 top、center 或 end。默认对齐方式为 top。

媒体列表

由于媒体对象几乎没有结构要求，因此你可以将此组件用作 HTML 列表中的列表项。在你的 <ul> 或 <ol> 中，添加类 list-unstyled 以移除任何浏览器默认列表样式，然后使用 <b-media> 组件，其中 tag 属性设置为 li。一如既往，在需要时使用间距实用工具进行微调。

<div>
  <ul class="list-unstyled">
    <b-media tag="li">
      <template #aside>
        <b-img blank blank-color="#abc" width="64" alt="placeholder"></b-img>
      </template>
      <h5 class="mt-0 mb-1">List-based media object</h5>
      <p class="mb-0">
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </p>
    </b-media>

    <b-media tag="li" class="my-4">
      <template #aside>
       <b-img blank blank-color="#cba" width="64" alt="placeholder"></b-img>
      </template>

      <h5 class="mt-0 mb-1">List-based media object</h5>
      <p class="mb-0">
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </p>
    </b-media>

    <b-media tag="li">
      <template #aside>
        <b-img blank blank-color="#bac" width="64" alt="placeholder"></b-img>
      </template>

      <h5 class="mt-0 mb-1">List-based media object</h5>
      <p class="mb-0">
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin.
        Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc
        ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </p>
    </b-media>
  </ul>
</div>

<!-- b-media-list.vue -->

组件参考

`<b-media>`

功能组件

查看源代码

<b-media> 属性
<b-media> 插槽

属性

所有属性默认值均可全局配置。

属性	类型	默认值	说明
`no-body`	`布尔值`	`false`	设置后，不会在默认插槽内容周围呈现 'b-media-body' 包装器
`right-align`	`布尔值`	`false`	在右侧呈现 'aside' 插槽。默认在左侧
`tag`	`字符串`	`'div'`	指定要呈现的 HTML 标签，而不是默认标签
`vertical-align`	`字符串`	`'top'`	'aside' 插槽的垂直对齐方式：'start'（或 'top'），'center' 或 'end'（或 'bottom'）

插槽

名称	说明
`aside`	媒体侧边栏
`default`	要放置在媒体元素中的内容

`<b-media-aside>`

功能组件

查看源代码

<b-media-aside> 属性
<b-media-aside> 插槽

属性

所有属性默认值均可全局配置。

属性	类型	默认值	说明
`right`	`布尔值`	`false`	将“aside”定位在右侧。默认在左侧
`tag`	`字符串`	`'div'`	指定要呈现的 HTML 标签，而不是默认标签
`vertical-align`	`字符串`	`'top'`	aside 的垂直对齐方式：“start”（或“top”）、“center”或“end”（或“bottom”）

插槽

名称	说明
`default`	要放置在媒体 aside 中的内容

`<b-media-body>`

功能组件

查看源代码

<b-media-body> 属性
<b-media-body> 插槽

属性

所有属性默认值均可全局配置。

属性	类型	默认值	说明
`tag`	`字符串`	`'div'`	指定要呈现的 HTML 标签，而不是默认标签

插槽

名称	说明
`default`	要放置在媒体正文中的内容

导入各个组件

你可以通过以下命名导出将各个组件导入到你的项目中

组件	命名导出	导入路径
`<b-media>`	`BMedia`	`bootstrap-vue`
`<b-media-aside>`	`BMediaAside`	`bootstrap-vue`
`<b-media-body>`	`BMediaBody`	`bootstrap-vue`

示例

import { BMedia } from 'bootstrap-vue'
Vue.component('b-media', BMedia)

作为 Vue.js 插件导入

此插件包含上面列出的所有各个组件。插件还包含任何组件别名。

命名导出	导入路径
`MediaPlugin`	`bootstrap-vue`

示例

import { MediaPlugin } from 'bootstrap-vue'
Vue.use(MediaPlugin)