当前位置:Gxlcms > html代码 > BootStrap学习(5)_多媒体对象&列表组_html/css_WEB-ITnose

BootStrap学习(5)_多媒体对象&列表组_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:3人阅读

一、多媒体对象

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

  • .media:该 class 允许将媒体对象里的多媒体(图像、视频、音频)浮动到内容区块的左边或者右边。
  • .media-list:如果你需要一个列表,各项内容是无序列表的一部分,可以使用该 class。可用于评论列表与文章列表。
  • 1.基本多媒体对象

                    

    效果:

    2.嵌套的媒体对象

                    

    效果:

    二、列表组

    列表组件用于以列表形式呈现复杂的和自定义的内容

  • 向元素
      添加 class .list-group
    • 添加 class .list-group-item
    • 可以向任意的列表项添加徽章组件,它会自动定位到右边。只需要在
    • 元素中添加 即可
    • 1.基本列表组

                      

      效果:

      2.向列表组添加链接

                      

      效果:

      3.自定义内容

                      

      效果:

  • 人气教程排行