官方文档地址

https://getbootstrap.com/docs/4.4/utilities/shadows/

其他文档地址

http://bs4.vx.link
- http://bs4.vx.link/index.html?tmpui_page=/pages/utilities
https://v4.bootcss.com
- https://v4.bootcss.com/docs/4.3/utilities/shadows/

说明

虽然在 Bootstrap 中默认禁用组件上的阴影，但可以通过启用 $enable-shadows，你也可以用我们的快速添加或删除阴影 box-shadow 工具类。包括支持 .shadow-none、.shadow-sm、.shadow、.shadow-lg 等三种不同预设的阴影效果(可通过变量调整)。

shadow-none

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>

shadow-sm

<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>

shadow

<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>

shadow-lg

<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>

整体代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/><title>08阴影</title><!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">--><!-- 新 Bootstrap4 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body><div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div><!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

BootStrap4工具类之阴影效果相关推荐

BootStrap4工具类之Stretched-link
目录官方文档地址介绍应用于组件Card 应用于媒体组件Media 应用于row 与 col 包含块整体代码官方文档地址 https://getbootstrap.com/docs/4.4/u ...
BootStrap4工具类之屏幕阅读器
目录官方文档地址其他文档地址 sr-only sr-only-focusable 整体代码官方文档地址 https://getbootstrap.com/docs/4.4/utilities/s ...
Android基础入门教程——8.3.1 三个绘图工具类详解
Android基础入门教程--8.3.1 三个绘图工具类详解标签(空格分隔): Android基础入门教程本节引言: 上两小节我们学习了Drawable以及Bitmap,都是加载好图片的,而本节我 ...
java日期转化工具类
package com.rest.ful.utils;import java.text.DateFormat; import java.text.ParseException; import java ...
java数据类型相互转换工具类
package com.rest.ful.utils;import java.util.ArrayList; import java.util.HashMap; import java.util.Li ...
客快物流大数据项目(五十六)：编写SparkSession对象工具类
编写SparkSession对象工具类后续业务开发过程中,每个子业务(kudu.es.clickhouse等等)都会创建SparkSession对象,以及初始化开发环境,因此将环境初始化操作封装成工 ...
[JAVA EE] Thymeleaf 常用工具类
Thymeleaf 提供了丰富的表达式工具类,例如: #strings:字符串工具类 #dates:时间操作和时间格式化 #numbers:格式化数字对象的方法 #bools:常用的布尔方法 #str ...
httpclient工具类，post请求发送json字符串参数,中文乱码处理
在使用httpclient发送post请求的时候,接收端中文乱码问题解决. 正文: 我们都知道,一般情况下使用post请求是不会出现中文乱码的.可是在使用httpclient发送post请求报文含中文 ...
spring boot 文件上传工具类（bug 已修改）
以前的文件上传都是之前前辈写的,现在自己来写一个,大家可以看看,有什么问题可以在评论中提出来. 写的这个文件上传是在spring boot 2.0中测试的,测试了,可以正常上传,下面贴代码第一步:引 ...

BootStrap4工具类之阴影效果

目录