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" ...
随机推荐
- Python编码问题小结
开门见山 decode的作用是将其他编码的字符串转换成Unicode编码,如str1.decode('gb2312'),表示将gb2312编码的字符串str1转换成Unicode编码. encode的 ...
- Scrapy 框架 中间件 代理IP 提高效率
中间件 拦截请求跟响应 进行ua(User-Agent ) 伪装 代理 IP 中间件位置: 引擎 和下载器 中间 的中间件 ( 下载中间件) 引擎 跟 spider 中间 的中间件 ( 爬虫中间件)( ...
- C#多线程の遇见长耗时操作以及多任务（简明记要）
4.0用 Task.Factory.StartNew(()=>{});4.0以下用 ThreadPool.QueueUserWorkItem(()=>{})4.0以上用 ...
- springcloud(十五)：Spring Cloud 终于按捺不住推出了自己的服务网关 Gateway
Spring 官方最终还是按捺不住推出了自己的网关组件:Spring Cloud Gateway ,相比之前我们使用的 Zuul(1.x) 它有哪些优势呢?Zuul(1.x) 基于 Servlet,使 ...
- 配置数据库方言——hibernate
RDBMS 方言 DB2 org.hibernate.dialect.DB2Dialect DB2 AS/400 org.hibernate.dialect.DB2400Dialect DB2 OS3 ...
- OAuth2基本概念和运作流程
OAuth(开放授权)是一个关于授权的开放标准,允许用户让第三方应用访问该用户在某一网站上存储的私密的资源(如照片,视频,联系人列表),而无需将用户名和密码提供给第三方应用.目前的版本是2.0版,本文 ...
- D. Diverse Garland
题意:灯有三种颜色R,G,B.只要同一种颜色相邻就不可以.问最少需要换几次,可以使在一串灯中没有相邻灯的颜色相同. 思路:贪心思路:我们知道一个程序都是要子阶段,然后子阶段各个组合起来形成这个程序.那 ...
- springmvc组件--ViewResolver
无论Controller是何种返回类型最终都会被封装成一个ModelAndView对象,然后交由ViewResolver解析成Vie对象.该接口定义非常简单,根据传入视图的逻辑名(var1)和相应的国 ...
- day22 Pythonpython 本文xml模块
一.xml介绍 xml是实现不同语言或者程序直接进行数据交换的协议,跟json差不多,单json使用起来更简单.不过现在还有很多传统公司的接口主要是xml xml跟html都是标签语言 我们主要学习的 ...
- Redis入门篇（安装与启动）
一.Redis介绍 Redis是NoSql的一种,在弄清楚Redis是个什么玩意之前,先了解下NoSql是什么.1.什么是NoSql NoSql,全名:Not Only Sql,是一种非关系型数据库, ...