zoukankan      html  css  js  c++  java
  • Bootstrap(11)列表组面板和嵌入组件

    一.列表组组件
    列表组组件用于显示一组列表的组件。
    //基本实例

            <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>

    //列表项带勋章

    <ul class="list-group">
            <li class="list-group-item">1.这是起始<span class="badge">10</span></li></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 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"

    //情景类

    <li class="list-group-item list-group-item-success">3.这是第三排信息</li>

    //定制内容

        <!-- //定制内容 -->
        <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>

    二.面板组件
    面板组件就是一个存放内容的容器组件。
    //基本实例

    <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>
        <!-- //带注脚的面板 -->
        <div class="panel-footer">这里是底部</div>

    //情景效果:default、success、info、warning、danger、primary

            <div class="panel panel-success">
            <div class="panel-heading ">面板标题</div>
            <div class="panel-body ">这里是详细内容区!</div>
        </div>

    //表格类面板

    <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="Bootstrap/img/haha.mp4" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
        </div>

    //4:3 响应式

    <div class="embed-responsive embed-responsive-4by3">
            <embed width="100%" height="100%" src="Bootstrap/img/haha.mp4" allowscriptaccess="always" allowfullscreen="true" wmode="opaque"></embed>
        </div>

  • 相关阅读:
    C#listbox使用方法
    poj 3894 System Engineer (二分图最大匹配--匈牙利算法)
    Java实现 蓝桥杯VIP 算法训练 连接字符串
    Java实现 蓝桥杯VIP 算法训练 连接字符串
    Java实现 蓝桥杯VIP 算法训练 比较字符串
    Java实现 蓝桥杯VIP 算法训练 比较字符串
    Java实现 蓝桥杯VIP 算法训练 比较字符串
    Java实现 蓝桥杯VIP 算法训练 比较字符串
    Java实现 蓝桥杯VIP 算法训练 比较字符串
    Java实现 蓝桥杯VIP 算法训练 黑白无常
  • 原文地址:https://www.cnblogs.com/zhangjinru123/p/7281942.html
Copyright © 2011-2022 走看看