Comment utiliser le framework bootstrap ? Introduction à l'utilisation du framework bootstrap

Bootstrap est l'un des frameworks front-end les plus populaires de Twitter. Le framework Bootstrap est basé sur HTML, CSS et javascript. Il est simple et flexible, ce qui rend le développement Web plus rapide. Cependant, de nombreux amis ne le savent pas. >Comment utiliser le framework bootstrap, l'article suivant vous présentera comment utiliser le framework bootstrap .

Sans plus tard, passons directement au texte~

(Recommandation de cours gratuite : tutoriel bootstrap)

1 , certains éléments HTML et attributs CSS utilisés dans Bootstrap doivent définir la page sur le type de document HTML5, c'est-à-dire ajouter "8b05045a5be5764f313ed5b9168a17e6" en haut de la page

2 Conteneur de mise en page : Bootstrap doit envelopper un conteneur .container ou conteneur-fluid (conteneur qui occupe toute la fenêtre d'affichage) pour le contenu de la page et le système de grille.

3 . Système de grille : Bootstrap fournit un système de grille fluide avec jusqu'à 12 colonnes. Vous pouvez créer rapidement une disposition de grille via .row représentant les lignes et .col-xs-4, une colonne représentant la largeur.

4 , la typographie Bootstrap et les styles de liens définissent les styles globaux de base.

La taille de la police est définie sur 14 pixels et la hauteur de la ligne est définie sur 1,428. L'élément

e388a4556c0f65e1904146cc1a846bee (paragraphe) est également défini avec une marge inférieure égale à la moitié de la hauteur de la ligne (c'est-à-dire 10 px).

Style de base

Mise en page :

1 Titre, peut être utilisé pour les classes .h1 à .h6. Le texte de l'attribut associé reçoit un style de titre et le sous-titre est marqué dans le titre via la balise d015d241ae6d34c34210679b5204fe85 ou un élément avec la classe .small.

Corps du texte : la classe .lead met les paragraphes en surbrillance.

2. Texte en ligne, utilisez f920514e6447cf1d171079d1371f007f L'étiquette représente le texte de l'annotation, 823db3943044a0a9a620ada8d4b1d965delete, 2e44d2d3284d23d932e1fd85f3d4cf3auseless, 426be984ffbbb815d7d88e3543a85d91insert, 88f336217b3880082bb52d49b5de60a5underline, d015d241ae6d34c34210679b5204fe85small (la taille de police du conteneur parent 85 %), 145da1be513e91f31aa46be6fb0fa619accentuation, 907fae80ddef53131f3292ee4f81644bitalique.

3. Classe d'alignement de texte, texte-gauche, centre-texte, texte-droite, justification de texte, texte-nowrap

4. -lowercase, text-uppercase, text-capitalize

5. Classe d'abréviation, définissez l'attribut title pour l'élément 8a7974376be5f6c00c121222b727adb9 devenir légèrement plus petit. Exemple : 54599fdb5ab440bc5f8e8737ad03d4c5attr4f2d06a7b2d26e0ad682bc6a608fa811

6. L'adresse est présentée dans le format pour une utilisation quotidienne. Ajoutez simplement 0c6dc11e160d3b678d68754cc175188a style.

7. Citation, enveloppez l'élément HTML dans b8a712a75cab9a5aded02f74998372b4 Pour les citations directes, il est recommandé d'utiliser la balise e388a4556c0f65e1904146cc1a846bee

8. List, classe sans style de liste supprime le style de liste par défaut Un ensemble d'éléments avec des styles et des marges de gauche (uniquement pour les enfants directs). Les ensembles de classes list-inline affichent : inline-block ; Et ajoutez une petite quantité de remplissage pour placer tous les éléments sur la même ligne. La classe dl-horizontal organise les phrases et leurs descriptions dans 5c69336ffbc20d23018e48b396cdd57a

Code :

ffbe95d20f3893062224282accb13e8f 🎜>La balise 5e4e803d53d659f332070b5d4aa430db marque le contenu saisi par l'utilisateur via le clavier

e03b848252eb9375d56be284e690e873 La classe pré-défilement peut être utilisée pour définir jusqu'à 350 pixels avec une barre de défilement verticale.

b7f90f73cad438258bf67e62f79b2113 Variable de balise d'étiquette

162cd570ab1483e383d78dcb7f452f7c

Table :

.la classe table spécifie le style de base,

.style rayé à rayures de table,

la classe .table-bordered a un style de bordure,

la classe .table-hover a un style de survol de la souris,

.classe condensée style compact.

Classe d'état (couleur de réglage de la ligne ou de la cellule) : actif, succès, info, avertissement, info.

Enveloppez n'importe quel élément .table dans un élément .table-responsive pour créer un tableau réactif qui défilera horizontalement sur les appareils à petit écran (moins de 768 px). La barre de défilement horizontale disparaît lorsque l'écran a une largeur supérieure à 768 px.

Formulaire :

1 Exemple de base :
Tous les .form-control sont définis. Classes d5fd7aea971a85678ba271703566ebfd, 4750256ae76b6b9d804861d8f69e79d3 Les éléments 221f08282418e2996498697df914ce4e auront leur attribut width défini sur width : 100 % ;

Enveloppez l'élément label et les contrôles mentionnés précédemment dans Le meilleur arrangement peut être obtenu dans .form-group.

Ne mélangez pas les groupes de formulaires directement avec les groupes de zones de saisie. Il est recommandé d'imbriquer le groupe de zones de saisie dans le groupe de formulaires.

form-group, input-group, control-group,

2. Formulaire en ligne :

ff9c23ada1bcecdd1a0fb5d5a0f18437 -inline classe son contenu est aligné à gauche et se comporte comme un contrôle de niveau de bloc en ligne. S'applique uniquement lorsque la fenêtre d'affichage a une largeur d'au moins 768 px (toute largeur de fenêtre plus petite entraînera l'effondrement du formulaire).

La largeur du contrôle de la case radio/multi-sélection dans le formulaire en ligne est définie sur width: auto;

Si vous ne définissez pas l'étiquette pour chaque contrôle d'entrée, le lecteur d'écran ne pourra pas s'identifier correctement. Pour ces formulaires en ligne, vous pouvez le masquer en définissant la classe .sr uniquement pour l'étiquette.

3. Formulaires disposés horizontalement : Modifiez le comportement de .form-group en ajoutant la classe .form-horizontal au formulaire afin qu'il se comporte comme une ligne dans le système de grille

4. : .radio, .radio-inline, .checkbox, .checkbox-inline.

5. Contrôles statiques : Dans un formulaire disposé horizontalement, si vous devez placer une ligne de texte brut et l'élément label sur la même ligne, ajoutez simplement la classe .form-control-static à l'élément e388a4556c0f65e1904146cc1a846bee

6. L'état du contrôle

.disabled désactive les contrôles Lorsque désactivé est défini sur 2b5469ab79cf842344327415c3b3bb95, tous les contrôles inclus sont désactivés.

Les balises a ne sont pas concernées par cela. L'attribut

readonly peut interdire la saisie de l'utilisateur. Ajoutez simplement la classe

.has-warning, .has-error ou .has-success à l'élément parent de ceux-ci. contrôles. Tous les éléments .control-label, .form-control et .help-block contenus dans cet élément accepteront les styles de ces états de validation.

Vous pouvez également ajouter des icônes supplémentaires à la zone de saisie pour l'état de vérification (notez que cela dépend de la balise d'étiquette). Définissez simplement la classe .has-feedback correspondante et ajoutez l'icône correcte.

7. Taille du contrôle

Vous pouvez définir la hauteur du contrôle via les classes similaires .input-lg et .input-sm, et vous pouvez définir la hauteur du contrôle via .col-lg-* et classes similaires. Définir la largeur

Définissez rapidement la taille des éléments d'étiquette et des contrôles de formulaire enveloppés dans .form-horizontal en ajoutant le .form-group-lg ou .form-. classe de groupe-sm.

Vous pouvez facilement définir la largeur de la zone de saisie ou de l'un de ses éléments parents en l'enveloppant avec une colonne dans le système de grille.

8. Texte auxiliaire : classe help-block, texte auxiliaire de niveau "block" pour les contrôles de formulaire.

Bouton :

1. Style de base, btn, btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, actif

2. Afficher le formulaire, btn-link, btn-block, fermer

3. sm,.btn-xs.

La classe bouton peut être appliquée via les éléments 3499910bf9dac5ae3c52d5ede7383485, bb9345e55eb71822850ff156dfde57c8 ou d5fd7aea971a85678ba271703566ebfd, mais il est recommandé d'utiliser l'élément bb9345e55eb71822850ff156dfde57c8 chaque effet de navigateur.

Image : Forme de l'image, img-rounded, img-circle, img-thumbnail, IE8 ne prend pas en charge l'attribut coins arrondis dans CSS3.

Auxiliaire : texte en sourdine, texte-primaire, texte-succès, texte-info, texte-avertissement, texte-danger , bg-primaire, bg-succès, bg-info, bg-avertissement, bg-danger, symbole triangulaire, caret , flotter , centré

Style du composant

Icône :

200 Une icône de police de Glyphicon Halflings. La classe d'icônes

ne peut être appliquée qu'à des éléments vides et ne peut pas être utilisée en conjonction avec d'autres composants.

<span class="glyphicon glyphicon-search"></span>

Menu :

Enveloppez le déclencheur du menu déroulant et le menu déroulant dans .dropdown

Alignement des menus : par défaut, les menus déroulants sont automatiquement positionnés à 100 % de la largeur le long des bords supérieur et gauche de l'élément parent. L'ajout de la classe .dropdown-menu-right à .dropdown-menu permet d'aligner le menu à droite

Regroupement de menus : éléments de description du tableau d'en-tête déroulant, éléments désactivés du tableau .disabled

Pop up : La classe .dropup peut ouvrir le menu déroulant déclenché vers le haut

Groupe de boutons :

Button group.btn-group, spécifiez la taille du bouton dans le groupe via .btn-group-*.

Barre de boutons.btn-toolbar

La disposition de la pile verticale des boutons affiche btn-group-vertical

Le groupe de boutons alignés aux deux extrémités btn -groupe-justifié

Navigation :

La classe Tab .nav-tabs dépend de la classe de base .nav.

Page à onglet Capsule Classe .nav-pills, ajoutez la classe .nav-stacked pour la changer en empilement vertical. La classe justifiée

.nav permet de faire en sorte que les onglets ou les capsules apparaissent facilement de la même largeur.

navbar navbar-default

Pour l'élément bb9345e55eb71822850ff156dfde57c8 qui n'est pas inclus dans le ff9c23ada1bcecdd1a0fb5d5a0f18437, après avoir ajouté .navbar-btn, vous pouvez créer il Centre la barre de navigation verticalement.

Placer le formulaire à l'intérieur d'un formulaire .navbar peut fournir un bon alignement vertical,

.navbar-text

.

Classes utilitaires .navbar-left et .navbar-right pour aligner les liens de navigation, les formulaires, les boutons ou le texte.

La classe .navbar-fixed-top peut réparer la barre de navigation en haut

La classe .navbar-fixed-bottom peut réparer la barre de navigation en bas

.navbar-static-top classe permet à la barre de navigation de disparaître lorsque la page défile vers le bas. La classe

.navbar-inverse peut changer l'apparence de la barre de navigation.

fil d'Ariane crée une structure de navigation hiérarchique (fil d'Ariane).

Paging :

pagination, et utilisez la classe .disabled et la classe .active pour le numéro de page selon la situation.

Les classes .pagination-lg ou .pagination-sm fournissent des tailles facultatives supplémentaires.

pager Page simple tournant vers les pages précédentes et suivantes. Et peut être noté par les cours précédents et suivants.

Étiquette : classe de base d'étiquette d'étiquette, vous pouvez modifier l'étiquette via label-default, label-primary, label-success, label-info, label-warning, label- Apparition de danger.
badge, qui peut afficher de manière très visible des informations nouvelles ou non lues.

Autres : Vignettes , boîte de dialogue , barre de progression , objets multimédias, etc.

Style personnalisé

BootStrap fournit des composants et des plug-ins jquery pour une personnalisation en fonction de leurs propres besoins. Les utilisateurs peuvent également modifier directement le code source de Less.

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!