Die Anleitung zu Bootstrap Border Utility

View more Tutorials:

Anleitungen Bootstrap

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

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt.

Facebook

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>

Bootstrap Color

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>

View more Tutorials:

Anleitungen Bootstrap