Руководство Bootstrap Border Utility

View more Tutorials:

Pуководства Bootstrap

Border Utility
Border color (Цвет границы)
Border width (Ширина границы)
Border-Radius

1- Border Utility

Border Utility (Утилита границ) это часть Bootstrap, она строит готовые классы, которые помогают пользователям настроить border (Границу) для элементов.

Класс	Описание
.border	Настроить border для 4 границ элемента.
.border-left	Настроить border для левой границы элемента.
.border-right	Настроить border для правой границы элемента.
.border-top	Настроить border для верхней (top) границы элемента.
.border-bottom	Настроить border для нижней (bottom) границы элемента.
.border-left-0	Настроить border для всех границ, за исключением левой границы.
.border-right-0	Настроить border для всех границ, за исключением правой границы.
.border-top-0	Настроить border для всех границ, за исключением верхней границы (top).
.border-bottom-0	Настроить border для всех границ, за исключением нижней границы (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 (Цвет границы)

Есть некоторые классы для настройки цвета для border построенный с помощью Bootstrap наготове, вы можете использовать его в походящем контексте:

.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 Utility

3- Border width (Ширина границы)

Bootstrap не определяет класс для настройки ширины (width) у border. Но вы можете сами определить такие классы, например .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

Некоторые дополнительные классы помогут вам округлить (round) углы элемента.

.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:

Pуководства Bootstrap