Bootstrap媒体对象

    xiaoxiao2021-03-25  95

    Bootstrap媒体对象


    媒体对象默认样式

    1.新建一个demo02.html文件,把demo01.html的头文件复制过来。

    2.我们可以查看bootstrap中文网查看媒体对象默认样式的用法。

    3.设置媒体对象默认样式

    (首先给一个样式“media”,“media”表示里面我们要进行图文混排,然后“media-left”让它左对齐,接着设置“media-body”也就是媒体内容,设置一个标题,将标题样式设置为“media-heading”。

    4.运行效果

    5.设置右对齐

    (将内容放在<p>标签里面。再加一个media块做“media-right”右对齐)

    6.运行效果

    7.垂直方向上居中对齐

    8.运行效果


    媒体列表

    1.新建一个demo03.html。复制demo02.html里面media的内容。

    2.设置媒体列表

    (复制三个下面的内容)

    3.运行效果

    (这样的话就构成了一个列表)

    转载请注明原文地址: https://ju.6miu.com/read-41020.html

    最新回复(0)