Analyse sur la façon d'utiliser le formulaire et la barre de navigation dans Bootstrap

Cet article explique principalement en détail comment utiliser le formulaire et la barre de navigation dans Bootstrap. Les amis intéressés peuvent s'y référer

1. fichier :

_form.scss
mixins/_form.scss
1 Selon la structure hiérarchique : form-group -> /input-group/form-static-control -> Diverses balises 2. Les conteneurs tels que Form-group/form-control/input-group/form-static-control sont divisés en deux types Mode d'affichage : bloc, bloc en ligne. La cellule de tableau est utilisée pour implémenter le niveau du groupe d’entrée.

.input-group {
  display: inline-table;
  vertical-align: middle;
  .input-group-addon,
  .input-group-btn,
  .form-control {
  width: auto;
  }
}

3. Module complémentaire de groupe d'entrée : si l'icône de texte Web est insérée dans la classe, elle sera déplacée d'un pixel

Solution :

le glyphicon ne peut pas être combiné avec d'autres styles, mais est imbriqué en interne. Utilisez-le simplement, car le glyphicon a un paramètre de 1 pixel pour le haut :

.glyphicon {
 position: relative;
 top: 1px;
 display: inline-block;
 font-family: 'Glyphicons Halflings';
 font-style: normal;
 font-weight: normal;
 line-height: 1;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

2. Barre de navigation (barre de navigation)

Fichier de code source :

_navbar.scss
1. Zones internes principalement divisées, telles que : tête, autres zones. ; et positionnement de la barre de navigation 2. Implémentation du dossier (supprimée dans la version 4.0), c'est-à-dire la classe navbar-collapse, au lieu de réduire, un calque caché apparaît sur le bouton

Navbar-collapse : lorsqu'il est activé. est plus grand que Lorsque le point d'arrêt se produit, il sera forcé à s'afficher (car l'effondrement est masqué par défaut)

3. Le contenu prend en charge la navigation, la marque, le formulaire, le basculeur
4. Navbar-toggler (supprimé dans la version 4.0) : définir lorsque l'écran est plus petit que la valeur du point d'arrêt (768), alors qu'en 4.0, l'effondrement est utilisé pour afficher ce bouton directement. Il n'y a pas de limite de taille d'écran. L'application de navbar-toggle doit également être utilisée en combinaison avec l'effondrement 5. Navbar-static-top : ajoutez simplement zIndex et supprimez-le Coins remplis, largeur de bordure, etc.
6. Navbar-fixed-top/bottom : Ils sont positionnés au-dessus et en dessous, avec des effets flottants
7. Navbar-brand : Marque, vous pouvez mettre le nom de la page Web, le logo de l'entreprise et d'autres contenus
8. . Navbar -toggle : L'image cliquée utilisée pour rétrécir, elle sera affichée lorsqu'elle est inférieure au point d'arrêt, et sera masquée si elle est supérieure à cette valeur (et l'affichage à bascule est flottant à droite et utilisé comme un positionnement relatif. element) :

9. Navbar-nav : Certains paramètres de compatibilité ont été définis en fonction de la navigation d'origine, principalement l'ajustement du style sous breakpoint-max et l'ajustement du style sous breakpointg. Ou supprimez la couleur d'arrière-plan par défaut, l'ombre et tout autre contenu

.navbar-toggle {
 position: relative;
 float: right;
 margin-right: $navbar-padding-horizontal;
 padding: 9px 10px;
 @include navbar-vertical-align(34px);
 background-color: transparent;
 background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
 border: 1px solid transparent;
 border-radius: $border-radius-base;

 // We remove the `outline` here, but later compensate by attaching `:hover`
 // styles to `:focus`.
 &:focus {
 outline: 0;
 }

 // Bars
 .icon-bar {
 display: block;
 width: 22px;
 height: 2px;
 border-radius: 1px;
 }
 .icon-bar + .icon-bar {
 margin-top: 4px;
 }

 @media (min-width: $grid-float-breakpoint) {
 display: none;
 }
}

10. Navbar-form : ajustez principalement tous les formulaires pour qu'ils soient des éléments en ligne

11. Navbar-text, navbar-btn. : tous basés sur les paramètres de compatibilité par défaut

12. Navbar fournit deux thèmes, par défaut et inverse. Chaque thème a un traitement de compatibilité de style correspondant pour ses composants respectifs

13. La barre de navigation elle-même n'a pas beaucoup de styles, et elle. fournit uniquement En plus des deux contenus toggle et brand, il fournit principalement deux thèmes et une combinaison de quatre composants : liste déroulante, réduction, formulaire et navigation.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser des outils réactifs à l'aide de bootstrap

Comment implémenter le champ de recherche et la requête de table dans Bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!