作者:黄雅萱介芳 | 来源:互联网 | 2022-01-11 11:56
bootstrap设置div边框:bootstrap中可以设置div边框的宽度、颜色、样式等。设置方法:border:1pxsolid#FF0000;表示4条边都是1像素直线边框,红色。
日志文字
代码说明:
蓝色部分为可修改部分,一一说明:
四个2表示凸起边框的宽度,用1的话不太明显,2或3比较合适;
四个outset表示边框类型为"凸起",如果都改成inset或者double,就分别是凹陷边框和双线边框的效果,其他效果下文会给出完整代码;
WIDTH: 100%; 和HEIGHT: 100%表示这个框的宽度占日志宽度的百分之百,当窗口伸缩的时候,框的宽度也会随着伸缩,HEIGHT表示高度,另外,还有一种表示方法以px为单位 的,表示单位为象素,例如:WIDTH: 355px 表示框的宽度为355象素,不同的版式,日志宽度是不一样,可参考这里给定的值, 一般的情况下,用百分比表示就可以了,但是有的时候需要用象素来确定大小,见机行事吧;
align=left表示框内内容的排列方式为左对齐,把left分别改成center或right分别为居中对齐和右对齐,如果想左对齐的话,可以把align=left删掉,缺省情况下是左对齐;
ffffff表示框内的背景色,ffffff表示白色(000000表示黑色),颜色值可参考这个表来选择,另外,将#ffffff改为 transprant即为透明背景,个人认为透明背景比较常用;为了方便复制粘贴,给出透明背景的边框代码如下:(框内红色部分为代码)
日志文字
透明背景内凹边框代码:
日志文字
代码
3. 双线边框:
日志文字
透明背景双线边框代码:
日志文字
其实,前面的边框也可以像双线边框一样设置颜色,但个人觉得,凹凸效果的颜色还是默认比较 好。
4. 虚线边框:
日志文字
透明背景虚线边框代码:
日志文字
5. 沟线立体效果边框
日志文字
个人认为这个边框的背景色最好用透明,而且边框的粗细值不能太小,否则效果不明显
6. 脊线立体效果边框
日志文字
以上就是bootstrap如何设置div边框的详细内容,更多请关注其它相关文章!
推荐阅读
-
在创建带有左侧图标的按钮时,遇到了文本与图标对齐的问题。本文提供了几种使用Bootstrap 4解决此问题的方法。 ...
[详细]
蜡笔小新 2024-11-25 19:20:18
-
Bootstrap 的轮播图(Carousel)组件提供了一种简单而灵活的方法,用于在网站上实现响应式幻灯片效果。此组件不仅支持图片展示,还兼容嵌入式框架、视频等多媒体内容。 ...
[详细]
蜡笔小新 2024-11-20 11:50:55
-
-
本文描述了在使用Bootstrap时遇到的一个常见问题:页面显示为空白。通过详细分析和解决方法,帮助开发者快速定位并解决问题。 ...
[详细]
蜡笔小新 2024-11-17 04:32:42
-
webpack的bootstrapsass如何正确使用 ...
[详细]
蜡笔小新 2024-11-16 12:16:53
-
本文详细介绍了如何在 Web 前端开发中使用 Bootstrap 插件,包括自动触发插件的方法、插件的引用方式以及具体的实例。 ...
[详细]
蜡笔小新 2024-11-15 12:24:25
-
本文将展示如何使用 Bootstrap 实现缩略图效果,并提供详细的代码示例。 ...
[详细]
蜡笔小新 2024-11-14 17:27:35
-
本文详细介绍如何使用 Python 进行数据可视化,涵盖从环境搭建到具体实例的全过程。 ...
[详细]
蜡笔小新 2024-11-13 06:03:30
-
本文主要介绍了如何在项目中使用Ext JS 4作为前端框架,并详细讲解了Ext JS 4的MVC开发模式。文章将从项目目录结构、相关CSS和JS文件的引用以及MVC框架的整体认识三个方面进行总结。 ...
[详细]
蜡笔小新 2024-11-12 16:05:44
-
在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ...
[详细]
蜡笔小新 2024-11-12 13:59:27
-
Bootstrap 支持用户自定义样式调整。即使长时间未使用 Bootstrap,也可以通过添加新的 CSS 类或覆盖现有类来轻松修改默认样式,以满足特定的设计需求。 ...
[详细]
蜡笔小新 2024-11-11 20:11:31
-
本指南详细介绍了如何在CentOS 6.6 64位系统上以root用户身份部署Tomcat 8服务器。系统环境为CentOS 6.6 64位,采用源码安装方式。所需软件为apache-tomcat-8.0.23.tar.gz,建议将软件下载至/root/opt目录。具体下载地址请参见官方资源。本指南涵盖了从环境准备到服务启动的完整步骤,适用于需要在该系统环境下搭建高性能Web应用服务器的技术人员。 ...
[详细]
蜡笔小新 2024-11-08 21:38:15
-
蜡笔小新 2024-11-17 18:15:16
-
本文详细介绍了如何将 Nacos 0.3 的数据持久化到 MySQL 数据库,并提供了具体的步骤和注意事项。 ...
[详细]
蜡笔小新 2024-11-14 18:26:40
-
本文介绍了在index.jsp页面中实现模糊查询功能的具体步骤,包括添加必要的HTML元素和JavaScript代码。 ...
[详细]
蜡笔小新 2024-11-14 12:52:25
-
在 CentOS 7 环境中使用 MySQL 5.6 镜像启动数据库时遇到权限问题,本文将详细探讨并提供解决方案。 ...
[详细]
蜡笔小新 2024-11-14 10:49:29
-