第六篇Bootstrap表格样式介绍
基本表格:
<table> <tr><td>用户名</td><td>密码</td></tr> <tr><td>啊啊啊</td><td>1111</td></tr> </table>
在<table>
标签添加.table
类可以为其赋予基本的样式 ,少量的内补(padding)和水平方向的分隔线。
显示效果如下:
条纹状表格:
在table标签上加上:class=”table table-striped”可以给tbody之内的每一行增加斑马条纹样式
<table> <tr><td>用户名</td><td>密码</td></tr> <tr><td>啊啊啊</td><td>1111</td></tr> </table>
显示效果如下:
带边框的表格:
在table标签上加上class=” table table-bordered”可以为表格的每个单元格增加边框。
<table> <tr><td>用户名</td><td>密码</td></tr> <tr><td>啊啊啊</td><td>1111</td></tr> </table>
显示效果如下:
紧缩表格:
通过添加.table-condensed
类可以让表格更加紧凑,单元格中的内补(padding)均会减半
<table> <tr><td>用户名</td><td>密码</td></tr> <tr><td>啊啊啊</td><td>1111</td></tr> </table>
显示效果如下:
响应式表格:
将任何.table
元素包裹在.table-responsive
元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失
<div> <table> <tr><td>用户名</td><td>密码</td></tr> <tr><td>啊啊啊</td><td>1111</td></tr> </table> </div>
以上所述是小编给大家介绍的第六篇Bootstrap表格样式介绍的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
相关推荐
-
JS组件Bootstrap Table表格行拖拽效果实现代码
一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态.可能描述会让大家模拟两可,反正已经实现了,先来看看效果图吧. 1.先看看拖动之前的效果 2
-
JS组件Bootstrap Table表格多行拖拽效果实现代码
前言:前天刚写了篇JS组件Bootstrap Table表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态 二.需求分析 通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的
-
Bootstrap表格和栅格分页实例详解
拼接table请将以下代码直接运行:换下 bootstrap.css jquery-1.12.3.min.js bootstrap-paginator.min.js" <!DOCTYPE html> <html> <head lang="zh-cn"> <title>产品列表</title> <meta charset="utf-" /> <meta http-equiv=&qu
-
浅析Bootstrap表格的使用
Bootstrap - 简洁.直观.强悍.移动设备优先的前端开发框架,让web开发更迅速.简单.下面给大家介绍Bootstrap表格的使用,一起学习吧. 先定义前端table <table class="table table-striped table-bordered table-hover" id="expandabledatatable"></table> 然后是JS /* * 初始化表格 */ var oTable = $('#ex
-
Bootstrap3学习笔记(三)之表格
在上篇文章给大家介绍了 BootStrap3学习笔记(一)之网格系统 Bootstrap3学习笔记(二)之排版 只需要在table标签上使用.table类,就可以使用bootstrap默认的表格样式 如果需要行背景有交替变化,可以这样设定: 复制代码 代码如下: <table class="table table-striped"> 如果需要边框,可以这样设定: 复制代码 代码如下: <table class="table table-border
-
基于Bootstrap使用jQuery实现简单可编辑表格
editTable.js 提供编辑表格当前行.添加一行.删除当前行的操作,其中可以设置参数,如: operatePos 用于设置放置操作的列,从0开始,-1表示以最后一列作为放置操作的列:(这里的操作包括 编辑当前行.在当前行下添加一行.删除当前行) handleFirst 设置表格的第一行是否作为操作的对象,true为真,false为假: edit.save.cancel.add.confirm.del 分别设置显示操作的操作名,默认显示"编辑"."保存".&qu
-
第三章之Bootstrap 表格与按钮功能
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各种丰富的效果. 一.表格 Bootstrap 提供了一些丰富的表格样式供开发者使用. 1.基本格式 //实现基本的表格样式 <table class="table"> 注:
-
JS组件系列之Bootstrap table表格组件神器【终结篇】
bootstrap table系列: JS表格组件神器bootstrap table详解(基础版) JS组件系列之Bootstrap table表格组件神器[终结篇] JS组件系列之Bootstrap table表格组件神器[二.父子表和行列调序] Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等.那么本文给大家介绍JS组件系列之Bootstrap
-
第六篇Bootstrap表格样式介绍
基本表格: <table> <tr><td>用户名</td><td>密码</td></tr> <tr><td>啊啊啊</td><td>1111</td></tr> </table> 在<table>标签添加.table类可以为其赋予基本的样式 ,少量的内补(padding)和水平方向的分隔线. 显示效果如下: 条纹状表格: 在t
-
Bootstrap 实现表格样式、表单布局的实例代码
1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <link rel="stylesheet" href="./css
-
BootStrap CSS全局样式和表格样式源码解析
CSS全局样式 1.布局容器类样式:.container 和 .container-fluid .container 固定宽度并且具有响应式. .container-fluid 自由宽度(100%宽度). 这2个class是直接在body标签下建立一个div标签,class等于这2个中的一个. 然后其他内容全部写在这个div标签中即可! 例如: <!DOCTYPE html> <html> <head> <title>BootStrap基础入门</ti
-
Bootstrap基本样式学习笔记之表格(2)
Bootstrap实现了大量基本样式,包括表格.表单.按钮.图片等.基本的使用方法是通过添加特定的class来实现. Bootstrap 提供了一个清晰的创建表格的布局. 0x01 表格样式 (1)基本样式:不带边框和分割线: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport&qu
-
第三篇Bootstrap网格基础
Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 网格系统类似一个表格,有行和列,它必须放置在一个类型设置为container的容器里,可以是div,内容放置在列内,网页设计中的网格用于布局内容,让网站易于浏览,下面是一个用bootstrap网格布局的例子. <div> <div>col2</div> <div>col10</div> </div>
-
第二篇Bootstrap起步
在上篇文章给大家介绍了Bootstrap的基础知识,接下来通过本文给大家介绍 我们可以在http://getbootstrap.com下载bootstrap的文件 点击左边的download bootstrap可以下载bootstrap的css,javascript和字体库的已编译版本.点击中间的download source可以下载bootstrap的源代码.一般情况下我们使用bootstrap点击左边的已编译版本下载就可以了. 如果下载的是已编译版结构是: 如果下载的是源代码结构是: Dis
-
第五篇Bootstrap 排版
使用bootstrap的排版特性可以创建标题,段落,列表及其它内联元素. 标题:bootstrap中定义了从h1-h6的六种标题样式. 内联子标题: 如果需要向任意一个标题添加一个子标题,只需要加上<small></small>例如: <h1>我是标题1 h1. <small>我是副标题1 h1</small></h1> <h2>我是标题2 h2. <small>我是副标题2 h2</small>&
-
bootstrap表格内容过长时用省略号表示的解决方法
首先 ,bootstrap中当td内容超过我给的固定宽度时,省略号代替的代码如下: <table class="table table-bordered"> <thead> <tr> <th class="center" style='width:38%;'>商品名称</th> <th class="center" style='width:36%;'>详细介绍</th
-
bootstrap自定义样式之bootstrap实现侧边导航栏功能
bootstrap自带的响应式导航栏是向下滑动的,有时满足不了个性化的需求,需要做一个类似于android drawerLayout 侧滑的菜单,这就是我要实现的bootstrap自定义侧滑菜单,参考了很多官网的侧滑,实现方法各有不同,优缺点也十分明显,有的官网首页为了仅仅实现一个侧滑的效果,用了owl.carousel滑屏的插件,个人觉得小题大做了.这个bootstrap侧滑菜单更专业的名字叫做手机导航栏.我也比较这个名字,更符合bootstrap的特性.所以我这篇文章介绍的更容易的一种做法,
随机推荐
- AngularJS 模块详解及简单实例
- Hadoop上Data Locality的详解
- 简单实现iOS指纹解锁(TouchID)
- C# 使用Free Spire.Presentation 实现对PPT插入、编辑、删除表格
- Powershell检查网站响应并计算执行时间例子
- MySQL导出所有Index和约束的方法
- java 中modCount 详解及源码分析
- ORACLE 报警日志如何查看?第1/2页
- MySQL中Distinct和Group By语句的基本使用教程
- Java文件(io)编程之文件字符流使用方法详解
- 数据库删除完全重复和部分关键字段重复的记录
- SQL Server 2005/2008 导入导出数据常见报错解决方法
- 实现让DeDecms的上下文章链接限制在当前栏目内
- python利用标准库如何获取本地IP示例详解
- 分享10个很棒的学习Android开发的网站
- php中实现简单的ACL 完结篇
- C/C++利用libxml2高效输出XML大文件详解
- CI框架安全过滤函数示例
- Go 中 slice 的 In 功能实现探索
- MyBatis insert操作插入数据之后返回插入记录的id