栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

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

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

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

 

注意事项有三点:

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

虽然按钮类可以应用到 和

样式说明

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

3.尺寸大小

//从大到小的尺寸



 

4.块级按钮

//块级换行

 

5.激活状态

//激活按钮
 

6.禁用状态

//禁用按钮

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

转载请注明:文章转载自 www.mshxw.com
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号