it-swarm.com.de

So erstellen Sie abgerundete 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 durch Verwendung vordefinierter Klassen zu tun, oder ich muss es manuell angeben, wie:

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

Im Moment verwende ich css-Stile. Vielleicht ist es besser, less für dieses Problem zu verwenden?

76

Ich denke es ist was 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 erstellen, um es in einem Schuss zu machen.

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

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

92
Swade

Bootstrap ist nur eine große, nützliche, aber einfache CSS-Datei - kein Framework oder etwas, das Sie nicht überschreiben können. Ich sage das, weil mir aufgefallen ist, dass viele Entwickler sich mit BS-Klassen befasst haben und zu faulen "Ich-nicht-schreiben-CSS-Code-Code-Codierern" geworden sind (dies 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 den alten Code style.css.

Um das Beste aus beiden Welten zu haben, können Sie Ihre eigenen Deklarationen in LESS schreiben und das Ganze nach Ihren Bedürfnissen neu zusammenstellen, wobei die Serveranforderung als Bonus minimiert wird.

17
moonwave99

Was Sie wollen, ist ein Bootstrap panel . Fügen Sie einfach die panel-Klasse hinzu, und Ihre Kopfzeile wird einheitlich aussehen. Sie können auch Klassen panel panel-info, panel panel-success usw. hinzufügen. Dies funktioniert für fast alle Blockelemente und sollte mit <header> funktionieren, aber ich denke, es würde hauptsächlich mit <div>s verwendet werden.

10
Michael Scheper

Wie in der Bootstrap 3.0-Dokumentation. Für div tag gibt es keine abgerundeten Ecken class oder id

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

<img class="img-circle"> 

oder verwenden Sie einfach die benutzerdefinierte border-radius css3-Eigenschaft in css 

nur für unten abgerundete Coner verwenden

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 responsive kreisförmig div wollen, dann probieren Sie dies

bezeichnet aus Responsive CSS Circles

10

Ohne weniger, ans einfach für ein gegebenes 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>
7
mcbjam

Mit bootstrap4 geht das ganz einfach so: -

class="rounded" 

oder 

class="rounded-circle"
4
Natesh bhat

In Bootstrap 4 können Sie die Elemente auf die richtige Weise umranden, wenn 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 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>

Damit erhalten Sie die Grundlagen von Bootstrap 4. Wenn Sie jedoch die Mehrheit der Bootstrap 4-Komponenten einschließlich Tooltips, Popovers und Dropdowns verwenden möchten, verwenden Sie am besten 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 eine Verknüpfung zu den dort vorhandenen Dateien herstellen.

* Beachten Sie, dass das unterste Tag der drei dem ersten Tag im ersten Linkpfad entspricht.

Ein vollständiges Arbeitsbeispiel 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 zentriert, indem der automatische Bootstrap-Rand links und rechts verwendet wird. 

0
cmprogram