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

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

学习要点：

1.表格

2.按钮

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

一．表格

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

1.基本格式

//实现基本的表格样式

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

2.条纹状表格

//让

里的行产生一行隔一行加单色背景效果

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

3.带边框的表格

//给表格增加边框

4.悬停鼠标

//让

下的表格悬停鼠标实现背景效果

5.状态类

//可以单独设置每一行的背景样式

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

样式说明:

　　active鼠标悬停在行或单元格上
　　success标识成功或积极的动作
　　info标识普通的提示信息或动作
　　warning标识警告或需要用户注意
　　danger表示危险或潜在的带来负面影响的动作

6.隐藏某一行

//隐藏行

7.响应式表格

//表格父元素设置响应式，小于 768px 出现边框
 

二．按钮

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

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

//转化成普通按钮
Link
Button

注意事项有三点：

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

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

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

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

(3).跨浏览器展现

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

另外，我们还发现了 Firefox 元素所创建的按钮设置 line-height 属性，这就导致在Firefox 浏览器上不能完全和其他按钮保持一致的高度。

2.预定义样式

//一般信息
Button 

样式说明

　　btn-default默认样式
　　btn-success成功样式
　　btn-info一般信息样式
　　btn-warning警告样式
　　btn-danger危险样式
　　btn-primary首选项样式
　　btn-link链接样式

3.尺寸大小

//从大到小的尺寸
Button
Button
Button
Button 

4.块级按钮

//块级换行
Button
Button 

5.激活状态

//激活按钮
Button 

6.禁用状态

//禁用按钮
Button

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

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系[e-mail]核实处理。

相关文章

相关视频

---

• javascript怎么将值类型强制转为字符串
• javascript中什么是位运算符
• javascript怎么判断字符串是否是数字
• 总结分享： 6 种JavaScript的打断点的方...
• 第三章之Bootstrap 表格与按钮功能_jav...

网友评论

文明上网理性发言，请遵守 新闻评论服务协议

我要评论

立即提交

专题推荐

• 独孤九贱-php全栈开发教程

  全栈 170W+

  主讲：Peter-Zhu 轻松幽默、简短易学，非常适合PHP学习入门

• 玉女心经-web前端开发教程

  入门 80W+

  主讲：灭绝师太 由浅入深、明快简洁，非常适合前端学习入门

• 天龙八部-实战开发教程

  实战 120W+

  主讲：西门大官人 思路清晰、严谨规范，适合有一定web编程基础学习

作者信息

认证0级讲师

发布技术文章

• 最新文章
• 热门排行

• javascript中什么是位运算符
• javascript怎么将值类型强制转为字符串
• javascript怎么判断字符串是否是数字
• JavaScript怎么求多个数的平均值
• 聊聊Angular中父子组件间怎么传递数据
• 总结分享： 6 种JavaScript的打断点的方式（收藏学习）
• Node项目中用images+imageinfo库给图片批量添加水印
• javascript怎么去掉小数点后两位

• JS 是什么意思
• json格式是什么？json格式文件怎么打开？
• RN布局的实例详解
• sqrt函数怎么使用
• js数组如何删除指定位置的元素？删除指定位置元素的2种方法
• 2021年前端vue面试题大汇总（附答案）
• echarts柱状图颜色设置：echarts柱状图如何设置不同颜色？（代码）
• 如何理解vue数据双向绑定原理

推荐视频教程

javascript初级视频教程

jquery 基础视频教程

视频教程分类

• php视频教程
• html视频教程
• css视频教程
• JS视频教程
• jQuery视频教程
• mysql视频教程
• Linux视频教程
• Python视频教程

• 网站首页
• PHP视频
• PHP实战
• PHP代码
• PHP手册
• 词条
• 手记
• 编程词典
• php培训

：公益在线php培训，帮助PHP学习者快速成长！

Copyright 2014-2021 https://www.php.cn/ All Rights Reserved | 苏ICP备2020058653号-1关于我们免责申明赞助与捐赠广告合作