bootstrap中表格、修饰图片、浮动、背景框、提示框及关闭提示框、元素淡入淡出及jQuery中操作类名

表格:

bootstrap中用类定义了几个风格的表格,使用时给table标签加上类名即可,具体如下:

类名描述
.table基础表格:标题加粗,只有水平的淡灰色边框线条,没有垂直方向的线条
.table-striped条纹表格:标题加粗,隔行交替灰白两色,没有边框线
.table-bordered边框表格:具有水平方向和垂直方向的淡灰色边框线,标题加粗
.table-hover鼠标悬停表格:加载完是一个基础没有边框的表格,当鼠标经过某行时背景颜色变淡灰色
. table-dark背景黑色表格:背景为黑色,字体为白色没有边框的表格
组合型将上面的类名进行组合可以出现互相搭配的样式

除以上给table标签加类名的表格风格样式外,bootstrap还给tr标签提供了具有特殊意义的类名,这些类名具有不同的背景颜色(给table标签加此类类名整个表格会是一个背景色,当然这类类名给其他容器同样有背景色),具体如下:

类名描述
.table-primary蓝色背景:表示重要
.table-success绿色背景:表示可执行的
.table-danger浅红色背景:表示危险
.table-info淡蓝色背景:表示变更
.table-warning淡黄色背景:表示需要注意
.table-active淡灰色背景:表示将要操作
.table-secondary灰色背景:表示内容不重要
.table-light灰白色背景:可用于主体背景,比纯白色较暗点
.table-dark深灰色背景:可用于表格行的背景,类似灰色铅笔色

除上面修饰表格的样式类名外,bootstrap还提供了修饰表头的样式类名,使用时给thead标签添加此类类名即可,具体如下:

类名描述
.thead-dark给表头添加黑色背景(表头字体颜色变白色)
.thead-light给表头添加灰色背景(表头字体颜色为黑色)

小表格:如果是移动端开发,或者需要较小的表格风格,可以给table标签加table-sm类名。

响应式表格:bootstrap提供了响应式表格,使用时给table的父级容器加table-responsive类名即可,当屏幕宽度尺寸大于992px时,不会出现滚动条,也是响应式表格,宽度小于992px时,会出现横向滚动条,除此之外,bootstrap还提供了更精准的响应式尺寸类名,这里类名不仅可以用于表格,而且可以用于 子元素宽度大于父容器时,(实际上bootstrap中的很多类样式可以用于不同的标签,但是为了具有语义化,开发中建议根据前缀对类名合理使用),其它尺寸类名如下:

类名描述
.table-responsive-sm屏幕宽度 < 576px时出现滚动条
.table-responsive-md屏幕宽度 < 768px时出现滚动条
.table-responsive-lg屏幕宽度 < 992px时出现滚动条
.table-responsive-xl屏幕宽度 < 1200px时出现滚动条

修饰图片:

bootstrap提供了修饰img中图片的样式类名,使用时给img标签添加此类类名即可,具体如下:

类名描述
.rounded图片圆角:使img四角有很小的圆角
.rounded-circle图片椭圆:使img成椭圆形
.img-thumbnail缩略图:使img有边框,图片类似缩小
.img-fluid响应式图片:使图片称为响应式的,随着屏幕尺寸变化而变化大小

浮动:

bootstrap中定义了float类,使用时直接给元素加此类类名即可,具体如:

类名描述
.float-right使元素向右浮动(右对齐)
.float-left使元素向左浮动(左对齐)
.clearfix清除浮动
.float-S-P响应式浮动,其中S的值有:sm, md, lg ,xl;P的值有:left,rigth
float-none没有浮动

背景框:

bootstrap提供了一类会创建大号背景框的样式类,在这类背景框中可以继续开发内容,可以理解为一个有样式的div盒子,其具体如下:

类名描述
.jumbotron定义一个响应式灰色背景的框框,有默认高度,但是高度会随着内容撑开
.jumbotron-fluid定义一个全屏白色背景框框

提示框:

bootstrap提供了具有特殊意义的信息提示框,提示框可以使用alert类名实现,使用时给容器添加类名即可,其具体如下:

类名描述
.alert定义一个有默认高度无色的响应式容器
.alert-success定义一个浅绿色背景通栏,高度由内容撑开,表示成功
.alert-info定义一个浅蓝色背景通栏,高度由内容撑开,表示注意
.alert-warning定义一个浅黄色背景通栏,高度由内容撑开,表示警告
.alert-danger定义一个浅红色背景通栏,高度由内容撑开,表示错误
.alert-primary定义一个淡蓝色背景通栏,高度由内容撑开,表示首选的
.alert-secondary定义一个淡灰色背景通栏,高度由内容撑开,表示次要的
.alert-dark定义一个深灰色背景通栏,高度由内容撑开
.alert-light定义暗白色背景通栏,高度由内容撑开
.alert A实际开发中会将alert类名和具有特殊意义的alert-类名结合使用

提示框中的链接:bootstrap提供了a标签的类样式类名:alert-link,给a标签添加此类后,默认没有下划线,当鼠标经过时会出现下划线且颜色会改变(当a标签在父级为提示框的容器中,鼠标经过时颜色是不会改变的)。

关闭提示框:

bootstrap中提供了关闭提示框功能的自定义属性:data-dismiss=“alert”,(想要实现关闭提示框的功能,父级容器必须是类名为alert的提示框,另外给input按钮加data-dismiss="alert"就可以实现功能层面;但是外观是比较丑的,此时可以继续给button按钮加close类名,此类名可将按钮文本浮动到父级容器右边且修改默认样式)如下:

<!-- 特别提醒:在本地引入的jQuery文件在测试时会有错误:fn找不到的情况,由于对jQuery文件结构及依赖不是很清楚,这里可以采用cdn网络资源 -->
<div class="alert alert-success"><!--关闭提示框功能必须有alert属性,后面属性为修饰性属性,官方文档中还有alert-dismissible属性(设置padding-right: 4rem)--><button type="button" class="close" data-dismiss="alert">关闭</button><!-- type建议给button值,当然不给值也没问题;后面一个是修饰样式的类名,另一个是实现功能的自定义属性 --><span>提示信息!</span><!--此块区域可以继续开发其他  -->
</div>

元素淡出淡入效果:

bootstrap中提供了元素淡入淡出功能的类名show和fade,常配合操作类样式的API使用,如:

<body><div class="box"><p>测试bootstrap中fade和show类及jQuery中操作类样式API</p></div><button>显示</button><button>关闭</button><button>显示/关闭</button><script>var $box = $(document.querySelector('.box'));var $button = $(document.querySelectorAll('button')[0]);var $button1 = $(document.querySelectorAll('button')[1]);var $button2 = $(document.querySelectorAll('button')[2]);$button.on('click', function() {$box.removeClass('fade');$box.addClass('show');});$button1.on('click', function() {$box.removeClass('show');$box.addClass('fade');});$button2.on('click', function() {$box.toggleClass('fade');});</script>
</body>

提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者删除。
笔者:苦海

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/575326.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

系统数据监控

系统数据监控。 using System; using System.Collections.Generic; using System.Diagnostics; using System.Linq; using System.Text; using System.Threading; using Arch.CFramework.CLoggingAdapter; using Ctrip.Mobile.AppDownload.Utility;namespace Ctrip.Mobile.AppD…

bootstrap中单个按钮、按钮组、徽章、进度条

单按钮&#xff1a; 背景按钮&#xff1a;bootstrap提供了具有特殊意义背景的按钮样式&#xff0c;使用时只需给自己的按钮(button、input、a)加bootstrap提供的类名即可&#xff0c;其具体如下&#xff1a; 类名描述.btn基本按钮&#xff1a;灰色、有高度、宽度自适应、没有…

openerp child_of操作符深度解析

child_of 此操作符&#xff0c;从代码来看&#xff0c;等价于&#xff1a; [(x,child_of,id)] > x.prarent_left >id.parent_left && x.parent_left < id.parent_right , 求x&#xff08;的集合&#xff09;。 为了形象的说明&#xff0c;我们一步步来&…

bootstrap中分页、面包屑导航、列表组、卡片、下拉菜单、折叠

分页&#xff1a; 分页功能是当遇到数据很多时&#xff0c;如果都放到一个页面上&#xff0c;那么找起来很不方便&#xff0c;而且不利于性能。此时采用分页功能就能很好的优化用户体验&#xff0c;可是如果自己开发分页功能&#xff0c;那么就会影响开发效率&#xff0c;boot…

当ASP.NET Forms验证方式遭遇苹果IOS

一、问题出现 我在用ASP.NET MVC4做微信开发的时候&#xff0c;用Forms验证方式做为authentication。 一般都是在web.config加&#xff1a; <authentication mode"Forms" ><forms loginUrl"~/Account/Login" name"webcookies" sliding…

bootstrap中导航、导航栏、表单及自定义表单

导航&#xff1a; bootstrap中使用列表封装了水平导航&#xff0c;其类样式如&#xff1a; 类名描述.nav给ul或ol&#xff0c;用于清除列表默认样式&#xff0c;并将列表项水平排列.nav-item给li,用于布局.nav-link给li里面的a,用于a布局.justify-content-center用于居中ul或…

Haproxy安装及配置(转)

1.安装 # wget http://haproxy.1wt.eu/download/1.3/src/haproxy-1.3.20.tar.gz # tar zcvf haproxy-1.3.20.tar.gz # cd haproxy-1.3.20 # make TARGETlinux26 PREFIX/usr/local/haproxy #将haproxy安装到/usr/local/haproxy # make install P…

bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象

轮播图&#xff1a; bootstrap封装了轮播图的功能&#xff0c;其具体如下&#xff1a; 类名描述.carousel创建一个轮播图块的容器&#xff0c;实质是做布局用&#xff1b;且此容器应该有一个di属性&#xff0c;其属性值提供给下面左右按钮href锚点值&#xff0c;用于左右按钮…

hive 常用UDF

Hive UDF整理(可以直接在mysql上测试&#xff0c;hive中没有伪表&#xff0c;需要手动创建&#xff0c;反应慢)字符串函数字符串长度函数&#xff1a;length 语法: length(string A)返回值: int说明&#xff1a;返回字符串A的长度举例&#xff1a;hive> select length(‘abc…

摄影网站收集

图虫网 http://tuchong.com/tags/%E9%95%BF%E6%B2%99/?orderweekly&page2 转载于:https://www.cnblogs.com/PS-apple/p/3902533.html

node简介及安装、下载及运行hexo

node简介&#xff1a; 1.node.js的可以打开服务端的黑盒子及高级前端(Vue、React 、Angular)的学习&#xff0c;例如&#xff1a;文件的读写、网络服务的构建、网络通信等。 2.node.js是操作服务器的一种工具&#xff0c;构建于Chrome的v8引擎之上&#xff0c;可以操作服务器…

node中模块系统及核心模块、执行node文件

node中模块系统&#xff1a; 1.模块系统&#xff1a;核心模块、第三方模块、 自己写的模块。 2.网页中所有的路径都是URL&#xff0c;而不是文件路径。 3.node偏底层开发&#xff0c;开启的服务器完全是一个黑盒子&#xff0c;所有的资源默认都是不能被用户访问的&#xff0…

Repository 仓储,你的归宿究竟在哪?(一)-仓储的概念

写在前面 写这篇博文的灵感来自《如何开始DDD(完)》&#xff0c;很感谢young.han兄这几天的坚持&#xff0c;陆陆续续写了几篇有关于领域驱动设计的博文&#xff0c;让园中再次刮了一阵“DDD探讨风”&#xff0c;我现在不像前段时间那样“疯狂”了&#xff0c;写博文需要灵感&a…

node中模板引擎、模块导出、package.json简介

在node.js中使用引擎模板&#xff1a; art-template不仅在浏览器可以使用&#xff0c;也可以在node中使用&#xff0c;并且模板引擎起早诞生于服务器领域&#xff0c;在node中使用模板引擎&#xff1a; 1.安装&#xff1a;在一个文件目录下执行命令&#xff1a;npm install a…

富爸爸穷爸爸

推荐大家看看&#xff0c;虽然我只看了第一章&#xff0c;但是我觉得写的确实挺好的&#xff0c;也确实符合这个社会规律。 老实本分的工作已经是过去式了。为自己工作才是出路。转载于:https://www.cnblogs.com/joysky/p/3909127.html

Java和C++在细节上的差异(转)

Java的基本程序结构、关键字、操作符都和C/C非常相似&#xff0c;以下为主要的几点区别: 一、基本程序设计结构&#xff1a; Java的基本程序结构、关键字、操作符都和C/C非常相似&#xff0c;以下为主要的几点区别&#xff1a; 1. Java的原始数值型数据类型中不包含无符号类型&…

文件路径和模块路径、nodemon工具

文件路径和模块路径&#xff1a; //在文件操作相对路径中&#xff0c;前面的 ./ 可以省略&#xff0c;但是 在模块标识路径中 &#xff0c;前面的 ./ 不能省略。// ./-----表示相对于当前目录 /-------当前文件所属磁盘根目录 var fs require(fs);fs.readFile(t…

Express框架简介、express使用模块引擎、模式数据

Express简介&#xff1a; 原生的http不足以应对我们的开发需求&#xff0c;所以我们需要使用框架来加快我们的开发&#xff0c;这里推荐expressjs&#xff0c;其官网&#xff1a;expressjs.com&#xff0c;中文文档推荐&#xff1a;http://javascript.ruanyifeng.com/nodejs/e…

数据库字段关联更新

MS SQL Server 子查询更新&#xff1a; update log set uin b.uin from log a,logs b where a.accountuin b.accountuin mysql 更新&#xff1a; update t_stat_month_user a INNER JOIN t_dept b on a.op_deptb.op_id set a.dept_short_nameb.dept_short_name;转载于:https:/…

浏览器基础知识

Web浏览器的主要功能是展示网页资源&#xff0c;即请求服务器并将结果展示在窗口中。工作原理大概如下&#xff1a; 地址栏输入URL 浏览器根据输入的URL查找域名的IP地址&#xff0c;DNS查找过程如下&#xff1a; 浏览器缓存——浏览器会缓存DNS记录一段时间&#xff0c;不同浏…