第三章之Bootstrap 表格与按钮功能


Posted in Javascript onApril 25, 2016

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

学习要点:

1.表格

2.按钮

本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各种丰富的效果。

一.表格

Bootstrap 提供了一些丰富的表格样式供开发者使用。

1.基本格式

//实现基本的表格样式
<table class="table">

注:我们可以通过 Firebug 查看相应的 CSS。

2.条纹状表格

//让<tbody>里的行产生一行隔一行加单色背景效果
<table class="table table-striped">

注:表格效果需要基于基本格式.table

3.带边框的表格

//给表格增加边框
<table class="table table-bordered">

4.悬停鼠标

//让<tbody>下的表格悬停鼠标实现背景效果
<table class="table table-hover">

5.状态类

//可以单独设置每一行的背景样式
<tr class="success">

注:一共五种不同的样式可供选择。

样式说明:

active鼠标悬停在行或单元格上

success标识成功或积极的动作

info标识普通的提示信息或动作

warning标识警告或需要用户注意

danger表示危险或潜在的带来负面影响的动作

6.隐藏某一行

//隐藏行
<tr class="sr-only">

7.响应式表格

//表格父元素设置响应式,小于 768px 出现边框
<body class="table-responsive">

二.按钮

Bootstrap 提供了很多丰富按钮供开发者使用。

1.可作为按钮使用的标签或元素

//转化成普通按钮
<a href="###" class="btn btn-default">Link</a>
<button class="btn btn-default">Button</button>
<input type="button" class="btn btn-default" value="input">

注意事项有三点:

(1).针对组件的注意事项

虽然按钮类可以应用到 <a> 和 <button> 元素上,但是,导航和导航条组件只支持<button> 元素。

(2).链接被作为按钮使用时的注意事项

如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分,那么,务必为其设置 role="button" 属性。

(3).跨浏览器展现

我们总结的最佳实践是:强烈建议尽可能使用 <button> 元素来获得在各个浏览器上获得相匹配的绘制效果。

另外,我们还发现了 Firefox <30 版本的浏览器上出现的一个 bug,其表现是:阻止我们为基于 <input> 元素所创建的按钮设置 line-height 属性,这就导致在Firefox 浏览器上不能完全和其他按钮保持一致的高度。

2.预定义样式

//一般信息
<button class="btn btn-info">Button</button>

样式说明

btn-default默认样式

btn-success成功样式

btn-info一般信息样式

btn-warning警告样式

btn-danger危险样式

btn-primary首选项样式

btn-link链接样式

3.尺寸大小

//从大到小的尺寸
<button class="btn btn-lg">Button</button>
<button class="btn">Button</button>
<button class="btn btn-sm">Button</button>
<button class="btn btn-xs">Button</button>

4.块级按钮

//块级换行
<button class="btn btn-block">Button</button>
<button class="btn btn-block">Button</button>

5.激活状态

//激活按钮
<button class="btn active">Button</button>

6.禁用状态

//禁用按钮
<button class="btn active disabled">Button</button>

以上所述是小编给大家介绍的Bootstrap 表格与按钮功能,希望对大家有所帮助!

Javascript 相关文章推荐
newxtree.js代码
Mar 13 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
jQuery给多个不同元素添加class样式的方法
Mar 26 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
浅谈KOA2 Restful方式路由初探
Mar 14 Javascript
我要点爆”微信小程序云开发之项目建立与我的页面功能实现
May 26 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
浅谈node.js中间件有哪些类型
Apr 29 Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 #Javascript
第四章之BootStrap表单与图片
Apr 25 #Javascript
第五章之BootStrap 栅格系统
Apr 25 #Javascript
详解Bootstrap插件
Apr 25 #Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 #Javascript
第六章之辅组类与响应式工具
Apr 25 #Javascript
第七章之菜单按钮图标组件
Apr 25 #Javascript
You might like
建立动态的WML站点(三)
2006/10/09 PHP
PHP面向对象分析设计的61条军规小结
2010/07/17 PHP
thinkphp控制器调度使用示例
2014/02/24 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
php 无限分类 树形数据格式化代码
2016/10/11 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
js 自定义的联动下拉框
2010/02/07 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
javascript实现可键盘控制的抽奖系统
2016/03/10 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
JavaScript 性能提升之路(推荐)
2019/04/10 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
JS创建自定义对象的六种方法总结
2020/12/15 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
11个并不被常用但对开发非常有帮助的Python库
2015/03/31 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
keras自动编码器实现系列之卷积自动编码器操作
2020/07/03 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
python 实现图片批量压缩的示例
2020/12/18 Python
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
说出一些常用的类,包,接口
2014/09/22 面试题
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
庆元旦广播稿
2014/02/10 职场文书
详解Redis集群搭建的三种方式
2021/05/31 Redis
python非标准时间的转换
2021/07/25 Python
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers