Stylebootstrap est un framework d'interface utilisateur open source basé sur bootstrap. Actuellement, il existe de nombreux plug-ins d'extension basés sur le style bootstrap, tels que bootSwatch, bootMetro, etc. Nous les avons déjà introduits. Stylebootstrap doit être considéré comme une extension du style bootstrap. En plus de certains boutons, formulaires et menus de base, StyleBootstrap a également conçu un ramassage de couleurs complet, ce qui est très bon.
Caractéristiques de Stylebootstrap
Il a les caractéristiques du bootstrap est simple et efficace, et a une configuration flexible.
Compatible avec l'une ou l'autre version de Bootstrap.
Une palette de couleurs puissante est sa plus grande fonctionnalité.
Instances et code des composants liés à StyleBootstrap
1. Bar de navigation
Les fonctions de la barre de navigation de StyleBootstrap sont relativement puissantes. En plus des éléments de menu ordinaires, il peut également avoir diverses combinaisons de menus et de formulaires déroulants. Le plus grand point culminant est qu'il peut personnaliser et ajuster le style du menu, y compris des paramètres tels que les marges supérieures et inférieures, la couleur d'arrière-plan, etc.
Code CSS CORS:
.navbar-inner {background-iMage: -moz-linear-gradient (top, #ffffff, # f2f2f2); Image d'arrière-plan: -ms-linear-gradient (haut, #ffffff, # f2f2f2); Image en arrière-plan: -webkit-gradient (linéaire, 0 0, 0 100%, de (#ffffff), à (# f2f2f2)); Image d'arrière-plan: -webkit-linear-gradient (top, #ffffff, # f2f2f2); Image d'arrière-plan: -o-linéaire-gradient (haut, #ffffff, # f2f2f2); Image d'arrière-plan: -o-linéaire-gradient (haut, #ffffff, # f2f2f2); Image d'arrière-plan: -o-linéaire-gradient (haut, #ffffff, # f2f2f2); Image d'arrière-plan: -o-linéaire-gradient (haut, #ffffff, # f2f2f2); Image en arrière-plan: gradient linéaire (haut, #ffffff, # f2f2f2); Filtre: PROGID: dxiagetransform.microsoft.gradient (startColorstr = '#' ffffff, endColorstr = '#' f2f2f2, gradientType = 0);}. Navbar .Brand {padding: 8px 20px 12px; taille de police: 20px; Couleur: # 727272;}. Navbar .divider-Vertical {hauteur: 41px; Color d'arrière-plan: #FFFFFF; Border-droite: 1px solide # c6c6c6;}. Navbar .nav> li> a {padding: 10px 10px 11px; taille de police: 14px; Couleur: # 666666;}. Navbar .nav> .active> a, .navbar .nav> .active> a: hover, .navbar .nav> .active> a: focus {couleur: # 424242;}2. Bouton
De même, les boutons de Stylebootstrap peuvent non seulement définir des couleurs riches, mais aussi prendre en charge le traction, ce qui a l'air très bien.
Code CSS CORS:
.btn {Color: # 333333; Image en arrière-plan: -moz-linear-gradient (top, #ffffff, # e6e6e6); Image d'arrière-plan: -ms-linear-gradient (top, #ffffff, # e6e6e6); Image d'arrière-plan: -webkit-gradient (linéaire, 0 0, 0 100%, de (#ffffff), à (# e6e6e6)); Image d'arrière-plan: -webkit-linear-gradient (top, #ffffff, # e6e6e6); Image d'arrière-plan: -o-linéaire-gradient (haut, #ffffff, # e6e6e6); Image d'arrière-plan: gradient linéaire (haut, #ffffff, # e6e6e6); Filtre: Progid: dximageTransform.microsoft.gradient (startColorstr = '#' ffffff, endColorstr = '#' e6e6e6, gradientType = 0);}. btn: hover, .btn: active, .btn.active, .btn.disabled, .btn [désactivé] {couleur: # 33333; Background-Color: # e6e6e6;}. btn-primary {background-Color: # 006DCC; Image en arrière-plan: -moz-linear-gradient (haut, # 0088cc, # 0044cc); Image d'arrière-plan: -ms-linear-gradient (haut, # 0088cc, # 0044cc); Image d'arrière-plan: -webkit-gradient (linéaire, 0 0, 0 100%, de (# 0088cc), vers (# 0044cc)); Image d'arrière-plan: -webkit-linear-gradient (top, # 0088cc, # 0044cc); Image en arrière-plan: -o-linéaire-gradient (haut, # 0088cc, # 0044cc); Image en arrière-plan: -o-linéaire-gradient (haut, # 0088cc, # 0044cc); Image en arrière-plan: gradient linéaire (haut, # 0088cc, # 0044cc); Filter: Progid: dximageTransform.microsoft.gradient (startColorStr = '#' 0088cc, endColorstr = '#' 0044cc, gradientType = 0);}. Btn-primary: hover, .btn-prymar Background-Color: # 0044cc;}. BTN-WARNING {Background-Image: -moz-linear-Gradient (Top, # FBB450, # F89406); Image en arrière-plan: -ms-linear-gradient (haut, # fbb450, # f89406); Image en arrière-plan: -webkit-gradient (linéaire, 0 0, 0 100%, de (# fbb450), à (# f89406)); Image en arrière-plan: -webkit-linear-gradient (top, # fbb450, # f89406); Image en arrière-plan: -o-linéaire-gradient (haut, # FBB450, # FBB450, # F89406); Image en arrière-plan: gradient linéaire (haut, # FBB450, # f89406); Filtre: PROGID: dxiageTransform.microsoft.gradient (startColorStr = '#' fbb450, endColorstr = '#' f89406, gradientType = 0);}. btn-warning: hover, .btn-warning: active, .btn-warning.active, .btn-warning.disable Background-Color: # f89406;}. BTN-DANGER {Color: Background-Image: -moz-linear-Gradient (Top, # EE5F5B, # BD362F); Image d'arrière-plan: -ms-linéaire-gradient (haut, # EE5F5B, # bd362f); Image d'arrière-plan: -webkit-gradient (linéaire, 0 0, 0 100%, de (# ee5f5b), vers (# bd362f)); Image d'arrière-plan: -webkit-linear-gradient (top, # ee5f5b, # bd362f); Image en arrière-plan: -o-linéaire-gradient (haut, # ee5f5b, # bd362f); Image en arrière-plan: -o-linéaire-gradient (haut, # ee5f5b, # bd362f); Image en arrière-plan: gradient linéaire (haut, # ee5f5b, # bd362f); Filtre: PROGID: dxiageTransform.microsoft.gradient (startColorstr = '#' ee5f5b, endColorstr = '#' bd362f, GradientType = 0);}. Btn-danger: hover, .btn-danger: actif, .btn-danger.active, .btn-danger.disable # BD362F} .BTN-Success {Color: Background-Image: -moz-linear-Gradient (Top, # 62C462, # 51A351); Image d'arrière-plan: -ms-linéaire-gradient (haut, # 62C462, # 51A351); Image d'arrière-plan: -webkit-gradient (linéaire, 0 0, 0 100%, de (# 62C462), à (# 51A351)); Image d'arrière-plan: -webkit-linear-gradient (haut, # 62C462, # 51A351); Image d'arrière-plan: -o-linéaire-gradient (haut, # 62C462, # 51A351); Image d'arrière-plan: -o-linéaire-gradient (haut, # 62C462, # 51A351); Image en arrière-plan: gradient linéaire (haut, # 62C462, # 51A351); Filtre: PROGID: dxiagetransform.microsoft.gradient (startColorstr = '#' 62c462, EndColorstr = '#' 51A351, GradientType = 0);}. BTN-Success: Hover, .BTn-Success: Active, .BTn-Success.Active, .Btn-Success.Disabled, .Btn-Success [Disabled] {Background-Color: # 51A351;}. Image en arrière-plan: -moz-linear-gradient (haut, # 5BC0DE, # 2F96B4); Image d'arrière-plan: -ms-linear-gradient (haut, # 5BC0DE, # 2F96B4); Image en arrière-plan: -Webkit-Gradient (linéaire, 0 0, 0 100%, de (# 5BC0DE), à (# 2F96B4)); Image en arrière-plan: -webkit-linear-gradient (top, # 5bc0de, # 2f96b4); Image en arrière-plan: -o-linéaire-gradient (haut, # 5BC0DE, # 2F96B4); Image en arrière-plan: -o-linéaire-gradient (haut, # 5BC0DE, # 2F96B4); Image en arrière-plan: gradient linéaire (haut, # 5BC0DE, # 2F96B4); Filtre: Progid: dxiageTransform.microsoft.gradient (startColorstr = '#' 5BC0DE, ENDCOLOR Color d'arrière-plan: # 2F96B4;}3. Collecteur de couleurs
Le sélectionneur de couleurs de Stylebootstrap est très puissant. Vous pouvez sélectionner une couleur dans la version couleur ou entrer la valeur hexadécimale de la couleur. En même temps, vous pouvez faire glisser la zone de bloc de couleur pour localiser rapidement la couleur dont vous avez besoin.
En utilisant le plug-in jpicker, vous pouvez télécharger le code CSS du plug-in jpicker ici et le référer au projet, puis l'appeler via le code CSS suivant:
@media all {#jpicker {margin: 0px 8px; Texte-aligne: gauche; } #jpicker ul {font-size: 15px; marge: 0px 0px 15px; rembourrage: 0px; } #jpicker ul li {list-style: disque; rembourrage: 2px 0px; } #jpicker ul li ul {margin-boot: 10px; } #jpicker ul li ul li {list-style: Circle; } #jpicker p {Font-Size: 13px; rembourrage: 0px 10px; } #jpicker hr {clear: les deux; } #jpicker h2.jpicker {font-size: 16px; rembourrage: 20px 10px; } #jpicker code {couleur: # 8bd; taille de police: 14px; Police-poids: Bold; } #jpicker pre {background: #eee; bordure: 1px solide # 000; Couleur: # 000; Affichage: bloc; taille de police: 11px; marge: 10px 5px; rembourrage: 5px; } #jpicker span {Font-Size: 13px; Texte-aligne: Centre; } #jpicker a {couleur: # ff8050; } #jpicker input {font-size: 13px; rembourrage: 2px 5px; } #jpicker h2 {Font-Size: 16px; marge: 10px 0px; }}Résumer
En général, Stylebootstrap est toujours bon en tant que cadre CSS. Pour plus d'informations sur l'utilisation de Stylebootstrap, vous pouvez également vous rendre directement sur son site Web officiel pour le visualiser.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour étudier et vous attacher 3 sujets passionnants:
Tutoriel d'apprentissage bootstrap
Tutoriel pratique de bootstrap
Tutoriel d'utilisation du plug-in bootstrap
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.