作者:黄雅萱介芳 | 来源:互联网 | 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边框的详细内容,更多请关注其它相关文章!
推荐阅读
-
这一节来做二级分类,为了快速开发,一级分类只做新增,暂时不考虑修改和删除,如果一定要删,就去数据库删吧。我们接下来,需要通过一级分类,获取所有的二级分类。开始 ...
[详细]
蜡笔小新 2023-10-17 15:30:11
-
1、DashAPI文档Dash是一个API文档浏览器,使用户可以使用离线功能即时搜索无数API。程序员使用Dash可访问iOS,MacOS, ...
[详细]
蜡笔小新 2023-10-17 10:15:42
-
-
http:valor-software.comng2-bootstraphttps:www.primefaces.orgprimeng#autocomplete转载于:https: ...
[详细]
蜡笔小新 2023-12-09 20:57:51
-
本文整理了Java中org.gwtbootstrap3.client.ui.Icon.addDomHandler()方法的一些代码示例,展示了Icon.ad ...
[详细]
蜡笔小新 2023-10-17 22:46:43
-
查询单个functionquery(id){$.ajax({url:smallproductServlet,async:true,type:POST,data:{typ ...
[详细]
蜡笔小新 2023-10-17 19:40:17
-
1.脚本功能1)自动替换jar包中的配置文件。2)自动备份老版本的Jar包3)自动判断是初次启动还是更新服务2.脚本准备进入ho ...
[详细]
蜡笔小新 2023-10-17 19:08:29
-
RTL布局中的bootstrapdatepicker工作不正常,我正在使用这个bootstrapdatepickerhttp:bootstrap-datepicker.readth ...
[详细]
蜡笔小新 2023-10-17 18:57:35
-
初识java关于JDK、JRE、JVM 了解一下 ...
[详细]
蜡笔小新 2023-10-17 17:17:17
-
主讲人网神(新浪微博:豆角茄子麻酱凉面)网神(66707180)18:57:18大家好,今天我们讲一下第14章combiningmodel ...
[详细]
蜡笔小新 2023-10-17 17:04:24
-
ElasticSearch成功安装完毕。 测试数据添加出现{ error:{ root_cause ...
[详细]
蜡笔小新 2023-10-17 15:46:32
-
systemd-nspawn可以创建最轻量级的容器(ns的意思就是namespace),本文的实验平台是Ubuntu16.04,x86_64机器。本文的目的是:在Ubuntu中用syst ...
[详细]
蜡笔小新 2023-10-17 14:49:15
-
媒介本文的前身是源自github上的项目awesome-github-vue,但由于该项目上次更新时候为2017年6月12日,许多内容早已逾期或是许多近期优异组件未被收录,所以小肆 ...
[详细]
蜡笔小新 2023-10-17 14:33:46
-
Bootstrap3 排版缩略语 ...
[详细]
蜡笔小新 2023-10-17 09:02:39
-
本文摘要配置目的:寄存器配置用于更改路由器启动过程。配置目的:寄存器配置用于更改路由器启动过程。启动位由4位16进制寄存器组成格式:0xA ...
[详细]
蜡笔小新 2023-10-16 19:59:28
-
网络分区对于常规事务而言,每当组内有事务数据需要被复制时,组内的成员需要达成共识(要么都提交,要么都回滚)。对于组成员资格的变更也和保持组 ...
[详细]
蜡笔小新 2023-10-16 18:09:11
-