Bootstrap知识记录：表格和按钮
基本格式.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知识记录：表格和按钮的更多相关文章
- Bootstrap知识记录：表单和图片
一．表单Bootstrap 提供了一些丰富的表单样式供开发者使用.1.基本格式//实现基本的表单样式<form><div class="form-group"&g ...
- Bootstrap知识记录：排版样式
---恢复内容开始--- 一．页面排版Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用.1.页面主体Bootstrap 将全局font-size 设置为14px,line-heig ...
- bootstrap表格添加按钮、模态框实现
bootstrap表格添加按钮.模态框实现 原创 2017年07月20日 17:35:48 标签: bootstrap 1723 bootstrap表格添加按钮.模态框实现 - 需求: 需要表格后面每 ...
- bootstrap之表格和按钮
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 第二百三十三节，Bootstrap表格和按钮
Bootstrap表格和按钮 学习要点: 1.表格 2.按钮 本节课我们主要学习一下 Bootstrap 表格和按钮功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一．表格 Bootstrap ...
- 【Bootstrap】 bootstrap-table表格组件
[Bootstrap-table] 顾名思义,这个组件专注于bootstrap风格的表格的设计,并且提供了很多表格的基础和进阶的功能,给我们开发前端的表格省下很多力气. 本文主要参考这位博主的系列文章 ...
- Web前端理论知识记录
Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...
- Bootstrap <基础五>表格
Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格 ...
- bootstrap知识小点
年底没什么项目做了,整理下最近做的网站使用到的bootstrap知识 一.导入bootstrap样式和脚本 <link href="css/bootstrap.min.css" ...
随机推荐
- 译文——The habits of highly successful people
1.Morning Routine (早上列行公事) Probably the most common habit ultra-successful people have is they can t ...
- 【Teradata】块压缩（ferret工具）
多值压缩(MVC) Enhanced Multi-Value Compression (MVC) or Value-List Compression• Compress VARCHAR, VARBYT ...
- CF917D Stranger Trees
CF917D Stranger Trees 题目描述 给定一个树,对于每个\(k=0,1\cdots n-1\),问有多少个生成树与给定树有\(k\)条边重合. 矩阵树定理+高斯消元 我们答案为\(f ...
- ElasticSearch（四）：使用Java连接ElasticSearch集群
public class ESIndexMapping { private static String host="192.168.56.3"; // 服务器地址 private ...
- [tool] google搜索的正确使用姿势(待补全)
第一,也是非常重要的前提,请一定要能FQ.如果这条没有解决,没有往下的必要 现在我假设你已经能FQ了,个人推荐使用搜索引擎的顺序: Google>微软bing国际搜索>百度 (百度总能给你 ...
- （二 -3-1） 天猫精灵接入Home Assistant-自动发现Mqtt设备--灯系列 实战
#本片教程介绍了具体如何实现天猫精灵控制一个灯. 前提: HASS平台 你已经搭建一个可以在公网IP访问到的HASS平台--- 我用的是租了阿里云服务器,买了个域名,ubuntu1604系统 你已经搭 ...
- Debian 8.9 搭建wordpress个人博客
想自己搭个博客玩玩,就搭建了此博客,过程可谓艰辛啊! 先在阿里云买了个 轻量应用服务器 1个月10块钱,好贵.... 用 windows sever 下载不了phpstudy,也不知道怎么回事... ...
- WPF(一)
什么是WPF WPF(Windows Presentation Foundation)是用于Windows的现代图形显示系统.与之前出现的技术相比,WPF发生了根本性变化.WPF引用了"内置 ...
- centos 7 安装 MySQL 5.6
由于Centos7 默认数据库是mariabd,所以通过rpm安装MySQL需要卸载原有的Mariabd,再下载所有的依赖包比较麻烦且容易出错.通过yum的方式安装.yum其实是rpm的一个升级将所有 ...
- PIL、Pillow安装使用方法
PIL(Python Imaging Library)是Python常用的图像处理库,而Pillow是PIL的一个友好Fork,提供了了广泛的文件格式支持,强大的图像处理能力,主要包括图像储存.图像显 ...