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>

时间： 2024-11-07 02:16:23

Bootstrap--响应式表格布局的相关文章

响应式表格布局

通过css媒体查询捕捉浏览器的大小,来改变css样式,本例是改变表格的样式 html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>响应式表格布局</title> <link rel="stylesheet" type="text/css" href=&qu

吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格：响应式表格

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 响应式表格</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&

bootstrap17-响应式表格布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>响应式表格布局</title> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <

Bootstrap,是基于HTML,CSS.javascript的前端框架该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定效果的实现. 作用: 1.Bootstrap使得Web开发更加快捷,高效 2.Bootstrap支持响应式开发,解决了移动互联网前端开发问题. 简单介绍一下: 该框架是Twitter公司的设计师Mark Otto和jacob Thornton

浅析响应式网站布局Bootstrap

bootstrap是一款依赖于jquery开发的一款响应式网页布局的插件,可以针对不同的屏幕尺寸调整你的页面,使其在个尺寸屏幕上表现良好. 从bootstrap官方网站来看,bootstrap主要有下面几部分组成: CSS--Bootstrap为我们预实现了很多CSS样式.包括一些图片以及网站的响应式布局. 组件--Bootstrap为我们预实现了很多CSS组件.如下拉框.按钮组.导航等.也就是说Bootstrap内容帮我们定义好了很多CSS样式,你可以将这些样式直接应用到之前的下拉框等元素里.

Bootstrap响应式布局

Bootstrap响应式布局可以使用栅格化系统,在桌面>970px上变为水平排列,方法: 1.包含在.container或.container-fluid中 2.使用.col-md-*栅格类,创建栅格系统典型布局: <div class="container"> <div class="row"> <div class="col-md-4">d</div> <div class=&qu

Bootstrap页面布局7 - Bootstrap响应式布局的实用类

在bootstrap-responsive.css这个CSS样式表中已经为我们设定好了几个实用的类: .visible-phone: 在智能手机设备上显示这个元素,在其他设备上隐藏该元素 .visible-tablet: 在平板电脑上显示这个元素,在其他设备上隐藏该元素 .visible-desktop: 在桌面电脑上显示这个元素,在其他设备上隐藏该元素 .hidden-phone: 在智能手机上隐藏,在其他设备上显示该元素 .hidden-tablet: 在平板电脑上隐藏,在其他设备上显示该元

<Bootstrap> 学习笔记一. 配置环境, 简单使用, 响应式表格, 响应式图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1, user-scala

【温故知新】——Bootstrap响应式知识点复习

前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 开发工具 1.记事本,Editplus,... ... 2.Sublime,Dreamweaver 3.Webstorm ======================================== 一.什么是响应式网页 Responsive Web Page,响应式网页/自适应网页,即一个页面既可以在PC浏览器中浏览,也可以在手机/平板中浏览.并且配合不同设备有不同的响应结果响应式网页的特点: 1.页面上的图片和

2017.4.7 Bootstrap响应式设计

1.CSS添加: <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css"/> 2.首先,我们需要把所有的HTML内容放在class为container-fluid的div下. <div class="container-fluid"></div> 3.图片自适应:通过Bootstrap,我们要做的