第六篇Bootstrap表格样式介绍


Posted in Javascript onJune 21, 2016

基本表格:

<table>
<tr><td>用户名</td><td>密码</td></tr>
<tr><td>啊啊啊</td><td>1111</td></tr>
</table>

<table>标签添加.table类可以为其赋予基本的样式 ,少量的内补(padding)和水平方向的分隔线。

显示效果如下:

第六篇Bootstrap表格样式介绍

条纹状表格:

在table标签上加上:class=”table table-striped”可以给tbody之内的每一行增加斑马条纹样式

<table>
<tr><td>用户名</td><td>密码</td></tr>
<tr><td>啊啊啊</td><td>1111</td></tr>
</table>

显示效果如下:

第六篇Bootstrap表格样式介绍

带边框的表格:

在table标签上加上class=” table table-bordered”可以为表格的每个单元格增加边框。

<table>
<tr><td>用户名</td><td>密码</td></tr>
<tr><td>啊啊啊</td><td>1111</td></tr>
</table>

显示效果如下:

第六篇Bootstrap表格样式介绍

紧缩表格:

通过添加.table-condensed类可以让表格更加紧凑,单元格中的内补(padding)均会减半

<table>
<tr><td>用户名</td><td>密码</td></tr>
<tr><td>啊啊啊</td><td>1111</td></tr>
</table>

显示效果如下:

第六篇Bootstrap表格样式介绍

响应式表格:

将任何.table元素包裹在.table-responsive元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失

<div>
<table>
<tr><td>用户名</td><td>密码</td></tr>
<tr><td>啊啊啊</td><td>1111</td></tr>
</table>
</div>

以上所述是小编给大家介绍的第六篇Bootstrap表格样式介绍的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
整理8个很棒的 jQuery 倒计时插件和教程
Dec 12 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
javascript中checkbox使用方法实例演示
Nov 19 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
详解Vuejs2.0之异步跨域请求
Apr 20 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
Vue动态组件和异步组件原理详解
May 06 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
解决layui动态加载复选框无法选中的问题
Sep 20 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 #Javascript
第五篇Bootstrap 排版
Jun 21 #Javascript
Javascript随机标签云代码实例
Jun 21 #Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 #Javascript
JS实现的跨浏览器解析XML文件实例
Jun 21 #Javascript
第四篇Bootstrap网格系统偏移列和嵌套列
Jun 21 #Javascript
第三篇Bootstrap网格基础
Jun 21 #Javascript
You might like
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
百度站点地图(百度sitemap)生成方法分享
2014/01/09 PHP
如何使用PHP Embed SAPI实现Opcodes查看器
2015/11/10 PHP
PHP中each与list用法分析
2016/01/08 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
JavaScript编程中容易出BUG的几点小知识
2015/01/31 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
nodejs爬虫抓取数据乱码问题总结
2015/07/03 NodeJs
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
2018/11/13 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
vue+elementUI实现简单日历功能
2020/09/24 Javascript
python executemany的使用及注意事项
2017/03/13 Python
python使用opencv进行人脸识别
2017/04/07 Python
PyQt5 实现字体大小自适应分辨率的方法
2019/06/18 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
德国网上药房:Apotal
2017/04/04 全球购物
表扬信格式
2014/01/12 职场文书
高考备战决心书
2014/03/11 职场文书
自我评价优缺点范文
2015/03/11 职场文书
《伯牙绝弦》教学反思
2016/02/16 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
python实现MD5进行文件去重的示例代码
2021/07/09 Python
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
Python开发五子棋小游戏
2022/05/02 Python