Bootstrap列表组、面板和响应式嵌入组件

r囧r小猫 2022-06-12 05:44 194阅读 0赞

## 列表组组件 ##

> 列表组组件用于显示一组列表的组件

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

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

<div class="list-group">
        <button class="list-group-item active">1.这是开始</button>
        
        <button class="list-group-item list-group-item-warning">2.这是第二条数据</button>
        <button class="list-group-item list-group-item-success">3.这是第三排信息</button>
        
        <button class="list-group-item disabled">4.这是末尾</button>
    </div>
    
    <div class="list-group">
        <a href="#" class="list-group-item">
            <h4>内容标题</h4>
            <p class="list-group-item-text">这是相关内容的详情！</p>
        </a>
        <a href="#" class="list-group-item active">2.这是第二条数据 <span class="badge">10</span></a>
        <a href="#" class="list-group-item">3.这是第三排信息</a>
        <a href="#" class="list-group-item">4.这是末尾</a>
    </div>

![效果图][SouthEast 1]

## 面板组件 ##

> 面板组件就是一个存放内容的容器组件

<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 panel-default">
        <div class="panel-heading">
            <h3 class="panel-heading">面板标题</h3>
        </div>
        <div class="panel-body">这是面板的详细内容区！</div>、
        
        <div class="panel-footer">这是底部</div>
    </div>
    
    <div class="panel panel-success">
        <div class="panel-heading">面板标题</div>
        <div class="panel-body">
            这里是详细内容区！
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">面板标题</div>
        <div class="panel-body">
            这里是详细内容区！
        </div>
    </div>

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

<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.这只是开始 <span class="badge">10</span></li>
            <li class="list-group-item">2.这是第二条数据</li>
            <li class="list-group-item">3.这是第三排信息</li>
            <li class="list-group-item">4.这是末尾</li>
        </ul>
    </div>

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

## 响应式嵌入组件 ##

> 根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定内容的尺寸，能够在各种设备上缩放。这些规则可以直接用于iframe、embed、video和object元素

<div class="embed-responsive embed-responsive-16by9"> 
        <embed width="100%" height="100%" src="http://study.163.com/course/courseLearn.htm?courseId=1017002#/learn/video?lessonId=1740216&courseId=1017002" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
    </div>
    
    <div class="embed-responsive embed-responsive-4by3"> 
        <embed width="100%" height="100%" src="http://study.163.com/course/courseLearn.htm?courseId=1017002#/learn/video?lessonId=1740216&courseId=1017002" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
    </div>

效果图如下：  
![16:9][16_9]

![4:3][4_3]

效果图如下;  
![效果图][SouthEast 4]

[SouthEast]: /images/20220612/9ba1313a17c14d888b6e1cf04c742d12.png
[SouthEast 1]: /images/20220612/0e4791b75fee4498bdf3367e288c4666.png
[SouthEast 2]: /images/20220612/192a8d778c8e464ead6b06d4e652bd9f.png
[SouthEast 3]: /images/20220612/779bc938ba9b42a7b4176e7510684b72.png
[16_9]: /images/20220612/ff1c99a11e9d43b9988b4d22b1132218.png
[4_3]: /images/20220612/1a93531e5dc14ea99a57078bd7ab69c6.png
[SouthEast 4]: /images/20220612/b06e37604ce4471fb0b11860dca4a2da.png