基于Bootrap的列表组及栅格布局来实现

模型定义

public class StreetEvent

    {

        public int Id { get; set; }

        public string StreetName { get; set; }

        public int LACnt { get; set; }

        public int JACnt { get; set; }

        public int SLCnt { get; set; }

        public int PQCnt { get; set; }

    }

测试Controller方法

public ActionResult TableView2([Form]Para para)

        {

            List<StreetEvent> list = new List<StreetEvent>();

            for (int i = ; i < ; i++)

            {

                list.Add(new StreetEvent

                {

                    Id = i,

                    StreetName = "街道" + i.ToString(),

                    LACnt =  + i * ,

                    SLCnt =  + i * ,

                    JACnt =  + i * ,

                    PQCnt =  + i *

                });

            }

            return View(list);

        }

输出视图

@model IEnumerable<MvcWeb01.Models.StreetEvent>

@{

    ViewBag.Title = "TableView2";

}

<div class="container">

    <div class="row">

        <div class="col-xs-12 text-center"><h3>案件统计报表</h3></div>

    </div>

</div>

@foreach (MvcWeb01.Models.StreetEvent item in Model)

{

    <div class="list-group">

        <a href="#" class="list-group-item">

            <div class="container">

                <div class="row">

                    <div class="col-xs-6 text-left">街道</div>

                    <div class="col-xs-6 text-right">@item.StreetName</div>

                </div>

            </div>

        </a>

        <a href="#" class="list-group-item">

            <div class="container">

                <div class="row">

                    <div class="col-xs-6 text-left">立案数</div>

                    <div class="col-xs-6 text-right">@item.LACnt</div>

                </div>

            </div>

        </a>

        <a href="#" class="list-group-item">

            <div class="container">

                <div class="row">

                    <div class="col-xs-6 text-left">结案数</div>

                    <div class="col-xs-6 text-right">@item.JACnt</div>

                </div>

            </div>

        </a>

        <a href="#" class="list-group-item">

            <div class="container">

                <div class="row">

                    <div class="col-xs-6 text-left">受理数</div>

                    <div class="col-xs-6 text-right">@item.SLCnt</div>

                </div>

            </div>

        </a>

        <a href="#" class="list-group-item">

            <div class="container">

                <div class="row">

                    <div class="col-xs-6 text-left">派遣数</div>

                    <div class="col-xs-6 text-right">@item.PQCnt</div>

                </div>

            </div>

        </a>

    </div>

}

输出效果：

响应式Table：https://dbushell.com/demos/tables/rt_05-01-12.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Responsive Tables</title>

    <style>

    .cf:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

    * html .cf { zoom: 1; }

    *:first-child+html .cf { zoom: 1; }

    body, h1, h2, h3 { margin: 0; font-size: 100%; font-weight: normal; }

    code { padding: 0 .5em; background: #fff2b2; }

    body { padding: 1.25em; font-family: 'Helvetica Neue', Arial, sans-serif; background: #eee; }

    h1 { font-size: 2em; }

    h2 { font-size: 1.5em; }

    h1, h2 { margin: .5em 0; font-weight: bold; }

    .rt { width: 100%; font-size: 0.75em;/*12*/ line-height: 1.25em;/*15*/ border-collapse: collapse; border-spacing: 0; }

    .rt th,

    .rt td { margin: 0; padding: 0.4166em;/*10*/ vertical-align: top; border: 1px solid #babcbf; background: #fff; }

    .rt th { text-align: left; background: #fff2b2; }

    @media only screen and (max-width: 40em) { /*640*/

        #rt1 { display: block; position: relative; width: 100%; }

        #rt1 thead { display: block; float: left; }

        #rt1 tbody { display: block; width: auto; position: relative; overflow-x: auto; white-space: nowrap; }

        #rt1 thead tr { display: block; }

        #rt1 th { display: block; }

        #rt1 tbody tr { display: inline-block; vertical-align: top; }

        #rt1 td { display: block; min-height: 1.25em; }

        #rt2 { display: block; position: relative; width: 100%; }

        #rt2 thead { display: block; float: left; }

        #rt2 tbody { display: -webkit-box; overflow-x: auto; }

        #rt2 th,

        #rt2 tr,

        #rt2 td { display: block; }

        /* sort out borders */

        .rt th { border-bottom: 0; }

        .rt td { border-left: 0; border-right: 0; border-bottom: 0; }

        .rt tbody tr { border-right: 1px solid #babcbf; }

        .rt th:last-child,

        .rt td:last-child { border-bottom: 1px solid #babcbf; }

    }

    </style>

 </head>

<body>

    <h1>Responsive Tables (2)</h1>

    <p><strong>Introduction:</strong> <a href="http://dbushell.com/2012/01/05/responsive-tables-2">Responsive Tables</a> — 5th January, 2012.</p>

    <p>The following tables change orientation on small screens. A horizontal scroll or swipe is used to view more data. The table head is always visible.</p>

    <table id="rt1" class="rt cf">

        <thead class="cf">

            <tr>

                <th>Selector</th>

                <th>IE7</th>

                <th>IE8</th>

                <th>IE9</th>

                <th>FF 3.6</th>

                <th>FF 4</th>

                <th>Safari 5</th>

                <th>Chrome 5</th>

                <th>Opera 10</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>* selector</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

            </tr><tr>

                <td>:before :after</td>

                <td>no</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

            </tr><tr>

                <td>:nth-of-type()</td>

                <td>no</td>

                <td>no</td>

                <td>no</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>incorrect</td>

            </tr><tr>

                <td>background-clip</td>

                <td>no</td>

                <td>no</td>

                <td>yes</td>

                <td>no</td>

                <td>yes</td>

                <td>-webkit-</td>

                <td>-webkit-</td>

                <td>buggy</td>

            </tr><tr>

                <td>background-repeat</td>

                <td>incomplete</td>

                <td>incomplete</td>

                <td>yes</td>

                <td>incomplete</td>

                <td>incomplete</td>

                <td>incorrect</td>

                <td>incorrect</td>

                <td>yes</td>

            </tr><tr>

                <td>::selection</td>

                <td>no</td>

                <td>no</td>

                <td>yes</td>

                <td>-moz-</td>

                <td>-moz-</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

            </tr>

        </tbody>

    </table>

    <p>The trick is to use <code>display: inline-block;</code> on the table rows and <code>white-space: nowrap;</code> on the table body.</p>

    <br>

    <h2>CSS3 Flexible Box model</h2>

    <p>This table replicates the same layout using <code>display: -webkit-box;</code></p>

    <table id="rt2" class="rt cf">

        <thead class="cf">

            <tr>

                <th>Selector</th>

                <th>IE7</th>

                <th>IE8</th>

                <th>IE9</th>

                <th>FF 3.6</th>

                <th>FF 4</th>

                <th>Safari 5</th>

                <th>Chrome 5</th>

                <th>Opera 10</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>* selector</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

            </tr><tr>

                <td>:before :after</td>

                <td>no</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

            </tr><tr>

                <td>:nth-of-type()</td>

                <td>no</td>

                <td>no</td>

                <td>no</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

                <td>incorrect</td>

            </tr><tr>

                <td>background-clip</td>

                <td>no</td>

                <td>no</td>

                <td>yes</td>

                <td>no</td>

                <td>yes</td>

                <td>-webkit-</td>

                <td>-webkit-</td>

                <td>buggy</td>

            </tr><tr>

                <td>background-repeat</td>

                <td>incomplete</td>

                <td>incomplete</td>

                <td>yes</td>

                <td>incomplete</td>

                <td>incomplete</td>

                <td>incorrect</td>

                <td>incorrect</td>

                <td>yes</td>

            </tr><tr>

                <td>::selection</td>

                <td>no</td>

                <td>no</td>

                <td>yes</td>

                <td>-moz-</td>

                <td>-moz-</td>

                <td>yes</td>

                <td>yes</td>

                <td>yes</td>

            </tr>

        </tbody>

    </table>

    <br>

    <p>This concept needs further work to achieve cross-browser support but I think it has potential!</p>

<script type="text/javascript">

var _gaq = _gaq || [];

_gaq.push(['_setAccount', 'UA-9497100-1']);

_gaq.push(['_setDomainName', 'dbushell.com']);

_gaq.push(['_trackPageview']);

(function() {

    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;

    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';

    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

})();

</script>

</body>

</html>

使用Bootstrap 基于MVC输出移动化table 列表的更多相关文章

  1. 【JAVA】基于MVC架构Java技术荟萃案例演练

    基于JAVA-MVC技术的顾客管理项目案例总结 作者 白宁超 2016年6月9日22:47:08 阅读前瞻:本文源于对javaweb相关技术和资料汇总,涉及大量javaweb基础技术诸如:Servle ...

  2. 基于Metronic的Bootstrap开发框架经验总结（2）--列表分页处理和插件JSTree的使用

    在上篇<基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理>介绍了Bootstrap开发框架的一些基础性概括,包括总体界面效果,以及布局.菜单等内容, ...

  3. Spring MVC -- MVC设计模式(演示4个基于MVC框架的案例)

    对于简单的Java Web项目,我们的项目仅仅包含几个jsp页面,由于项目比较小,我们通常可以通过链接方式进行jsp页面间的跳转. 但是如果是一个中型或者大型的项目,上面那种方式就会带来许多维护困难, ...

  4. iOS基于MVC的项目重构总结

    关于MVC的争论 关于MVC的争论已经有很多,对此我的观点是:对于iOS开发中的绝大部分场景来说,MVC本身是没有问题的,你认为的MVC的问题,一定是你自己理解的问题(资深架构师请自动忽略本文). 行 ...

  5. ASP.NET MVC 4 插件化架构简单实现-思路篇

    用过和做过插件的都会了解插件的好处,园子里也有很多和讨论,但大都只些简单的加载程序集什么的,这里主要讨论的就是使用 ASP.NET MVC 4 来实现每个插件都可以完全从主站点剥离出来,即使只是一个插 ...

  6. 转：iOS基于MVC的项目重构总结

    转:http://www.cocoachina.com/ios/20160519/16346.html 关于MVC的争论 关于MVC的争论已经有很多,对此我的观点是:对于iOS开发中的绝大部分场景来说 ...

  7. MVC 4 插件化架构简单实现

    转ASP.NET MVC 4 插件化架构简单实现-思路篇   用过和做过插件的都会了解插件的好处,园子里也有很多和讨论,但大都只些简单的加载程序集什么的,这里主要讨论的就是使用 ASP.NET MVC ...

  8. MVC页面静态化

    MVC 页面静态化   最近工作需要,实现页面静态化,以前在ASP时代,都是FSO自己手动生成的. 新时代,MVC了,当然也要新技术,网上一搜,找到一种解决方案,是基于MVC3的,实现原理是通过mvc ...

  9. [置顶] MVC输出缓存(OutputCache参数详解）

    1.学习之前你应该知道这些 几乎每个项目都会用到缓存,这是必然的.以前在学校时做的网站基本上的一个标准就是1.搞定增删改查2.页面做的不要太差3.能运行(ps真的有这种情况,答辩验收的时候几个人在讲台 ...

随机推荐

  1. dive 方便的观察容器各层信息的工具

      dive 是一个方便的观察容器各层信息的工具,同时也集成了容器构建命令,方便我们在构建容器 镜像的同时查询镜像各层的变动信息 安装 mac 系统,可以按照自己的系统选择安装方式 wget http ...

  2. BackgroundWorker Class Sample for Beginners

    Download source - 27.27 KB Introduction This article presents a novice .NET developer to develop a m ...

  3. win10开移动热点让手机使用上网

    PC得买个无线网卡带尾部那种的,插后面,有了无线网卡能力了. 然后开启移动热点: 在设备管理器里面去,找到网络适配器,选择带有Wireless的那个,更新驱动,浏览计算机查找,从计算机的设备驱动表选取 ...

  4. 建立你第一个 Outlook Add-in

    最近因为工作需要,研究了下Outlook Add-in 和 Graph API.下面带大家建立一个Hello World 项目 建立Add-in 先前需求: Node.js 使用cmd/PowerSh ...

  5. pycharm开发django项目 static报404解决方法

    settings文件中确保有以下配置 # Static files (CSS, JavaScript, Images)# https://docs.djangoproject.com/en/1.10/ ...

  6. PHP 对象转数组 Object转array

    //调用这个函数,将其幻化为数组,然后取出对应值 public static function object_array($array) { if(is_object($array)) { $arra ...

  7. C# 使用委托实现多线程调用窗体的四种方式（转）

    1.方法一:使用线程 功能描述:在用c#做WinFrom开发的过程中.我们经常需要用到进度条(ProgressBar)用于显示进度信息.这时候我们可能就需要用到多线程,如果不采用多线程控制进度条,窗口 ...

  8. Application Request Route实现IIS Server Farms集群负载

    首先你装一个web 平台安装程序:https://www.microsoft.com/zh-CN/download/details.aspx?id=6164 安装完之后会出现打开界面,iis中也可找到 ...

  9. java.lang.OutOfMemoryError: Java heap space解决方法 （有问题咨询加微信）

    支付宝扫码领取最高99元红包,到店支付15天,双十二瓜分15亿,打开支付宝首页搜“555176706”领红包,领到大红包的小伙伴赶紧使用哦! //首先检查程序有没有限入死循环 这个问题主要还是由这个问 ...

  10. C++中sort函数小结

    我们都知道,sort函数是C++标准库<algorithm>中的一个库函数.它的功能是对数组/容器中的元素进行排序.用法示例如下: 一.对数组进行排序 示例: int a[] = {1,3 ...