基本格式.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知识记录：表格和按钮的更多相关文章

  1. Bootstrap知识记录：表单和图片

    一．表单Bootstrap 提供了一些丰富的表单样式供开发者使用.1.基本格式//实现基本的表单样式<form><div class="form-group"&g ...

  2. Bootstrap知识记录：排版样式

    ---恢复内容开始--- 一．页面排版Bootstrap 提供了一些常规设计好的页面排版的样式供开发者使用.1.页面主体Bootstrap 将全局font-size 设置为14px,line-heig ...

  3. bootstrap表格添加按钮、模态框实现

    bootstrap表格添加按钮.模态框实现 原创 2017年07月20日 17:35:48 标签: bootstrap 1723 bootstrap表格添加按钮.模态框实现 - 需求: 需要表格后面每 ...

  4. bootstrap之表格和按钮

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 第二百三十三节，Bootstrap表格和按钮

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

  6. 【Bootstrap】 bootstrap-table表格组件

    [Bootstrap-table] 顾名思义,这个组件专注于bootstrap风格的表格的设计,并且提供了很多表格的基础和进阶的功能,给我们开发前端的表格省下很多力气. 本文主要参考这位博主的系列文章 ...

  7. Web前端理论知识记录

      Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...

  8. Bootstrap <基础五>表格

    Bootstrap 提供了一个清晰的创建表格的布局.下表列出了 Bootstrap 支持的一些表格元素: 标签 描述 <table> 为表格添加基础样式. <thead> 表格 ...

  9. bootstrap知识小点

    年底没什么项目做了,整理下最近做的网站使用到的bootstrap知识 一.导入bootstrap样式和脚本 <link href="css/bootstrap.min.css" ...

随机推荐

  1. webdriver设置浏览器全屏及设置浏览器窗口为特定大小的方法

    from selenium import webdriver driver = webdriver.Chrome() #全屏 driver.maximize_window() #具体大小 driver ...

  2. 【FJWC 2019】 森林

    [FJWC 2019] 森林 样例输入 0 5 1 0 0 2 样例输出 1 2 3 3 我们发现,答案就是直径加上直径上某个点出发,不经过其他直径上的点的最长链.这里的直径可以是任意一条直径. 首先 ...

  3. tushare 开源数据包的使用

    tushare 使用 python开源金融接口包: tushare.org/trading.html#d2 安装: pip install tushare import tushare as ts # ...

  4. SQLite的原子提交--单文件场景

    3. 单文件提交 我们首先概要说明SQLite在单个数据库文件上为了执行事务的原子提交而采取的步骤.在后面的部分将讨论如何设计文件格式以保护其在断电故障中损坏,以及原子提交在多个数据库上的执行. 3. ...

  5. vue与jquey

    vue与jquey jQuery是使用选择器($)选取DOM对象,对其进行赋值.取值.事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的.比如需要 ...

  6. Spring获取实现某接口的所有实例bean

    1.获取 applicationContext,通过ApplicationAware自动注入 2.getBeansOfType.getBeanNamesForType Map<String, I ...

  7. VBA果然很强大

    1.我的是office 2007,新建空白文档-开发工具 -visual basic -project -thisDocument   - Document_Open ,写入以下代码(并另存为word ...

  8. 发现一款比echarts更牛B，效果更炫的图表组件 d3.js

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code d3.js  ,能制作更加复杂的图表 https://github.com/d3/d3 ...

  9. Python：Day21

    序列化 我们把对象(变量)从内存中变成可存储或可传输的过程称之为序列化 json模块

  10. Flask中无法在其他函数中查询Sqlachemy的解决办法

    报错信息部分截取: File "D:\python 3.5\lib\site-packages\flask_sqlalchemy\__init__.py", line 912, i ...