首页 > 代码库 > 第 3 表格和按钮
第 3 表格和按钮
本节课我们主要学习一下 Bootstrap 表格和按钮功能，通过内置的 CSS 定义，显示各种丰富的效果。一．表格Bootstrap 提供了一些丰富的表格样式供开发者使用。1. 基本格式//实现基本的表格样式<table class="table">注：我们可以通过 Firebug 查看相应的 CSS。2. 条纹状表格//让<tbody>里的行产生一行隔一行加单色背景效果<table class="table table-striped">注：表格效果需要基于基本格式.table3. 带边框的表格//给表格增加边框<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>
第 3 表格和按钮
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。