BootStrap4工具类之阴影效果

最新推荐文章于 2022-06-03 23:04:50 发布
最新推荐文章于 2022-06-03 23:04:50 发布
阅读量4.4k 收藏 2
点赞数
分类专栏： BootStrap4 文章标签： bootstrap4 工具类 阴影效果 shadow
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32617703/article/details/103365929
版权

目录

官方文档地址

https://getbootstrap.com/docs/4.4/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>
爱喝水的qdy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap4
weixin_45027950的博客
09-29 1140
[[toc]] Bootstrap4.4介绍 全球最受欢迎的前端组件库 用于开发响应式布局、移动设备优先的 WEB 项目 基于JQuery Bootstrap4.4的安装 本地安装 官网：https://v4.bootcss.com/ CDN引用<!-- Bootstrap4.4 CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/css/bootstrap.mi
超级简单带阴影的文本框
12-24
很简单很实用，阴影程度完全有自己设定。控制深入到一像素
bootstrap 模态框 去除阴影
weixin_40087279的博客
08-27 2504
boostrap 模态框阴影是显示后填加了modal-backdrop这个class造成的： &lt;div class="modal-backdrop in"&gt;&lt;/div&gt; 有两种方式去除模态框阴影，第一种模态框显示后直接删除modal-backdrop： $(".modal-backdrop").remove();//删除class值为modal-backdrop...
Bootstrap系列之阴影(Shadows)
老__L的博客
06-03 1944
阴影(Shadows)
Bootstrap笔记(十五) 常用类别 - 阴影
XI_MILU的博客
09-16 564
常用类别 - 阴影阴影 阴影 Bootstrap提供以下类别用来设定阴影: 範例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
去除BootStrap的阴影
wangsaisoon的博客
04-10 1170
ibootstrap 1、在HTML页面中编写模态框时，在div初始化时添加属性 aria-hidden=”true” data-backdrop=”static”； 2、在需要显示模态框，初始化时，$(‘#myModal’).modal({backdrop: ‘static’, keyboard: false});； 其中 ，backdrop：’static’指的是点击背景空白处不被关闭；...
学习 Bootstrap 5 之 Position 和 Shadows
qq_37354060的博客
01-19 1032
学习 Bootstrap 5 之 层定位 和 阴影层定位 (Position)1. 层顶位方式 (Position values)2. 元素排列 (Arrange elements)(1). 属性(2). 值(3). 使用3. 元素居中化 层定位 (Position) Bootstrap 5 官方文档 1. 层顶位方式 (Position values) 定位方式 类 固定定位 .position-fixed 相对定位 .position-relative 绝对定位 .positio
Bootstrap4样式之工具类
weixin_45884768的博客
03-11 1925
Bootstrap4样式之工具类1 构建关闭按钮2 实现浮动3 隐藏标签元素4 设置区域溢出的显示5 设置元素可见与不可见6 设置内容对齐方式7 设置内边距8 设置外边距。9 设置元素尺寸10 设置元素最大最小尺寸为100%11 设置元素阴影效果12 设置元素的display模式13 设置文本的对齐方式14 设置文本溢出换行15 设置字母大小写16 设置字体样式17 删除超链接下划线 1 构建关闭...
Bootstrap 4样式的工具类总结
qq_44701472的博客
03-16 422
一、 公共样式 1、 使用.close和&times构建一个关闭按钮 2、 使用.clearfix给浮动的区域的父元素添加，实现清理浮动的功能。Float - [sm | md | lg | xl ] – lef t、float - [ sm | md | lg |xl ]- right和float - [ sm | md | lg | xl ] – none. 3、 使用.text...
Bootstrap4 小工具
12-13
Bootstrap4 提供了一些小工具，可以让我们不用写 CSS 代码就能实现想要的效果。 边框 使用 border 类可以添加或移除边框: 实例 边框颜色 Bootstrap4 提供了一些类来设置边框颜色: 实例 边框...
Bootstrap4管理类后台模板
12-18
Bootstrap4 后台管理类模板 包含的插件有 form表单/日历控件/图表插件/各种bootstrap4的组件
bootstrap4实现购物商城
06-18
bootstrap4实现购物商城
django-bootstrap4：与Django进行Bootstrap 4集成
02-05
文献资料完整的文档位于安装使用pip安装： pip install django-bootstrap4 另外，您可以安装下载或克隆此仓库，然后调用pip install -e . 。 在您的settings.py添加到INSTALLED_APPS ： INSTALLED_APPS = ( # ... ...
bootstrap4框架
06-08
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 本教程将向您讲解 Bootstrap 框架的基础，通过学习这些内容，您将可以轻松...
bootstrap专栏 04.元素属性设置 04.边距与阴影
Web Python
03-17 1151
# 04.边距与阴影 [toc]{type: "ol", level: [3]} ### css结构 ```css .wh { width: 300px; height: 200px; background: #8fd19e; } span { background: #1c7430; display: inline-block; } ``` ### 边距设定 - 可具体指定某个边 > pt-1 > pt上 pb下 pl左 pr右 px...
BootStrap4内容系列之图像排版
爱喝水的qdy的博客
12-01 3079
目录官方地址其他文档地址响应式图片图片等比例缩放缩略图对齐整体代码 官方地址 https://getbootstrap.com/docs/4.4/content/images/ 其他文档地址 菜鸟教程 https://www.runoob.com/bootstrap4/bootstrap4-images.html http://bs4.vx.link http://bs4.vx.link...
BootStrap4工具类之文字颜色
爱喝水的qdy的博客
11-30 2441
目录官方文档地址其余文档地址文本颜色链接文本颜色背景颜色背景渐变整体代码 官方文档地址 https://getbootstrap.com/docs/4.4/utilities/colors/ 其余文档地址 菜鸟教程 https://www.runoob.com/bootstrap4/bootstrap4-colors.html bs4.vx.link http://bs4.vx.link...
BootStrap4工具类之定位
爱喝水的qdy的博客
12-04 2108
目录官方地址其他文档地址通用属性固定在顶部固定在底部sticky置顶整体代码 官方地址 https://getbootstrap.com/docs/4.4/utilities/position/ 其他文档地址 https://getbootstrap.net https://getbootstrap.net/docs/utilities/position/ http://bs4.vx.li...
使用bootstrap工具类设置网页元素的样式
最新发布
07-10
使用Bootstrap的工具类可以方便地设置网页元素的样式。以下是几个常用的Bootstrap工具类示例： 1. 设置背景颜色： ```html 背景颜色为主要色 背景颜色为次要色 背景颜色为成功色 背景颜色为危险色 背景颜色为警告色...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值