zoukankan      html  css  js  c++  java
  • Bootstrap--响应式表格布局

    <div class="row">
        <div class="col-sm-2 col-md-2" style="min-height:400px;border:1px #eee4e4 solid; border-radius:5px;padding-top:20px;">
            <ul class="nav nav-pills nav-stacked">
                <li class="active">
                    <a href="#" class="text-muted">6346</a>
                </li>
                <li>
                    <a href="#" class="text-muted">6346</a>
                </li>
                <li>
                    <a href="#" class="text-muted">6346</a>
                </li>
            </ul>
        </div>
        <div class="col-sm-10 col-md-10" style="min-height:400px;border:1px #eee4e4 solid; border-radius:5px;padding-top:20px;">
            <div class="row">
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                    <table class="table">
                        <caption class="pull-left">热歌</caption>
                        <tbody>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                    <div class="table-responsive">
                        <table class="table">
                            <caption class="pull-left">热歌</caption>
                            <tbody>
                                <tr>
                                    <td><span>1</span></td>
                                    <td><a href="#">千里之外</a></td>
                                    <td><a href="#">周杰伦</a></td>
                                    <td><a href="#">播放</a></td>
                                    <td><a href="#">收藏</a></td>
                                </tr>
                                <tr>
                                    <td><span>1</span></td>
                                    <td><a href="#">千里之外</a></td>
                                    <td><a href="#">周杰伦</a></td>
                                    <td><a href="#">播放</a></td>
                                    <td><a href="#">收藏</a></td>
                                </tr>
                                <tr>
                                    <td><span>1</span></td>
                                    <td><a href="#">千里之外</a></td>
                                    <td><a href="#">周杰伦</a></td>
                                    <td><a href="#">播放</a></td>
                                    <td><a href="#">收藏</a></td>
                                </tr>
                                <tr>
                                    <td><span>1</span></td>
                                    <td><a href="#">千里之外</a></td>
                                    <td><a href="#">周杰伦</a></td>
                                    <td><a href="#">播放</a></td>
                                    <td><a href="#">收藏</a></td>
                                </tr>
                                <tr>
                                    <td><span>1</span></td>
                                    <td><a href="#">千里之外</a></td>
                                    <td><a href="#">周杰伦</a></td>
                                    <td><a href="#">播放</a></td>
                                    <td><a href="#">收藏</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4">
                    <table class="table">
                        <caption class="pull-left">热歌</caption>
                        <tbody>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                            <tr>
                                <td><span>1</span></td>
                                <td><a href="#">千里之外</a></td>
                                <td><a href="#">周杰伦</a></td>
                                <td><a href="#">播放</a></td>
                                <td><a href="#">收藏</a></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    

      

  • 相关阅读:
    PHP 设计模式系列 —— 资源库模式(Repository)
    在 Laravel 5 中使用 Repository 模式实现业务逻辑和数据访问的分离
    laravel集合
    2013项目总结
    项目总结
    到底创建了几个String对象?
    String s=new String("abc")创建了几个对象?
    局部刷新
    robot framework 在pycharm中语法无法高亮显示的,显示绿色解决办法(Robot Framework with PyCharm)
    UNIX环境高级编程——进程管理和通信(总结)
  • 原文地址:https://www.cnblogs.com/NuoYer/p/5379145.html
Copyright © 2011-2022 走看看