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" ...
随机推荐
- SpringCloud之初识Zuul(网关)---动态路由,权限验证
通过前面的学习,使用Spring Cloud实现微服务的架构基本成型,大致是这样的: 我们使用Spring Cloud Netflix中的Eureka实现了服务注册中心以及服务注册与发现:而服务间通过 ...
- Teradata 终止回滚方法（rcvmanager工具）
1.使用root用户登录数据库节点 ssh root 2.启动database window cnsterm 3.启动rcvmanager start rcvmanager 4.确认utiltiy在哪 ...
- own address as source address
1222.762730] br0: received packet on nbif0 with own address as source address[ 1222.769697] br0: rec ...
- 前端性能优化成神之路--SSR（服务端渲染）
Nuxt.js的介绍 Nuxt.js概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用V ...
- leetcode第一刷_Merge Intervals
看到这个题我就伤心啊,去微软面试的时候,第一个面试官让我做的题目就是实现集合的交操作,这个集合中的元素就像这里的interval一样.是一段一段的.当时写的那叫一个慘不忍睹.最后果然被拒掉了. .好好 ...
- centos7下安装docker（24docker swarm 数据管理）
service的容器副本会scal up/down,会failover,会在不同的主机上创建和销毁,这就引出一个问题,如果service有数据,那么这些数据该如何存放呢? 1.打包在容器中: 显然不行 ...
- php实现斐波那契数列
斐波那契数列: 1 1 2 3 5 8 13 21 34 55 … 概念: 前两个值都为1,该数列从第三位开始,每一位都是当前位前两位的和 规律公式为: Fn = F(n-1) + F(n+1) F: ...
- 2018年尚硅谷《全套Java、Android、HTML5前端视频》
全套整合一个盘里:链接:https://pan.baidu.com/s/1nwnrWOp 密码:h4bw 如果分类里没有请下载下边那些小项教程链接 感谢尚硅谷提供的视频教程:http://www.at ...
- 深入解读RabbitMQ工作原理及简单使用
RabbitMQ系列目录 RabbitMQ在Ubuntu上的环境搭建 深入解读RabbitMQ工作原理及简单使用 Rabbit的几种工作模式介绍与实践 Rabbit事务与消息确认 Rabbit集群搭建 ...
- Ubuntu16.04环境安装jenkins
前提:系统必须安装jdk 如果没有安装可通过如下命令安装: sudo add-apt-repository ppa:openjdk-r/ppa sudo apt update sudo apt ins ...