• Bootstrap元素的边框样式和设置

    目录

    01-添加完整边框、上边框、右边框、下边框、左边框

    示例代码如下：

    DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加边框样式title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<style>
    div{
        width: 100px;
        height: 100px;
        float: left;
        margin-left: 30px;
    }
style>
<body class="container">
<h3>添加边框样式h3>
<div class="border border-primary">borderdiv>
<div class="border-top border-primary">border-topdiv>
<div class="border-right border-primary">border-rightdiv>
<div class="border-bottom border-primary">border-bottomdiv>
<div class="border-left border-primary">border-leftdiv>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    运行效果如下图所示：
    在这里插入图片描述

    02-不要整个边框、上边框、右边框、下边框、左边框

    示例代码如下：

    DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>不要某个指定的边框title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<style>
    div{
        width: 100px;
        height: 100px;
        float: left;
        margin-left: 30px;
    }
style>
<body class="container">
<h3>不要某个指定的边框h3>
<div class="border border-0 border-primary bg-light">border-0div>
<div class="border border-top-0 border-primary bg-light">border-top-0div>
<div class="border border-right-0 border-primary bg-light">border-right-0div>
<div class="border border-bottom-0 border-primary bg-light">border-bottom-0div>
<div class="border border-left-0 border-primary bg-light">border-left-0div>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    运行效果如下图所示：
    在这里插入图片描述

    03-指定边框的颜色

    示例代码如下：

    DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>设置边框颜色title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js">script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js">script>
head>
<style>
    div{
        width: 100px;
        height: 100px;
         float: left;
        margin: 15px;
    }
style>
<body class="container">
<h3 align="center">设置边框颜色h3>
<div class="border border-primary">border-primarydiv>
<div class="border border-secondary">border-secondarydiv>
<div class="border border-success">border-successdiv>
<div class="border border-danger">border-dangerdiv>
<div class="border border-warning">border-warningdiv>
<div class="border border-info">border-infodiv>
<div class="border border-light">border-lightdiv>
<div class="border border-dark">border-darkdiv>
<div class="border border-white">border-whitediv>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    运行效果如下图所示：
    在这里插入图片描述

    04-设置圆角边框和圆形边框

    示例代码如下：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>圆角边框</title>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
    <script src="jquery-3.5.1.slim.js"></script>
    <script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<style>
    div{
        width: 100px;
        height: 100px;
        float: left;
        margin: 15px;
        padding-top: 20px;
    }
</style>
<body class="container">
<h3 align="center">圆角边框</h3>
<div class="border border-primary rounded">rounded</div>
<div class="border border-primary rounded-0">rounded-0</div>
<div class="border border-primary rounded-top">rounded-top</div>
<div class="border border-primary rounded-right">rounded-right</div>
<div class="border border-primary rounded-bottom">rounded-bottom</div>
<div class="border border-primary rounded-left">rounded-left</div>
<div class="border border-primary rounded-circle">rounded-circle</div>
<div class="border border-primary rounded-pill">rounded-pill</div>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    运行效果如下图所示：
    在这里插入图片描述

  • 相关阅读:
    uniapp读取(获取)缓存中的对象值（微信小程序）
    Linux高并发服务器开发（六）线程
    Flink-JDBC SQL Connector报错: java.lang.Integer cannot be cast to java.lang.Long
    【HTML】化神篇
    Spring Authorization Server入门 (十七) Vue项目使用授权码模式对接认证服务
    区块链在公益活动平台中的应用研究
    Bootstrap-- 逻辑运算符
    Leetcode 2119.反转两次的数字
    Ubuntu下搭建NFS
    LeetCode 之 二分查找
  • 原文地址：https://blog.csdn.net/wenhao_ir/article/details/133649434