Poprawny sposób tworzenia zaokrąglonych rogów w Twitter Bootstrap

<div class="img-rounded"> daje zaokrąglone rogi.

Bootstrap jest po prostu dużym, użytecznym, ale prostym plikiem CSS - nie jest to framework ani coś, czego nie można nadpisać. Mówię to, ponieważ zauważyłem, że wielu programistów trzymało się klas BS i stało się leniwymi koderami" nie mogę już pisać-CSS-code-code-anymore" [to oczywiście nie jest Twój przypadek!].

Jeśli zawiera coś, czego potrzebujesz, idź z klasami Bootstrap - jeśli nie, napisz swój dodatkowy kod w starym dobrym style.css.

Aby mieć najlepsze z obu światów, możesz pisać własne deklaracje w Mniej i przekompiluj całość według swoich potrzeb, minimalizując żądanie serwera jako bonus.

Zgodnie z dokumentacją bootstrap 3.0. nie ma zaokrąglonych rogów klasy lub id dla znacznika div .

Możesz użyć zachowania okręgu dla obrazu za pomocą

<img class="img-circle"> 

Lub po prostu użyj niestandardowej właściwości border-radius CSS3 w css

Tylko do dołu zaokrąglone coner używać po

border-bottom-left-radius:25%; // i use percentage  u can use pix.
border-bottom-right-radius:25%;// i use percentage  u can use pix.

If you want responsive circular div then try this

Odwołane z responsywne okręgi CSS

To, czego chcesz, to panel Bootstrap . Wystarczy dodać klasę panel, a nagłówek będzie wyglądał jednolicie. Możesz także dodawać klasy panel panel-info, panel panel-success, itd. Działa na prawie każdym elemencie blokowym i powinien działać z <header>, ale spodziewam się, że będzie używany głównie z <div> s.

Bez mniej, ans po prostu dla danego div:

W css:

.footer {
background-color: #ab0000;
padding-top: 40px;
padding-bottom: 10px;
border-radius:5px;
}

W html:

 <div class="footer">
        <p>blablabla</p>
      </div>

Z bootstrap4 możesz łatwo zrobić to tak: -

class="rounded" 

Lub

class="rounded-circle"

W Bootstrap 4, poprawnym sposobem na obramowanie elementów jest nazwanie ich w następujący sposób na liście klas elementów:

For a slight rounding effect on all corners; class="rounded"
For a slight rounding on the left; class="rounded-left"
For a slight rounding on the top; class="rounded-top"
For a slight rounding on the right; class="rounded-right"
For a slight rounding on the bottom; class="rounded-bottom" 
For a circle rounding, i.e. your element is made circular; class="rounded-circle"
And to remove rounding effects; class="rounded-0"

Aby użyć Bootstrap 4 plików css, możesz po prostu użyć CDN i użyć następującego linku w pliku HTML:

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

To dostarczy Ci podstaw Bootstrap 4. Jeśli jednak chcesz użyć większości komponentów Bootstrap 4, w tym podpowiedzi, popowerów i rozwijanych, najlepiej użyć następującego kodu zamiast:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Alternatywnie, można zainstalować Bootstrap za pomocą NPM lub Bower, i link do plików tam.

*zauważ, że dolny znacznik z trzech jest taki sam jak pierwszy znacznik w pierwszej ścieżce łącza.

Pełny przykład pracy, może być:

<img src="path/to/my/image/image.jpg" width="150" height="150" class="rounded-circle mx-auto">

W powyższym przykładzie obraz jest wyśrodkowany za pomocą automatycznego marginesu Bootstrap po lewej i prawej stronie.

Jeśli używasz Bootstrap Sass , oto inny sposób, który pozwala uniknąć dodawania dodatkowych klas do znaczników elementu:

@import "bootstrap/mixins/_border-radius";
@import "bootstrap/_variables";

.your-class {
  $r: $border-radius-base; // or $border-radius-large, $border-radius-small, ...
  @include border-top-radius($r);
  @include border-bottom-radius($r);
}