前端框架Bootstrap--表格和按钮

前端框架Bootstrap--表格和按钮_第1张图片
Paste_Image.png
以下是Bootstrap--表格和按钮样式的相关知识,希望对你们有所帮助:
一、表格

1.基本格式
//实现基本的表格样式


注:我们可以通过Firebug查看相应的css

例子

前端框架Bootstrap--表格和按钮_第2张图片
Paste_Image.png

引入bootstrap样式前

前端框架Bootstrap--表格和按钮_第3张图片
Paste_Image.png

引入bootstrap样式后

前端框架Bootstrap--表格和按钮_第4张图片
Paste_Image.png
2.条纹状表格

//让

里的行产生一行隔一行加单色背景效果

注:表格效果需要基于基本格式.table

例子

前端框架Bootstrap--表格和按钮_第5张图片
Paste_Image.png

引入bootstrap样式前

前端框架Bootstrap--表格和按钮_第6张图片
Paste_Image.png

引入bootstrap样式后

Paste_Image.png
3.带边框的表格

//给表格增加边框

例子

前端框架Bootstrap--表格和按钮_第7张图片
Paste_Image.png

引入bootstrap样式前

前端框架Bootstrap--表格和按钮_第8张图片
Paste_Image.png

引入bootstrap样式后

Paste_Image.png
4.悬停鼠标

例子

前端框架Bootstrap--表格和按钮_第9张图片
Paste_Image.png

引入bootstrap样式前

前端框架Bootstrap--表格和按钮_第10张图片
Paste_Image.png

引入bootstrap样式后

Paste_Image.png
5.状态类

//可以单独设置每一行的背景样式

注:一共五种不同的样式可供选择

样式 说明
active 鼠标悬停在行或单元格上
success 标识成功或积极的动作
info 标识普通的提示信息或动作
warning 标识警告或需要用户注意
danger 表示危险或潜在的带来负面影响的动作

例子

前端框架Bootstrap--表格和按钮_第11张图片
Paste_Image.png

引入以上阐述的bootstrap样式前

Paste_Image.png

引入以上阐述的bootstrap样式后

Paste_Image.png
6.隐藏某一行

例子

前端框架Bootstrap--表格和按钮_第12张图片
Paste_Image.png

引入以上阐述的bootstrap样式前

Paste_Image.png

引入以上阐述的bootstrap样式后

Paste_Image.png
7.响应式表格

//表格父元素设置响应式,小于768px出现边框

例子

前端框架Bootstrap--表格和按钮_第13张图片
Paste_Image.png

引入以上阐述的样式前

前端框架Bootstrap--表格和按钮_第14张图片
Paste_Image.png

引入以上阐述的bootstrap样式后

前端框架Bootstrap--表格和按钮_第15张图片
Paste_Image.png
二、按钮

Bootstrap提供了很多丰富按钮
1.可作为按钮使用的标签或元素
//转化成普通按钮
link

例子

前端框架Bootstrap--表格和按钮_第16张图片
Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png
注意事项有三点

(1)针对组件的注意事项
虽然按钮类可以应用到

样式 说明
Btn-default 默认样式
Btn-success 成功样式
Btn-info 一般信息样式
Btn-warning 警告样式
Btn-danger 危险样式
Btn-primary 首选项样式
Btn-link 链接样式

例子

Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png

3.尺寸大小

//从大到小的尺寸



例子

前端框架Bootstrap--表格和按钮_第18张图片
Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png
4.块级按钮

//块级按钮

例子

前端框架Bootstrap--表格和按钮_第19张图片
Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png
5.激活状态

//激活按钮

例子

前端框架Bootstrap--表格和按钮_第20张图片
Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png
6.禁用状态

//禁用按钮

例子

前端框架Bootstrap--表格和按钮_第21张图片
Paste_Image.png

引入bootstrap样式前

Paste_Image.png

引入bootstrap样式后

Paste_Image.png

本文作者lilyping
越努力,越幸运
原文链接:https://www.jianshu.com/u/3908e601f4ec
微信公众号:BestLilyPing
github:https://github.com/lilyping
Demos源码地址:https://github.com/lilyping

你可能感兴趣的:(前端框架Bootstrap--表格和按钮)