1. Forme
Fichier de code source:
_form.scss
mixins / _form.scss
1. Selon la hiérarchie: groupe de formulaires -> formulaire de formul / entrée / groupe / format-statique -> Divers balises
2. Les conteneurs tels que Form-Group / Form-Control / Input-Group / Form-static-Control sont divisés en deux méthodes d'affichage: bloc et bloc de ligne. La cellule de table est utilisée pour atteindre le niveau du groupe d'entrée.
.input-group {affichage: en ligne; Adigne vertical: milieu; .input-group-addon, .input-group-btn, .form-control {width: auto; }}3. Input-group-addon: si la classe insère l'icône du texte de la page Web, elle mettra mal au pixel précédent.
Solution: Glyphicon ne peut pas être utilisé en conjonction avec d'autres styles, mais est utilisé en interne, car Glyphicon a un réglage de 1 pixel pour le haut:
.Glyphicon {position: relative; en haut: 1px; Affichage: bloc en ligne; Font-Family: «Glyphicons Halflings»; Style de police: normal; Police-poids: normal; hauteur de ligne: 1; -Webkit-Font-Soothing: Antialiased; -Moz-OSX-FONT-SOOTHING: GRAYSCALE;}2. Bar de navigation (Navbar)
Fichier de code source:
_navbar.scss
1. Diviser principalement les zones internes, telles que la tête, d'autres zones; et positionner les emplacements des barres de navigation
2. La mise en œuvre du dossier (supprimé en 4.0), c'est-à-dire la classe Navbar-Collapse, au lieu de s'effondrer, et une couche cachée apparaît sur le bouton
2.1. Navbar-Collapse: Lorsqu'il est supérieur au point d'arrêt, il sera affiché (car l'effondrement est caché par défaut)
3. Contenu prend en charge la navigation de navigation, la marque, le formulaire, le butin
4. NAVBAR-TOGGLER (4.0 supprimé): Défini sur l'affichage lorsque l'écran est inférieur à la valeur du point d'arrêt (768), et en 4.0, l'effondrement est utilisé pour afficher directement ce bouton. Il n'y a pas de limite sur la taille de l'écran. L'application de Navbar-Toggle doit également être utilisée en combinaison avec l'effondrement.
5. Navbar-statique-top: il ajoute uniquement du zindex, supprime les coins arrondis, la largeur de bordure et autres contenus.
6. Navbar-fixé-top / inférieur: ils sont tous positionnés au-dessus et en dessous, avec des effets flottants
7. Navbar-Brand: Brand, vous pouvez mettre des noms de pages Web, des logos d'entreprise et d'autres contenus
8. Navbar-Toggle: une image d'un clic utilisé pour le rétrécissement, qui sera affiché lorsqu'il est inférieur au point d'arrêt, et s'il est supérieur à cette valeur, il sera caché (et l'affichage à bascule est le bon flottant et sert d'élément de positionnement relatif):
.navbar-toggle {position: relative; flottant: à droite; marge-droite: $ navbar-padding-horizontal; rembourrage: 9px 10px; @include NAVBAR-Vertical-Align (34px); Color en arrière-plan: transparent; Image d'arrière-plan: aucun; // réinitialiser le style par défaut inhabituel de Firefox-on-Android; Voir https://github.com/necolas/normalize.css/issues/214 Border: 1px Solid Transparent; Border-Radius: $ Border-Radius-Base; // Nous supprimons le «Outline» ici, mais compense plus tard en attachant `: Hover` // Styles à`: focus ». &: focus {Outline: 0; } // Bars .Icon-Bar {affichage: bloc; Largeur: 22px; hauteur: 2px; Border-Radius: 1px; } .icon-bar + .icon-bar {margin-top: 4px; } @Media (min-large: $ grid-float-brisemberpoint) {affiche: aucun; }}9. NAVBAR-NAV: Le Nav d'origine a réalisé des paramètres compatibles. Devrons-nous ajuster le style sous Breakpoint-Max et le style sous Breakpointg, ou supprimer la couleur d'arrière-plan par défaut, l'ombre, etc.
10. Navbar-Form: Ajustez principalement toutes les formes à des éléments en ligne
11. Navbar-Text et Navbar-Btn: les deux ont fait des paramètres de compatibilité appropriés en fonction de la valeur par défaut
12. Navbar fournit deux thèmes: par défaut et inverse. Chaque thème a le traitement de compatibilité de style correspondant pour ses composants respectifs.
13. La barre de navigation elle-même n'a pas beaucoup de styles. Il ne fournit que deux contenus: Toggle and Brand, fournissant principalement deux thèmes, ainsi qu'une combinaison de quatre composants: la liste déroulante, l'effondrement, la forme et la navigation.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher un sujet merveilleux: Tutoriel d'apprentissage bootstrap
Cette série de didacticiels a été compilée dans: Bootstrap Basic Tutorials Touss spéciaux, bienvenue pour cliquer pour apprendre.
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.