StyleBootstrap ist ein Open -Source -UI -Framework, das auf Bootstrap basiert. Derzeit gibt es viele Erweiterungs-Plug-Ins, die auf dem Bootstrap-Stil basieren, z. B. Bootswatch, Bootmetro usw. Wir haben diese bereits vorgestellt. Stylebootstrap sollte als Erweiterung des Bootstrap -Stils bezeichnet werden. Neben einigen grundlegenden Schaltflächen, Formen und Menüs hat Stylebootstrap auch einen umfassenden Farbpickup entworfen, der sehr gut ist.
Funktionen von StyleBootstrap
Es hat die Eigenschaften, dass Bootstrap einfach und effizient ist und eine flexible Konfiguration hat.
Kompatibel mit einer einer einer der Bootstrap -Versionen.
Eine leistungsstarke Farbpalette ist die größte Funktion.
StyleBootstrap -verwandte Komponenteninstanzen und Code
1. Navigationsleiste
Die Navigationsleistenfunktionen von StyleBootstraps sind relativ leistungsfähig. Zusätzlich zu normalen Menüpunkten kann es auch verschiedene Kombinationen von Dropdown-Menüs und -formen enthalten. Das größere Highlight ist, dass es den Stil des Menüs anpassen und anpassen kann, einschließlich Parametern wie oberen und unteren Rändern, Hintergrundfarbe usw.
Kern -CSS -Code:
.navbar-reiner {Hintergrund-Image: -moz-linear-Gradient (top, #ffffff, #f2f2f2); Hintergrund-Image: -ms-linear-Gradient (Top, #ffffff, #f2f2f2); Hintergrund-Image: -Webkit-Gradient (linear, 0 0, 0 100%, von (#ffffff) bis (#f2f2f2)); Hintergrund-Image: -Webkit-linear-Gradient (Top, #ffffff, #f2f2f2); Hintergrund-Image: -o-linear-Gradient (Top, #ffffff, #f2f2f2); Hintergrund-Image: -o-linear-Gradient (Top, #ffffff, #f2f2f2); Hintergrund-Image: -o-linear-Gradient (Top, #ffffff, #f2f2f2); Hintergrund-Image: -o-linear-Gradient (Top, #ffffff, #f2f2f2); Hintergrund-Image: Linear-Gradient (Top, #ffffff, #f2f2f2); Filter: progid: dimaTransform.microsoft.gradient (startColorStr = '#' ffffff, endColorStr = '#' f2f2f2, GradientType = 0);}. navbar .brand {padding: 8px 20px 12px; Schriftgröße: 20px; Farbe: #727272;}. Navbar .Divider-vertikal {Höhe: 41px; Hintergrundfarbe: #ffffff; Grenzrechte: 1PX Solid #C6C6C6;}. Navbar .Nav> LI> A {Padding: 10px 10px 11px; Schriftgröße: 14px; Farbe: #666666;}. navbar .nav> .active> a, .navbar .nav> .active> a: hover, .navbar .nav> .active> a: Fokus {Farbe: #424242;}2. Knopf
In ähnlicher Weise können die Tasten von StyleBootstrap nicht nur reichhaltige Farben setzen, sondern auch Pulldown, was sehr gut aussieht.
Kern -CSS -Code:
.BTN {Farbe: #333333; Hintergrund-Image: -moz-linear-Gradient (Top, #ffffff, #e6e6e6); Hintergrund-Image: -ms-linear-Gradient (Top, #ffffff, #e6e6e6); Hintergrundbild: -Webkit-Gradient (linear, 0 0, 0 100%, von (#ffffff) bis (#e6e6e6)); Hintergrund-Image: -Webkit-linear-Gradient (Top, #ffffff, #e6e6e6); Hintergrund-Image: -o-linear-Gradient (Top, #ffffff, #e6e6e6); Hintergrund-Image: Linear-Gradient (Top, #ffffff, #e6e6e6); filter: progid: dimaTransform.microsoft.gradient (startColorStr = '#' ffffff, endColorStr = '#' e6e6e6, gradientType = 0);}. Hintergrundfarbe: #e6e6e6;}. Btn-primary {Hintergrundfarbe: #006DCC; Hintergrund-Image: -moz-linear-Gradient (Top, #0088cc, #0044cc); Hintergrund-Image: -ms-linear-Gradient (Top, #0088cc, #0044cc); Hintergrundbild: -Webkit-Gradient (linear, 0 0, 0 100%, von (#0088cc) bis (#0044cc)); Hintergrund-Image: -Webkit-linear-Gradient (Top, #0088cc, #0044cc); Hintergrund-Image: -o-linear-Gradient (Top, #0088cc, #0044cc); Hintergrund-Image: -o-linear-Gradient (Top, #0088cc, #0044cc); Hintergrund-Image: Linear-Gradient (Top, #0088cc, #0044cc); Filter: Progid: DimaTransform.Microsoft.gradient (startColorStr = '#' 0088cc, EndColorStr = '#' 0044cc, GradientType = 0);}. Hintergrundfarbe: #0044cc;}. Hintergrund-Image: -ms-linear-Gradient (Top, #fbb450, #f89406); Hintergrundbild: -Webkit-Gradient (linear, 0 0, 0 100%, von (#fbb450) bis (#f89406)); Hintergrund-Image: -Webkit-linear-Gradient (Top, #FBB450, #F89406); Hintergrund-Image: -o-linear-Gradient (Top, #fbb450, #fbb450, #f89406); Hintergrund-Image: Linear-Gradient (Top, #FBB450, #F89406); Filter: Progid: DimaTransform.Microsoft.gradient (startColorStr = '#' fbb450, EndColorStr = '#' F89406, GradientType = 0);}. Hintergrundfarbe: #F89406;}. Btn-danger {Farbe: Hintergrund-Image: -moz-linear-Gradient (Top, #ee5f5b, #Bd362f); Hintergrund-Image: -ms-linear-Gradient (Top, #ee5f5b, #bd362f); Hintergrundbild: -Webkit-Gradient (linear, 0 0, 0 100%, von (#ee5f5b) bis (#Bd362f)); Hintergrund-Image: -Webkit-linear-Gradient (Top, #ee5f5b, #bd362f); Hintergrund-Image: -o-linear-Gradient (Top, #ee5f5b, #Bd362f); Hintergrund-Image: -o-linear-Gradient (Top, #ee5f5b, #Bd362f); Hintergrund-Image: Linear-Gradient (TOP, #EE5F5B, #BD362F); Filter: progid: dimaTeTransform.microsoft.gradient (startcolorstr = '#' ee5f5b, endcolorstr = '#' Bd362f, GradientType = 0);}. Btn-danger: hover. Hintergrundfarbe: #BD362F} .BTN-SUCCESS {Farbe: Hintergrund-Image: -moz-linear-Gradient (Top, #62C462, #51A351); Hintergrund-Image: -ms-linear-Gradient (Top, #62C462, #51A351); Hintergrundbild: -Webkit-Gradient (linear, 0 0, 0 100%, von (#62c462) bis (#51A351)); Hintergrund-Image: -Webkit-linear-Gradient (Top, #62C462, #51A351); Hintergrund-Image: -o-linear-Gradient (Top, #62C462, #51A351); Hintergrund-Image: -o-linear-Gradient (Top, #62C462, #51A351); Hintergrund-Image: Linear-Gradient (Top, #62C462, #51A351); Filter: Progid: DimaMagetransform.Microsoft.gradient (startColorstr = '#' 62c462, EndColorstr = '#' 51a351,, GradientType = 0);}. Hintergrund-Image: -moz-linear-Gradient (oben, #5bc0de, #2f96b4); Hintergrund-Image: -ms-linear-Gradient (oben, #5bc0de, #2f96b4); Hintergrund-Image: -Webkit-Gradient (linear, 0, 0, 0 100%, von (#5bc0de) bis (#2f96b4)); Hintergrund-Image: -Webkit-linear-Gradient (Top, #5bc0de, #2f96b4); Hintergrund-Image: -o-linear-Gradient (Top, #5BC0DE, #2F96B4); Hintergrund-Image: -o-linear-Gradient (Top, #5BC0DE, #2F96B4); Hintergrund-Image: Linear-Gradient (oben, #5bc0de, #2f96b4); Filter: Progid: DimaTransform.Microsoft.gradient (startColorStr = '#' 5bc0de, endcolorstr = '#' 2f96b4, GradientType = 0);}. Hintergrundfarbe: #2f96b4;}3. Farbsammler
Die Farbwählerin von StyleBootstrap ist sehr leistungsfähig. Sie können eine Farbe aus der Farbversion auswählen oder den hexadezimalen Wert der Farbe eingeben. Gleichzeitig können Sie den Farbblockbereich ziehen, um schnell die von Ihnen benötigte Farbe zu finden.
Mit JPicker Plug-In können Sie den CSS-Code des JPicker-Plug-In hier herunterladen und auf das Projekt verweisen und ihn dann über den folgenden CSS-Code rufen:
@media alle {#jpicker {margin: 0px 8px; Text-Align: links; } #jpicker ul {Schriftgröße: 15px; Rand: 0px 0px 15px; Polsterung: 0px; } #jpicker ul li {Listenstil: Disc; Polsterung: 2px 0px; } #jpicker ul li ul {margin-bottom: 10px; } #jpicker ul li ul li {Listenstil: Circle; } #jpicker p {Schriftgröße: 13px; Polsterung: 0px 10px; } #jpicker hr {clear: beides; } #jpicker h2.jpicker {Schriftgröße: 16px; Polsterung: 20px 10px; } #jpicker Code {color: #8bd; Schriftgröße: 14px; Schriftgewicht: fett; } #jpicker pre {Hintergrund: #eee; Grenze: 1PX Solid #000; Farbe: #000; Anzeige: Block; Schriftgröße: 11px; Rand: 10px 5px; Polsterung: 5px; } #jpicker span {Schriftgröße: 13px; Text-Align: Mitte; } #jpicker a {color: #ff8050; } #jpicker Eingabe {Schriftgröße: 13px; Polsterung: 2px 5px; } #jpicker H2 {Schriftgröße: 16px; Rand: 10px 0px; }}Zusammenfassen
Im Allgemeinen ist Stylebootstrap als CSS -Framework immer noch gut. Weitere Informationen zur Verwendung von StyleBootstrap erhalten Sie auch direkt zu seiner offiziellen Website, um sie anzuzeigen.
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.