Bootstrap进度条媒体对象和Well组件

电玩女神 2022-06-12 05:26 226阅读 0赞

## Well组件 ##

> 可以实现简单地嵌入效果

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

<div class="well">一辈子很长</div>
    <div class="well well-lg">要跟有趣的人</div>
    <div class="well well-sm">在一起</div>

效果图如下：  
![Well组件效果图][Well]

## 进度条组件 ##

> 进度条组件为当前工作流程或动作提供时时反馈。

<div class="progress">
        <div class="progress-bar" style="width:60%;">60%</div>
    </div>
    
    <div class="progress">
        <div class="progress-bar" style="min-width:20px;width:0%">0%</div>
    </div>
    
    <div class="progress">
        <div class="progress-bar progress-bar-success" style="width:60%;min-width:20px;">60%</div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-info" style="width:60%;min-width:20px;">60%</div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" style="width:60%;min-width:20px;">60%</div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-danger" style="width:60%;min-width:20px;">60%</div>
    </div>
    
    <div class="progress">
        <div class="progress-bar progress-bar-striped" style="width:50%;min-width:20px;">50%</div>
    </div>
    
    <div class="progress">
        <div class="progress-bar progress-bar-striped active" style="width:60%;min-width:20px;">60%</div>
    </div>
    
    <div class="progress">
        <div class="progress-bar progress-danger" style="width:30%;">30%</div>
        <div class="progress-bar progress-bar-warning" style="width:40%;">40%</div>
        <div class="progress-bar progress-bar-success" style="width:30%;">30%</div>
    </div>

效果图如下：  
![效果图][SouthEast]

## 媒体对象组件 ##

> 媒体对象可以包含图片、视频或者音频等媒体，以达到对象和文本组合显示的样式效果。  
> 这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。

<div class="media">
        <div class="media-left">
            <img src="../img/2.png" alt="" class="media-object">
        </div>
        <div class="media-body">
            <h4 class="media-heading">标题</h4>
            <p>一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。</p>
        </div>
    </div>
    
    
    <div class="media">
        <div class="media-body">
            <h4 class="media-heading">标题</h4>
            <p>一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。</p>
        </div>
        <div class="media-right">
            <img src="../img/2.png" alt="" class="media-object">
        </div>
    </div>

效果图如下：  
![效果图][SouthEast 1]

> 媒体对象列表：如论坛或者博客的评论、回复

<ul class="media-list">
        <li class="media">
            <div class="media-left">
                <img src="../img/2.png" alt="" class="media-object">
            </div>
            <div class="media-body">
                <h4 class="media-heading">标题</h4>
                <p>一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。</p>
                <div class="media">
                    <div class="media-left">
                        <img src="../img/2.png" alt="" class="media-object">
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">标题</h4>
                        <p>一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。</p>
                        <div class="media">
                            <div class="media-left">
                                <img src="../img/2.png" alt="" class="media-object">
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">标题</h4>
                                <p>一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="media">
                    <div class="media-left">
                        <img src="../img/2.png" alt="" class="media-object">
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading">标题</h4>
                        <p>一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。</p>
                    </div>
                </div>
            </div>
        </li>
        <li class="media">
            <div class="media-left">
                <img src="../img/2.png" alt="" class="media-object">
            </div>
            <div class="media-body">
                <h4 class="media-heading">标题</h4>
                <p>一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。一只船孤独的航行在海上，它既不寻求幸福，也不逃避幸福，它只是向前航行，底下是沉静碧蓝的大海，而头顶是金色的太阳。</p>
            </div>
        </li>
    </ul>

效果图如下：  
![效果图][SouthEast 2]

[Well]: /images/20220612/aed8cc6cd2f64f0d8e75fa01788f49b3.png
[SouthEast]: /images/20220612/3f6add84e36e4475bfd55d7454083cc1.png
[SouthEast 1]: /images/20220612/9db36c69a6d147a0b4c4c15c70e9cb00.png
[SouthEast 2]: /images/20220612/2d7b5c3594a940c18136fb37d48ce216.png