Bootstrap学习------Tabel
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的更多相关文章
- Bootstrap~学习笔记索引
回到占占推荐博客索引 bootstrap已经用了有段时间了,感觉在使用上还是比较容易接受的,在开发人员用起来上,也还好,不用考虑它的兼容性,手机,平台,PC都可以有效的兼容. bootstrap官方a ...
- Bootstrap学习(3)
Bootstrap 图片 Bootstrap 对图片的支持.Bootstrap 提供了三个可对图片应用简单样式的 class: .img-rounded:添加 border-radius:6px 来 ...
- BootStrap学习(2)
使用Bootstrap添加代码框 可先看:简介.引入.包下载等:http://www.cnblogs.com/0201zcr/p/4900062.html Bootstrap 允许您以两种方式显示代码 ...
- Bootstrap 学习(1)
简介 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. Bootst ...
- 前端框架——BootStrap学习
BootStrap简单总结下:1.栅格系统,能够很好的同时适应手机端和PC端(及传说中的响应式布局) 2.兼容性好 接下来是对BootStrap学习的一些基础案例总结和回顾: 首先引入:bootstr ...
- bootstrap学习总结-css样式设计(一)
由于项目需要,所以打算好好学习下bootstrap框架,之前了解一点,框架总体不难,但涉及到的东西还是很多,想要熟练掌握它,还是要多练练. 一:bootstrap是什么? bs是什么? 即前端页面搭 ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- BootStrap学习之先导篇——响应式网页
Bootstrap学习之前,要知道响应式网页的原理. 1.什么是响应式网页? 一个页面,可以根据浏览设备的不同,以及特性的不同,而自动改变布局.大小等.使得在不同的设备上上都可以呈现优秀的界面. 优点 ...
- bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120
为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...
随机推荐
- bzoj2938: [Poi2000]病毒
建AC自动机,把所有病毒的节点都删掉,dfs判有没有环,有环就找得到. #include <iostream> #include <cstdio> #include <c ...
- 你所不知道的Android Studio调试技巧
转载:http://www.jianshu.com/p/011eb88f4e0d Android Studio目前已经成为开发Android的主要工具,用熟了可谓相当顺手.作为开发者,调试并发现bug ...
- epoch和Iteration
做机器学习时遇到epoch和iteration,一开始有点迷惑.不是一个意思吗? epoch可以翻译成"回合".一个epoch内,做一次train+一次test iteration ...
- Hash_1014: [JSOI2008]火星人prefix
#include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...
- UOJ260 【NOIP2016】玩具谜题
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...
- poj 2528 线段树+离散化
题意:在墙上贴一堆海报(只看横坐标,可以抽象成一线段),新海报可以覆盖旧海报.求最后能看到多少张海报 sol:线段树成段更新.铺第i张海报的时候更新sg[i].x~sg[i].y这一段为i. 然而坐标 ...
- 数据结构算法C语言实现(八)--- 3.2栈的应用举例:迷宫求解与表达式求值
一.简介 迷宫求解:类似图的DFS.具体的算法思路可以参考书上的50.51页,不过书上只说了粗略的算法,实现起来还是有很多细节需要注意.大多数只是给了个抽象的名字,甚至参数类型,返回值也没说的很清楚, ...
- 跨平台开发之阿里Weex框架环境搭建(二)
爱编程爱分享,原创文章,转载请注明出处,谢谢! http://www.cnblogs.com/fozero/p/5995195.html 上篇文章(http://www.cnblogs.com/foz ...
- STL之deque用法详解
C++ Deque(双向队列): Deque是一种优化了的.对序列两端元素进行添加和删除操作的基本序列容器.它允许较为快速地随机访问,但它不像vector 把所有的对象保存在一块连续的内存块,而是采用 ...
- MAC中Django中runserver提示Can't connect to local MySQL server through socket '/tmp/mysql.sock错误
好像不止遇到一次,直接Google就可以了,在stackoverflow中就有答案,答案就是你没有开MySQL - -. stackoverflow链接见 http://stackoverflow.c ...