Die Anleitung zu Bootstrap Border Utility

Border Utility
Border color (Farbe von der Umrandung)
Border width (die Umrandlungsbreite)
Border-Radius

1. Border Utility

Border Utility ist ein Teil im Bootstrap. Es baut die Klasse ein, damit der Benutzer die border (Rand) für die Elemente setzt.

Class	Description
.border	border für 4 Rände des Element setzen.
.border-left	border für den linken Rand des Element setzen.
.border-right	border für den rechten Rand des Element setzen.
.border-top	border für den oberen Rand (top) des Element setzen. .
.border-bottom	border für den unteren Rand (bottom) des Element setzen.
.border-left-0	border für alle Rände außer des linken .
.border-right-0	border für alle Rände außer des rechten.
.border-top-0	border für alle Rände außer des oberen (top).
.border-bottom-0	border für alle Rände außer des unteren (bottom).

border-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Border Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <style>
         .container div {
         margin: 10px;
         padding :10px;
         background: #fbfcfc;
         }
      </style>
   </head>
   <body>

      <div class="container">
         <div class="border ">
            .border
         </div>
         <div class="border-left ">
            .border-left
         </div>
         <div class="border-right ">
            .border-right
         </div>
         <div class="border-top ">
            .border-top
         </div>
         <div class="border-bottom ">
            .border-bottom
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

2. Border color (Farbe von der Umrandung)

Es gibt einige Klasse zur Farbensetzung für border , die durch Bootstrap eingebaut werden. Sie können sie in der entsprechenden Kontext benutzen:

.border-primary
.border-secondary
.border-success
.border-danger
.border-warning
.border-info
.border-light
.border-dark
.border-muted
.border-white

border-color-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Border Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <style>
         .container div {
         margin: 10px;
         padding :10px;
         background: #ebf5fb;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div class="border border-primary">
            .border .border-primary
         </div>
         <div class="border-left border-danger">
            .border-left .border-danger
         </div>
         <div class="border-right border-danger">
            .border-right .border-danger
         </div>
         <div class="border-top border-success">
            .border-top .border-success
         </div>
         <div class="border-bottom border-info">
            .border-bottom .border-info
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

Die Anleitung zu Bootstrap Color Utility

3. Border width (die Umrandlungsbreite)

Bootstrap definiert keine Klasse zur Einstellung der Breite vom border. Aber Sie können die solchen Klasse selbst definieren, zum Beispiel .border-* (* = 1, 2, 3, ...).

.border-5 {
     border-width:5px !important;
}

 .border-2 {
     border-width:2px !important;
}

border-width-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Border Example</title>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
      <style>
         .container div {
         margin: 10px;
         padding :10px;
         background: #fbfcfc;
         }
         .border-5 {
         border-width:5px !important;
         }
         .border-2 {
         border-width:2px !important;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div class="border border-2">
            .border .border-2
         </div>
         <div class="border-left border-5">
            .border-left .border-5
         </div>
         <div class="border-right border-2">
            .border-right .border-2
         </div>
         <div class="border-top border-5">
            .border-top .border-5
         </div>
         <div class="border-bottom border-5">
            .border-bottom .border-5
         </div>
      </div>

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
   </body>
</html>

4. Border-Radius

Einige zusätzlichen Klasse hilft Ihnen die Ecke des Element rund machen.

.rounded
.rounded-left
.rounded-right
.rounded-top
.rounded-bottom
.rounded-0

round-example

<div class="container">
   <div class="border rounded">
      .border .rounded
   </div>
   <div class="border rounded-left">
      .border-left .rounded-left
   </div>
   <div class="border rounded-right">
      .border .rounded-right
   </div>
   <div class="border rounded-top">
      .border .rounded-top
   </div>
   <div class="border rounded-bottom">
      .border .rounded-bottom
   </div>
   <div class="border rounded-circle">
      .border-bottom .rounded-circle
   </div>
   <div class="border rounded-0">
      .border-bottom .rounded-0
   </div>
</div>