Bootstrap的表格和Html表格大同小异，只是封装了一些css供我们使用

<table>标签必须引用class="table"基类样式,我们可以根据需求赛选需要的样式其中主要的几个样式

(1) table-hover 鼠标悬停在当前行时有特效

(2) table-striped 表格呈现斑马线效果

(3) table-bordered 表格显示边框

(4) table-condensed 紧凑型表格

<!DOCTYPE html>

<html>

<head>

    <title>

    </title>

    <script src="~/Scripts/jquery-2.1.4.min.js"></script>

    <script src="~/Scripts/bootstrap.min.js"></script>

    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

    <style>

        .table {

            margin-bottom: 30px;

        }

        p {

            color: blue;

        }

    </style>

</head>

<body>

    <div class="container">

        <p>普通表格</p>

        <table class="table table-hover table-striped table-bordered">

            <thead>

                <tr>

                    <th>

                        标题1

                    </th>

                    <th>

                        标题2

                    </th>

                    <th>

                        标题3

                    </th>

                </tr>

            </thead>

            <tbody>

                <tr>

                    <td>

                        内容1

                    </td>

                    <td>

                        内容2

                    </td>

                    <td>

                        内容3

                    </td>

                </tr>

                <tr>

                    <td>

                        内容1

                    </td>

                    <td>

                        内容2

                    </td>

                    <td>

                        内容3

                    </td>

                </tr>

                <tr>

                    <td>

                        内容1

                    </td>

                    <td>

                        内容2

                    </td>

                    <td>

                        内容3

                    </td>

                </tr>

                <tr>

                    <td>

                        内容1

                    </td>

                    <td>

                        内容2

                    </td>

                    <td>

                        内容3

                    </td>

                </tr>

            </tbody>

        </table>

</body>

</html>

如果将 <div class="container">更改为<div class="table-responsive">当表格内容过多时会出现下拉滚动条

会呈现以下效果

Bootstrap学习------Tabel的更多相关文章

  1. Bootstrap~学习笔记索引

    回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...

  2. Bootstrap学习（3）

    Bootstrap 图片  Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来 ...

  3. BootStrap学习（2）

    使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...

  4. Bootstrap 学习（1）

    简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...

  5. 前端框架——BootStrap学习

    BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...

  6. bootstrap学习总结-css样式设计(一)

    由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么?  即前端页面搭 ...

  7. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  8. BootStrap学习之先导篇——响应式网页

    Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...

  9. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

随机推荐

  1. bzoj2946: [Poi2000]公共串

    SAM处女题qwq #include <iostream> #include <cstdio> #include <cstring> #include <cm ...

  2. 使用HttpSessionListener接口监听Session的创建和失效

    转自:http://uule.iteye.com/blog/824115 HttpSessionListener : Session创建事件发生在每次一个新的session创建的时候,类似地Sessi ...

  3. 【VS2013】设定Nuget代理

    @tags "visual studio 2013" nuget vs2013中用nuget想必是一件很爽的事情,就像java里面用maven来安装各种包一样.有时候网络不好,nu ...

  4. 嵌入式环境下通过 UDP 链接来调试 QT 程序

    据说有为嵌入式提供的 QT Debug 手段,但是目前还没发现,所以想到了这个笨办法.有更好思路的可以推荐. 该思路是基于 QDebug() .因为 QT 提供了重写 QT msg 处理方法的接口 q ...

  5. hihocoder #1327

    传送门 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个只包含小写字母'a'-'z'的字符串 S ,你需要将 S 中的字符重新排序,使得任意两个相同的字符不连在一 ...

  6. hibernate-聚合函数分组统计数据查询

    聚合函数: 实例: package Test; import static org.junit.Assert.*; import java.util.List; import org.hibernat ...

  7. Markdown中的缩进

    Markdown中怎么实现段首的缩进 把输入法的半角改为全角,在Markdown文中直接空格就能实现缩进,测试时一个空格是一个汉字的距离. html中的代码:  或  -- 半个汉字的距离.  或  ...

  8. 【Beta版本】冲刺-Day6

    队伍:606notconnected 会议时间:12月14日 目录 一.行与思 二.站立式会议图片 三.燃尽图 四.代码Check-in 一.行与思 张斯巍(433) 今日进展:修改界面规范,应用图标 ...

  9. RBAC权限设计

    http://blog.csdn.net/ms_x0828/article/details/7035956 RBAC 模型作为目前最为广泛接受的权限模型 角色访问控制(RBAC)引入了Role的概念, ...

  10. Yocto开发笔记之《U-boot启动内核流程》（QQ交流群：519230208）

    QQ群:519230208,为避免广告骚扰,申请时请注明 “开发者” 字样 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 执行命令 ...