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 css
Stile. Vielleicht ist es besser, less
für dieses Problem zu verwenden?
twitter-bootstrap
less
css
Edward Ruchevits
quelle
quelle
<header>
und ihr abgerundete Ecken geben möchten, damit sie im Allgemeinen bootstrappy aussieht. So geht's: stackoverflow.com/a/29383075/1450294Antworten:
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); }
quelle
less
und es ist unmöglich mitbootstrap.css
?<div class="img-rounded">
gibt Ihnen abgerundete Ecken.quelle
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.
quelle
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-radius
CSS3-Eigenschaft in CSSVerwenden 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
quelle
Was Sie wollen, ist ein Bootstrap- Panel . Fügen Sie einfach die
panel
Klasse hinzu, und Ihr Header sieht einheitlich aus. Sie können auch Klassen hinzufügenpanel panel-info
,panel panel-success
etc. 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.quelle
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>
quelle
Mit bootstrap4 können Sie dies ganz einfach folgendermaßen tun:
class="rounded"
oder
class="rounded-circle"
quelle
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); }
quelle
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.
quelle