Richtige Methode zum Erstellen abgerundeter Ecken in Twitter Bootstrap

78

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?

Edward Ruchevits
quelle
Überprüfen Sie dies vor kurzem versuchte ich links im Quadrat rechts gerundet, Hoffnung hilft jemandem
Shaijut
Ich gehe davon aus, dass Sie mit 'vordefinierten Klassen' nur eine Klasse zu Ihrer hinzufügen <header>und ihr abgerundete Ecken geben möchten, damit sie im Allgemeinen bootstrappy aussieht. So geht's: stackoverflow.com/a/29383075/1450294
Michael Scheper

Antworten:

67

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);
}
Danil Speransky
quelle
6
Also muss ich dafür verwenden lessund es ist unmöglich mit bootstrap.css?
Edward Ruchevits
Bootstrap3 hat kein solches Mixin.
Kolyunya
1
Die Frage nach "vordefinierten Klassen" - Sie erstellen hier Klassen. Siehe diese Antwort für die vordefinierten Klassen: stackoverflow.com/a/29383075/1450294
Michael Scheper
Jedes der Bootstrap 3-Shortcut-Mixins (.border-top-radius, .border-right-radius usw.) rundet 2 Ecken ab, sodass Sie alle 4 über ein .border-radius-Mixin nur mit links und rechts oder oben runden können und unten. Sie können auch 3 Ecken über die entsprechende Kombination runden, z. B. oben und links werden unten links, oben links und oben rechts gerundet.
Kevin Jhangiani
Chrome gibt eine Malware-Warnung für diese blogsh.de-Site
stef
94

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

Swade
quelle
15
@ EdwardRuchevits Nein. Es funktioniert auch gut mit Divs. Ich benutze es nicht gern, weil es etwas verwirrend ist, aber es funktioniert.
coderpro.net
Wenn es kein Bild ist, ist es wahrscheinlich ein Panel, und es gibt auch dafür eine syntaktisch korrekte Klasse: stackoverflow.com/a/29383075/1450294
Michael Scheper
17

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.

moonwave99
quelle
8
Ja sicher. :) Ich will nur kein Fahrrad erfinden.
Edward Ruchevits
8
du meinst das Rad neu erfinden :)
Shervin Asgari
52
Das Fahrrad zu erfinden wäre großartig.
OpenCoderX
3
Geht es hier um Fahrradrad-Analogien? #humour
Obscaenvs
Ich denke, die Sorge ist, was passiert, wenn das Fahrrad aufgepimpt wird - er möchte, dass sein Widget noch passt. (Ich meine das in aller Ernsthaftigkeit, auch wenn es ein bisschen verdächtig klingt. 😏) Das Problem bei der direkten Manipulation von CSS ist, dass es möglicherweise nicht zum Gesamtthema passt, insbesondere wenn sich das Thema ändert, z. B. mit einem Plug-In oder einem Bootstrap-Update . Ich würde argumentieren, dass die Verwendung einer geeigneten CSS-Klasse nicht fauler ist als die Verwendung einer geeigneten Konstante im Code, anstatt eine magische Zahl einzugeben.
Michael Scheper
10

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

Sanket Shembekar
quelle
10

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.

Michael Scheper
quelle
8

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>
mcbjam
quelle
4

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

class="rounded" 

oder

class="rounded-circle"
Natesh bhat
quelle
0

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);
}
Abe Voelker
quelle
0

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.

cmprogram
quelle