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 "" 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

(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 ou un élément avec la classe .small.

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

2. Texte en ligne, utilisez L'étiquette représente le texte de l'annotation, delete, useless, insert, underline, small (la taille de police du conteneur parent 85 %), accentuation, italique.

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 devenir légèrement plus petit. Exemple : attr

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

7. Citation, enveloppez l'élément HTML dans

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:php;toolbar:false;'><span class="glyphicon glyphicon-search"></span>

Copier après la connexion

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 qui n'est pas inclus dans le

, 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!