Μετάβαση στο κύριο περιεχόμενο Μετάβαση στην πλοήγηση εγγράφων
Check
in English

σύνορα

Χρησιμοποιήστε βοηθητικά προγράμματα περιγράμματος για να διαμορφώσετε γρήγορα το περίγραμμα και την ακτίνα περιγράμματος ενός στοιχείου. Ιδανικό για εικόνες, κουμπιά ή οποιοδήποτε άλλο στοιχείο.

Σε αυτήν την σελίδα

Σύνορο

Χρησιμοποιήστε βοηθητικά προγράμματα περιγράμματος για να προσθέσετε ή να αφαιρέσετε τα περιγράμματα ενός στοιχείου. Επιλέξτε από όλα τα σύνορα ή ένα κάθε φορά.

Πρόσθετος

Προσθήκη περιγραμμάτων σε προσαρμοσμένα στοιχεία:

html 
<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Αφαιρετικός

Ή αφαιρέστε τα σύνορα:

html 
<span class="border border-0"></span>
<span class="border border-top-0"></span>
<span class="border border-end-0"></span>
<span class="border border-bottom-0"></span>
<span class="border border-start-0"></span>

Χρώμα

Αλλάξτε το χρώμα του περιγράμματος χρησιμοποιώντας βοηθητικά προγράμματα που έχουν δημιουργηθεί στα χρώματα θέματός μας.

html 
<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

Ή τροποποιήστε την προεπιλογή border-colorενός στοιχείου:

Επικίνδυνη κατεύθυνση
Αλλαγή χρώματος και πλάτους περιγράμματος
html 
<div class="mb-4">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control border-success" id="exampleFormControlInput1" placeholder="[email protected]">
</div>

<div class="h4 pb-2 mb-4 text-danger border-bottom border-danger">
  Dangerous heading
</div>

<div class="p-3 bg-info bg-opacity-10 border border-info border-start-0 rounded-end">
  Changing border color and width
</div>

Αδιαφάνεια

Προστέθηκε στην έκδοση 5.2.0

Τα βοηθητικά προγράμματα Bootstrap border-{color}δημιουργούνται με το Sass χρησιμοποιώντας μεταβλητές CSS. Αυτό επιτρέπει αλλαγές χρωμάτων σε πραγματικό χρόνο χωρίς μεταγλώττιση και δυναμικές αλλαγές διαφάνειας άλφα.

Πως δουλεύει

Εξετάστε το προεπιλεγμένο μας .border-successβοηθητικό πρόγραμμα.

.border-success {
  --bs-border-opacity: 1;
  border-color: rgba(var(--bs-success-rgb), var(--bs-border-opacity)) !important;
}

Χρησιμοποιούμε μια έκδοση RGB της μεταβλητής CSS --bs-success(με την τιμή 25, 135, 84) και επισυνάπτουμε μια δεύτερη μεταβλητή CSS, --bs-border-opacity, για τη διαφάνεια άλφα (με μια προεπιλεγμένη τιμή 1χάρη σε μια τοπική μεταβλητή CSS). Αυτό σημαίνει ότι όποτε χρησιμοποιείτε .border-successτώρα, η υπολογισμένη colorτιμή σας είναι rgba(25, 135, 84, 1). Η τοπική μεταβλητή CSS μέσα σε κάθε .border-*κλάση αποφεύγει ζητήματα κληρονομικότητας, έτσι ώστε οι ένθετες παρουσίες των βοηθητικών προγραμμάτων να μην έχουν αυτόματα τροποποιημένη διαφάνεια άλφα.

Παράδειγμα

Για να αλλάξετε αυτήν την αδιαφάνεια, παρακάμψτε --bs-border-opacityμέσω προσαρμοσμένων στυλ ή ενσωματωμένων στυλ.

Αυτό είναι το προεπιλεγμένο περίγραμμα επιτυχίας
Αυτό είναι όριο επιτυχίας αδιαφάνειας 50%.
html 
<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2" style="--bs-border-opacity: .5;">This is 50% opacity success border</div>

Ή, επιλέξτε από οποιοδήποτε από τα .border-opacityβοηθητικά προγράμματα:

Αυτό είναι το προεπιλεγμένο περίγραμμα επιτυχίας
Αυτό είναι όριο επιτυχίας αδιαφάνειας 75%.
Αυτό είναι όριο επιτυχίας αδιαφάνειας 50%.
Αυτό είναι όριο επιτυχίας αδιαφάνειας 25%.
Αυτό είναι όριο επιτυχίας αδιαφάνειας 10%.
html 
<div class="border border-success p-2 mb-2">This is default success border</div>
<div class="border border-success p-2 mb-2 border-opacity-75">This is 75% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-50">This is 50% opacity success border</div>
<div class="border border-success p-2 mb-2 border-opacity-25">This is 25% opacity success border</div>
<div class="border border-success p-2 border-opacity-10">This is 10% opacity success border</div>

Πλάτος

html 
<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

Ακτίνα κύκλου

Προσθέστε κλάσεις σε ένα στοιχείο για να στρογγυλοποιήσετε εύκολα τις γωνίες του.

Example rounded image 75x75 Example top rounded image 75x75 Example right rounded image 75x75 Example bottom rounded image 75x75 Example left rounded image 75x75 Completely round image 75x75 Rounded pill image 150x75
html 
<img src="..." class="rounded" alt="...">
<img src="..." class="rounded-top" alt="...">
<img src="..." class="rounded-end" alt="...">
<img src="..." class="rounded-bottom" alt="...">
<img src="..." class="rounded-start" alt="...">
<img src="..." class="rounded-circle" alt="...">
<img src="..." class="rounded-pill" alt="...">

Μεγέθη

Χρησιμοποιήστε τις κλάσεις κλιμάκωσης για μεγαλύτερες ή μικρότερες στρογγυλεμένες γωνίες. Τα μεγέθη κυμαίνονται από 0έως 5και μπορούν να διαμορφωθούν τροποποιώντας το API βοηθητικών προγραμμάτων.

Example non-rounded image 75x75 Example small rounded image 75x75 Example default rounded image 75x75 Example large rounded image 75x75 Example larger rounded image 75x75 Example extra large rounded image 75x75
html 
<img src="..." class="rounded-0" alt="...">
<img src="..." class="rounded-1" alt="...">
<img src="..." class="rounded-2" alt="...">
<img src="..." class="rounded-3" alt="...">
<img src="..." class="rounded-4" alt="...">
<img src="..." class="rounded-5" alt="...">

CSS

Μεταβλητές

Προστέθηκε στην έκδοση 5.2.0 
  --#{$prefix}border-width: #{$border-width};
  --#{$prefix}border-style: #{$border-style};
  --#{$prefix}border-color: #{$border-color};
  --#{$prefix}border-color-translucent: #{$border-color-translucent};

  --#{$prefix}border-radius: #{$border-radius};
  --#{$prefix}border-radius-sm: #{$border-radius-sm};
  --#{$prefix}border-radius-lg: #{$border-radius-lg};
  --#{$prefix}border-radius-xl: #{$border-radius-xl};
  --#{$prefix}border-radius-2xl: #{$border-radius-2xl};
  --#{$prefix}border-radius-pill: #{$border-radius-pill};

Μεταβλητές Sass

$border-width:                1px;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px
);

$border-style:                solid;
$border-color:                $gray-300;
$border-color-translucent:    rgba($black, .175);

$border-radius:               .375rem;
$border-radius-sm:            .25rem;
$border-radius-lg:            .5rem;
$border-radius-xl:            1rem;
$border-radius-2xl:           2rem;
$border-radius-pill:          50rem;

Sass mixins

@mixin border-radius($radius: $border-radius, $fallback-border-radius: false) {
  @if $enable-rounded {
    border-radius: valid-radius($radius);
  }
  @else if $fallback-border-radius != false {
    border-radius: $fallback-border-radius;
  }
}

@mixin border-top-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
    border-bottom-left-radius: valid-radius($radius);
  }
}

@mixin border-top-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-left-radius: valid-radius($radius);
  }
}

@mixin border-top-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-top-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-end-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-right-radius: valid-radius($radius);
  }
}

@mixin border-bottom-start-radius($radius: $border-radius) {
  @if $enable-rounded {
    border-bottom-left-radius: valid-radius($radius);
  }
}

Utilities API

Τα βοηθητικά προγράμματα συνόρων δηλώνονται στο API των βοηθητικών μας προγραμμάτων στο scss/_utilities.scss. Μάθετε πώς να χρησιμοποιείτε το API βοηθητικών προγραμμάτων.

    "border": (
      property: border,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-top": (
      property: border-top,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-end": (
      property: border-right,
      class: border-end,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-bottom": (
      property: border-bottom,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-start": (
      property: border-left,
      class: border-start,
      values: (
        null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
        0: 0,
      )
    ),
    "border-color": (
      property: border-color,
      class: border,
      local-vars: (
        "border-opacity": 1
      ),
      values: $utilities-border-colors
    ),
    "border-width": (
      css-var: true,
      css-variable-name: border-width,
      class: border,
      values: $border-widths
    ),
    "border-opacity": (
      css-var: true,
      class: border-opacity,
      values: (
        10: .1,
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),
    
    "rounded": (
      property: border-radius,
      class: rounded,
      values: (
        null: var(--#{$prefix}border-radius),
        0: 0,
        1: var(--#{$prefix}border-radius-sm),
        2: var(--#{$prefix}border-radius),
        3: var(--#{$prefix}border-radius-lg),
        4: var(--#{$prefix}border-radius-xl),
        5: var(--#{$prefix}border-radius-2xl),
        circle: 50%,
        pill: var(--#{$prefix}border-radius-pill)
      )
    ),
    "rounded-top": (
      property: border-top-left-radius border-top-right-radius,
      class: rounded-top,
      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-end": (
      property: border-top-right-radius border-bottom-right-radius,
      class: rounded-end,
      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-bottom": (
      property: border-bottom-right-radius border-bottom-left-radius,
      class: rounded-bottom,
      values: (null: var(--#{$prefix}border-radius))
    ),
    "rounded-start": (
      property: border-bottom-left-radius border-top-left-radius,
      class: rounded-start,
      values: (null: var(--#{$prefix}border-radius))
    ),