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

Pour les citations directes, il est recommandé d'utiliser la balise

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

Code :

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

 La classe pré-défilement peut être utilisée pour définir jusqu'à 350 pixels avec une barre de défilement verticale. <p><br></p><var> Variable de balise d'étiquette <p><br></p><samp> <p><br></p>
<p>Table : <br></p>
<p><strong>.la classe table spécifie le style de base, </strong><br></p>.style rayé à rayures de table, <p><br></p>la classe .table-bordered a un style de bordure, <p><br></p>la classe .table-hover a un style de survol de la souris, <p><br></p>.classe condensée style compact. <p><br></p>Classe d'état (couleur de réglage de la ligne ou de la cellule) : actif, succès, info, avertissement, info. <p><br></p>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. 
<p><br></p>
<p><strong><br>Formulaire : </strong></p>
<p><strong>1 Exemple de base : </strong><br>Tous les .form-control sont définis. Classes <input>, <textarea>
Les éléments <select> auront leur attribut width défini sur width : 100 % ; </p>
<p></p>Enveloppez l'élément label et les contrôles mentionnés précédemment dans
Le meilleur arrangement peut être obtenu dans .form-group. <p><br></p>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. <p><br></p>form-group, input-group, control-group, <p><br></p>2. Formulaire en ligne : <p><br><form> -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). </p>
<p></p>
<p>La largeur du contrôle de la case radio/multi-sélection dans le formulaire en ligne est définie sur width: auto; <br></p>
<p>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. <br></p>
<p>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 <br></p>
<p>4.
: .radio, .radio-inline, .checkbox, .checkbox-inline. <br></p>
<p>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 <p> <br></p>
<p>6. L'état du contrôle <br></p>
<p>.disabled désactive les contrôles Lorsque désactivé est défini sur <fieldset>, tous les contrôles inclus sont désactivés. <br></p>
<p>Les balises a ne sont pas concernées par cela. L'attribut <br></p>
<p>readonly peut interdire la saisie de l'utilisateur. Ajoutez simplement la classe <br></p>
<p>.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. <br></p>
<p>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. </p>
<p>7. Taille du contrôle<br></p>
<p>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<br></p>
<p>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. <br></p>
<p>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. <br></p>
<p>8. Texte auxiliaire : classe help-block, texte auxiliaire de niveau "block" pour les contrôles de formulaire. <br></p>
<p><strong>Bouton : </strong></p>
<p>1. Style de base, btn, btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, actif <br></p>
<p>2. Afficher le formulaire, btn-link, btn-block, fermer <br></p>
<p>3. sm,.btn-xs. <br></p>
<p>La classe bouton peut être appliquée via les éléments <a>, <button> ou <input>, mais il est recommandé d'utiliser l'élément <button> chaque effet de navigateur. <br></p>
<p><strong>Image : </strong>Forme de l'image, img-rounded, img-circle, img-thumbnail, IE8 ne prend pas en charge l'attribut coins arrondis dans CSS3. <br></p>
<p><strong>Auxiliaire : </strong>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é
<strong><br></strong></p>
<p><strong>Style du composant</strong> <br></p>
<p><strong>Icône : </strong> <br></p>
<p>200 Une icône de police de Glyphicon Halflings. La classe d'icônes <br></p>
<p> ne peut être appliquée qu'à des éléments vides et ne peut pas être utilisée en conjonction avec d'autres composants. <br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><span class="glyphicon glyphicon-search"></span>

Copier après la connexion