Richtige Methode zum Erstellen abgerundeter Ecken in Twitter Bootstrap

Ich habe gerade mit Twitter Bootstrap angefangen und hier ist eine Frage.

Ich erstelle einen benutzerdefinierten <header>Block und möchte, dass die unteren Ecken abgerundet werden.

Gibt es eine "richtige" Möglichkeit, dies mithilfe vordefinierter Klassen zu tun, oder muss ich sie manuell wie folgt angeben:

border-radius: 10px;               // and all that cross-browser trumpery

Im Moment verwende ich cssStile. Vielleicht ist es besser, lessfür dieses Problem zu verwenden?

Ich denke, es ist das, wonach Sie suchen: http://blogsh.de/tag/bootstrap-less/

@import 'bootstrap.less';
div.my-class {
    .border-radius( 5px );
}

Sie können es verwenden, weil es ein Mixin gibt:

.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

Für Bootstrap 3 gibt es 4 Mixins, die Sie verwenden können ...

.border-top-radius(@radius);
.border-right-radius(@radius);
.border-bottom-radius(@radius);
.border-left-radius(@radius);

Oder Sie können Ihr eigenes Mixin mit den Top 4 auf einmal erstellen.

.border-radius(@radius){
    .border-top-radius(@radius);
    .border-right-radius(@radius);
    .border-bottom-radius(@radius);
    .border-left-radius(@radius);
}

<div class="img-rounded"> gibt Ihnen abgerundete Ecken.

Bootstrap ist nur eine große, nützliche und dennoch einfache CSS-Datei - kein Framework oder etwas, das Sie nicht überschreiben können. Ich sage das, weil ich bemerkt habe, dass viele Entwickler bei BS-Klassen geblieben sind und faule "Ich kann keinen CSS-Code mehr schreiben" -Codierer geworden sind [das ist natürlich nicht Ihr Fall!].

Wenn es etwas enthält, das Sie benötigen, gehen Sie zu Bootstrap-Klassen - wenn nicht, schreiben Sie Ihren zusätzlichen Code in gutem Zustand style.css.

Um das Beste aus beiden Welten zu haben, können Sie Ihre eigenen Erklärungen in WENIGER schreiben und das Ganze nach Ihren Wünschen neu kompilieren, um die Serveranforderung als Bonus zu minimieren.

Gemäß Bootstrap 3.0-Dokumentation. Es gibt keine Klasse oder ID für abgerundete Ecken für das div- Tag .

Sie können das Kreisverhalten für das Bild verwenden, indem Sie verwenden

<img class="img-circle"> 

oder verwenden Sie einfach die benutzerdefinierte border-radiusCSS3-Eigenschaft in CSS

Verwenden Sie für nur unten abgerundeten Kegel Folgendes

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

wenn Sie wollen ansprechbar Kreis div dann versuchen , diese

verwiesen von Responsive CSS Circles

Was Sie wollen, ist ein Bootstrap- Panel . Fügen Sie einfach die panelKlasse hinzu, und Ihr Header sieht einheitlich aus. Sie können auch Klassen hinzufügen panel panel-info, panel panel-successetc. Es funktioniert für so ziemlich jedes Blockelement und soll mit arbeiten <header>, aber ich erwarte , dass es meistens mit verwendet werden würde , <div>s.

Ohne weniger ans einfach für eine gegebene div:

In einem CSS:

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

In HTML:

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

Mit bootstrap4 können Sie dies ganz einfach folgendermaßen tun:

class="rounded" 

oder

class="rounded-circle"

Wenn Sie Bootstrap Sass verwenden , können Sie auf folgende Weise vermeiden, dass Sie Ihrem Element-Markup zusätzliche Klassen hinzufügen müssen:

@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);
}

In Bootstrap 4 können Sie Ihre Elemente am besten wie folgt benennen, indem Sie sie in der Klassenliste Ihrer Elemente wie folgt benennen:

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"

Um Bootstrap 4-CSS-Dateien zu verwenden, können Sie einfach das CDN verwenden und den folgenden Link in Ihrer HTML-Datei verwenden:

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

Auf diese Weise erhalten Sie die Grundlagen von Bootstrap 4. Wenn Sie jedoch die meisten Bootstrap 4-Komponenten verwenden möchten, einschließlich Tooltips, Popovers und Dropdowns, verwenden Sie stattdessen den folgenden Code:

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

Alternativ können Sie Bootstrap mit NPM oder Bower installieren und dort auf die Dateien verlinken.

* Beachten Sie, dass das untere Tag der drei mit dem ersten Tag im ersten Linkpfad identisch ist.

Ein voll funktionsfähiges Beispiel könnte sein:

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

Im obigen Beispiel wird das Bild mithilfe des automatischen Bootstrap-Randes links und rechts zentriert.