关于bootstrap--表格(table的各种样式)
1、table-striped:斑马线表格

2、table-bordered:带边框的表格

3、table-hover:鼠标悬停高亮的表格

4、table-condensed:紧凑型表格(单元格的内距由8px调至5px。)

5、table-responsive:响应式表格(当你的浏览器可视区域小于768px时,表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时,表格底部水平滚动条就会消失)

6、“.table”主要有三个作用:
☑ 给表格设置了margin-bottom:20px以及设置单元内距
☑ 在thead底部设置了一个2px的浅灰实线
☑ 每个单元格顶部设置了一个1px的浅灰实线
<table class="table">
<thead>
<tr>
<th>表格标题</th>
<th>表格标题</th>
<th>表格标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
<tr>
<td>表格单元格</td>
<td>表格单元格</td>
<td>表格单元格</td>
</tr>
</tbody>
</table>
关于bootstrap--表格(table的各种样式)的更多相关文章
- __x__(40)0909第五天__表格 table 的 css 样式 美化
如果就向下面的代码那样,不写 tbody , 则浏览器自添加 tbody , 并将所有的 tr 移入 tbody 意味着 tr 并非 table 的子元素,而是 tbody 的子元素. 所以 以后编写 ...
- 关于element-ui表格table设置header-cell-class-name样式不起作用的原因分析
在编写表格的时候想给表头添加样式,使用 header-cell-class-name怎么都添加不上样式,检查元素发现连class都没添加上,查了很多资料有人说element之前版本不支持这属性,但我使 ...
- 表格Table好看的样式表
caption { padding: 0 0 5px 0; width: 700px; font: italic 11px "Trebuchet MS" , Verdana, Ar ...
- amazeui学习笔记--css(HTML元素5)--表格Table
amazeui学习笔记--css(HTML元素5)--表格Table 一.总结 1.基本样式:am-table:直接模块名 <table class="am-table"& ...
- 关于Vue.cli 脚手架环境中引入Bootstrap时,table表格样式缺失的解决办法
Vue+bootstrap不能正常使用table的样式 环境:下载官网的本地bootstrap包,然后在vue 的index.html引入bootstrap的css和js环境 问题描述:1. vue里 ...
- BootStrap入门教程 (二) :BASE CSS(排版(Typography),表格(Table),表单(Forms),按钮(Buttons))
上讲回顾:Bootstrap的手脚架(Scaffolding)提供了固定(fixed)和流式(fluid)两种布局,它同时建立了一个宽达940px和12列的格网系统. 基于手脚架(Scaffoldin ...
- Bootstrap表格样式(附源码文件)--Bootstrap
1.表格默认样式 <h4>表格默认样式</h4><table><!--默认样式--> <tr><th>序号</th> ...
- Bootstrap -- 表格样式、表单布局
Bootstrap -- 表格样式.表单布局 1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http- ...
- bootstrap表格样式
一:表格基本格式 <table> <tr> <th>标题一</th> <th>标题二</th> </tr> < ...
- jQuery 选择表格(table)里的行和列及改变简单样式
本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变,希望它可以对jQuery表格处理的深层学习提供一些帮助jQuery对表格(table)的处理提供了相当强大的功能,比如说对 ...
随机推荐
- iOS--创建uiscrollview
//创建uiscrollview self.PageHeight = self.view.bounds.size.height; self.PageWidth = self.view.bounds.s ...
- 你需要知道的九大排序算法【Python实现】之堆排序
六.堆排序 堆排序是一种树形选择排序,是对直接选择排序的有效改进. 堆的定义下:具有n个元素的序列 (h1,h2,...,hn),当且仅当满足(hi>=h2i,hi>=2i+1)或(h ...
- linux diff具体解释
diff是Unix系统的一个非常重要的工具程序. 它用来比較两个文本文件的差异,是代码版本号管理的基石之中的一个.你在命令行下,输入: $ diff <变动前的文件> <变动后的文件 ...
- C++ Win32控制台应用程序捕捉关闭事件
#include#includebool ctrlhandler( DWORD fdwctrltype ){ switch( fdwctrltype ) { // handle ...
- 邮件协议(SMTP)性能测试总结(Foxmail邮箱)
先介绍一下邮件协议SMTP的工作机制(连接和发送过程),用wireshark工具抓包进行分析,如下: SMTP协议的工作机制(连接和发送过程): 1.建立TCP连接,并将邮件服务器地址给客户端: 2. ...
- Log4Qt 使用(一)
一.下载 http://sourceforge.net/projects/log4qt/develop 二.Log4Qt介绍 Log4Qt 是Apache Log4J 的Qt移植版,所以看Log4J的 ...
- Protobuf实现Android Socket通讯开发教程
本节为您介绍Protobuf实现Android Socket通讯开发教程,因此,我们需要先了理一下protobuf 是什么? Protocol buffers是一种编码方法构造的一种有效而可扩展的格式 ...
- jquery向下取整
var currentMoney =Math.round((_memberCurrentPoints/_pointVsMoney)*Math.pow(10,2))/Math.pow(10,2) * 2 ...
- HTML 转文本及HTML内容提取(C#)
//1.HTML直接转文本 //使用方法 HtmlToText convert = new HtmlToText(); textBox2.Text = convert.Convert(textBox1 ...
- ASP.NET MVC3.0或4.0设置二级域名的方法
之前我就想做二级域名指向同一个IP同一个程序无非是在路由匹配规则上做文章也就是对Url的重写的一种思路.我用了半天时间上网查阅了相关资料并做了Demo测试是完全 以的,在这分享给大家... 假如网站主 ...