Bootstrap元素的边框样式和设置

最新推荐文章于 2024-08-21 09:17:03 发布

原创最新推荐文章于 2024-08-21 09:17:03 发布 · 2.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #chrome #前端

Bootstrap 专栏收录该内容

50 篇文章

订阅专栏

本文详细介绍了如何在HTML中使用Bootstrap和CSS来实现添加完整边框、去除特定边框、指定边框颜色以及设置圆角和圆形边框的效果。通过实例代码展示了这些边框样式的特点和应用。

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">border</div>
<div class="border-top border-primary">border-top</div>
<div class="border-right border-primary">border-right</div>
<div class="border-bottom border-primary">border-bottom</div>
<div class="border-left border-primary">border-left</div>
</body>
</html>

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

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-0</div>
<div class="border border-top-0 border-primary bg-light">border-top-0</div>
<div class="border border-right-0 border-primary bg-light">border-right-0</div>
<div class="border border-bottom-0 border-primary bg-light">border-bottom-0</div>
<div class="border border-left-0 border-primary bg-light">border-left-0</div>
</body>
</html>

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

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-primary</div>
<div class="border border-secondary">border-secondary</div>
<div class="border border-success">border-success</div>
<div class="border border-danger">border-danger</div>
<div class="border border-warning">border-warning</div>
<div class="border border-info">border-info</div>
<div class="border border-light">border-light</div>
<div class="border border-dark">border-dark</div>
<div class="border border-white">border-white</div>
</body>
</html>

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

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>