美文网首页
BootStrap[第十一章:进度条媒体对象和 Well 组件]

BootStrap[第十一章:进度条媒体对象和 Well 组件]

作者: GXD_小男孩 | 来源:发表于2019-05-31 16:30 被阅读0次

一.Well 组件

这个组件可以实现简单的嵌入效果。

//嵌入效果
<div class="well">
Bootstrap
</div>
//有 lg 和 sm 两种可选值
<div class="well well-lg">
Bootstrap
</div>
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">0%</div>
</div>
//结合情景的进度条
<div class="progress">
<div class="progress-bar progress-bar-success"
style="min-width:20px;width:60%">60%</div>
</div>//条纹状,IE10+支持
<div class="progress">
<div class="progress-bar progress-bar-success
progress-bar-striped" style="min-width:20px;width:60%">60%</div>
</div>
//动画效果
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped
active" style="min-width:20px;width:60%">60%</div>
</div>
//堆叠效果
<div class="progress">
<div class="progress-bar progress-bar-success"
style="min-width:20px;width:35%">35%</div>
<div class="progress-bar progress-bar-warning"
style="min-width:20px;width:20%">20%</div>
<div class="progress-bar progress-bar-danger"
style="min-width:20px;width:10%">10%</div>
</div>
进度条

三.媒体对象组件

媒体对象可以包含图片、视频或音频等媒体,以达到对象和文本组合显示的样式效果。

//基本实例
<div class="media">
<div class="media-left">
<img src="img/small.png" alt="" class="media-object">
</div>
<div class="media-body">
<h4 class="media-heading">标题</h4>
<p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老
的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17
种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;
脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;
羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个
种的主要区别在于头部色型和个体大小。</p>
</div>
</div>
//媒体对象在右边
<div class="media">
<div class="media-body">
<h4 class="media-heading">标题</h4><p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老
的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有 17
种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;
脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;
羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个
种的主要区别在于头部色型和个体大小。</p>
</div>
<div class="media-right">
<img src="img/small.png" alt="" class="media-object">
</div>
</div>
//媒体对象列表
<ul class="media-list">
    <li class="meida">
        <div class="media-left">
            <img src="img/small.png" alt="" class="media-object">
        </div>
        <div class="media-body">
            <h4 class="meida-heading">内容标题</h4>
            <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有17种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个种的主要区别在于头部色型和个体大小。</p>
            <div class="meida">
                <div class="media-left">
                    <img src="img/small.png" alt="" class="media-object">
                </div>
                <div class="media-body">
                    <h4 class="meida-heading">内容标题</h4>
                    <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有17种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个种的主要区别在于头部色型和个体大小。</p>
                    <div class="meida">
                        <div class="media-left">
                            <img src="img/small.png" alt="" class="media-object">
                        </div>
                        <div class="media-body">
                            <h4 class="meida-heading">内容标题</h4>
                            <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有17种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个种的主要区别在于头部色型和个体大小。</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="meida">
                <div class="media-left">
                    <img src="img/small.png" alt="" class="media-object">
                </div>
                <div class="media-body">
                    <h4 class="meida-heading">内容标题</h4>
                    <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有17种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个种的主要区别在于头部色型和个体大小。</p>
                </div>
            </div>
        </div>
    </li>
    <li class="meida">
        <div class="media-left">
            <img src="img/small.png" alt="" class="media-object">
        </div>
        <div class="media-body">
            <h4 class="meida-heading">内容标题</h4>
            <p>企鹅(学名:Spheniscidae):有“海洋之舟”美称的企鹅是一种最古老的游禽,它们很可能在地球穿上冰甲之前,就已经在南极安家落户。全世界的企鹅共有17种,大多数都分布在南半球。主要生活在南半球,属于企鹅目,企鹅科。特征为不能飞翔;脚生于身体最下部,故呈直立姿势;趾间有蹼;跖行性(其他鸟类以趾着地);前肢成鳍状;羽毛短,以减少摩擦和湍流;羽毛间存留一层空气,用以保温。背部黑色,腹部白色。各个种的主要区别在于头部色型和个体大小。</p>
        </div>
    </li>
</ul>

相关文章

网友评论

      本文标题:BootStrap[第十一章:进度条媒体对象和 Well 组件]

      本文链接:https://www.haomeiwen.com/subject/ptiwtctx.html