12月2日笔记-优快云博客

本文介绍了使用Bootstrap框架实现的多种UI组件，包括Well、进度条、媒体对象、列表组和面板组件等，并展示了不同场景下的应用实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<div class="well">

Bootstrap

有 lg 和 sm 两种可选值

<div class="well well-lg"> Bootstrap

</div>

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

<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="meida">
   <div class="media-left media-top">
    <img src="img/small.png" alt="" class="media-object">
   </div>
   <div class="media-body">
    <h4 class="meida-heading">内容标题</h4>
    <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。</p>
   </div>
</div>

媒体对象在右边

<div class="media">

    <div class="media-body">

        <h4 class="media-heading">标题</h4>
        <p>企鹅（学名：Spheniscidae）：有“海洋之舟”美称的企鹅是一种最古老的游禽，它们很可能在地球穿上冰甲之前，就已经在南极安家落户。</p>

    </div>

    <div class="media-right">

     <img src="img/small.png" alt="" class="media-object"> 
    </div>

</div>

媒体对象列表

<ul class="media-list">
    <li class="media"> //将每个 media 存放在 media-body 内后即可
    ...代码较多，具体看视频
    </li>
</ul>

列表组和嵌入组件列表组组件列表组组件用于显示一组列表的组件。

<ul class="list-group">
    <li class="list-group-item">1.这是起始</li>
    <li class="list-group-item">2.这是第二条数据</li> 
    <li class="list-group-item">3.这是第三排信息</li> 
    <li class="list-group-item">4.这是末尾</li>
</ul>

列表项带勋章

<li class="list-group-item">
    MESSAGE
    <span class="badge">10</span>
</li>

链接和首选

<div class="list-group">
    <a href="#" class="list-group-item active">1.这是起始
     <span class="badge">10</span>
    </a> 
    <a href="#" class="list-group-item">2.这是第二条数据</a>
    <a href="#" class="list-group-item">3.这是第三排信息</a>
    <a href="#" class="list-group-item">4.这是末尾</a>
</div>

按钮式列表

<div class="list-group">
    <button class="list-group-item active">1.这是起始       
        <span class="badge">10</span>
    </button>
    <button class="list-group-item">2.这是第二条数据</button>
    <button class="list-group-item">3.这是第三排信息</button> 
    <button class="list-group-item">4.这是末尾</button>
</div>

设置项目被禁用

 class="list-group-item disabled"

情景类为列表中的条目添加情境类，默认样式或链接列表都可以。还可以为列表中的条目设置.active 状态。 `

` 3.这是第三排信息

定制内容列表组中的每个元素都可以是任何 HTML 内容，甚至是像下面的带链接的列表组。

<div class="list-group">
    <a href="#" class="list-group-item active"> 
        <h4>内容标题</h4> 
        <p class="list-group-item-text">这里是相关内容详情！</p>
    </a>
    <a href="#" class="list-group-item"> 
        <h4>内容标题</h4>
        <p class="list-group-item-text">这里是相关内容详情！</p>
    </a>
    <a href="#" class="list-group-item">
         <h4>内容标题</h4>
         <p class="list-group-item-text">这里是相关内容详情！</p> 
    </a>
</div>

面板组件面板组件就是一个存放内容的容器组件。默认的.panel组件所做的只是设置基本的边框（border）和内补（padding）来包含内容。

<div class="panel panel-default">

<div class="panel-body">

这里是详细内容区！

</div>

</div>

带标题容器的面板

<div class="panel panel-default"> 
    <div class="panel-heading">
    面板标题
    </div>
    <div class="panel-body">
    这里是详细内容区！
    </div>
</div>
//也可以设置标题元素

<div class="panel-heading">

<h3 class="panel-title">面板标题</h3> 
</div>

带注脚的面板把按钮或次要的文本放入 .panel-footer 容器内。

<div class="panel-footer">

这里是底部

</div>

**情景效果：default、success、info、warning、danger、primary **

<div class="panel panel-success">

表格类面板

<div class="panel panel-default"> 
    <div class="panel-heading">

    表格标题

    </div>

    <div class="panel-body">

        <p>这里是表格标题的详细内容！</p> 
    </div>
    <table class="table"> 
        <tr>

            <th>1</th>

            <th>2</th>

            <th>3</th>

        </tr>

        <tr>

            <td>1</td>

            <td>2</td>

            <td>3</td>

        </tr>

    </table>

</div>

列表类面板

<div class="panel panel-default"> 
    <div class="panel-heading">
    表格标题
    </div>
    <div class="panel-body">
        <p>这里是表格标题的详细内容！</p> 
    </div>
    <ul class="list-group">
        <li class="list-group-item">1.这里是首页</li>
        <li class="list-group-item">2.这里是第二个项目</li> 
        <li class="list-group-item">3.这里是第三个项目</li> 
        <li class="list-group-item">4.这里是第四个项目</li>
    </ul>
</div>

响应式嵌入组件
根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定内容的尺寸，能够在各种设备上缩放。

这些规则可以直接用于iframe、embed、video和object元素。
16:9 响应式

<div class="embed-responsive embed-responsive-16by9"> 
    <embed width="100%" height="100%" src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque">
    </embed>
</div>

4:3 响应式

<div class="embed-responsive embed-responsive-4by3">
    <embed width="100%" height="100%"
    src="http://www.tudou.com/v/OUG5JBZ8udc/&bid=05&rpid=50797543&resourceI d=50797543_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque">
    </embed>
</div>