第三章之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 相关文章推荐
for 循环性能比较 提高for循环的效率
Mar 19 Javascript
js中widow.open()方法使用详解
Jul 30 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
Jun 24 Javascript
javascript比较两个日期相差天数的方法
Jul 23 Javascript
jQuery无刷新切换主题皮肤实例讲解
Oct 21 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
js 递归json树实现根据子id查父id的方法分析
Nov 08 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
原生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
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
2013/06/06 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
jquery图片切换插件
2015/03/16 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
jQuery实现拖动效果的实例代码
2017/06/25 jQuery
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
vue项目实现多语言切换的思路
2020/09/17 Javascript
python搭建简易服务器分析与实现
2012/12/15 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
获取python文件扩展名和文件名方法
2018/02/02 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
Python应用库大全总结
2018/05/30 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
Python单元和文档测试实例详解
2019/04/11 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
thinkphp5 路由分发原理
2021/03/18 PHP
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
2014年领导班子专项整治整改方案
2014/09/28 职场文书
四风查摆剖析材料
2014/10/10 职场文书
工作失误检讨书
2015/01/26 职场文书
英文邀请函
2015/02/02 职场文书
公务员年终个人总结
2015/02/12 职场文书
财务工作个人总结
2015/02/27 职场文书
美术教师求职信范文
2015/03/20 职场文书
战马观后感
2015/06/08 职场文书