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

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

学习要点:

1.表格

2.按钮

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

一.表格

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

1.基本格式

rush:js;"> //实现基本的表格样式

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

2.条纹状表格

rush:js;"> //让
里的行产生一行隔一行加单色背景效果

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

3.带边框的表格

rush:js;"> //给表格增加边框

4.悬停鼠标

rush:js;"> //让
下的表格悬停鼠标实现背景效果

5.状态类

rush:js;"> //可以单独设置每一行的背景样式

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

样式说明:

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

6.隐藏某一行

rush:js;"> //隐藏行

7.响应式表格

rush:js;"> //表格父元素设置响应式,小于 768px 出现边框

二.按钮

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

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

rush:js;"> //转化成普通按钮

注意事项有三点:

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

虽然按钮类可以应用到

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

相关文章

Bootstrip HTML 查询搜索常用格式模版 <form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...