Latest web development tutorials

mise en page Bootstrap

Bootstrap utilisant Helvetica Neue, Helvetica, Arial et police sans-serif comme pile par défaut.

Bootstrap en utilisant une fonction de mise en page, vous pouvez créer des titres, paragraphes, listes, et d'autres éléments en ligne.

titre

Bootstrap définit toutes les rubriques HTML (h1 à h6) styles. Prenons les exemples suivants:

Exemples

<H1> je dirigeais 1 h1 </ h1> <H2> je dirigeais 2 h2 </ h2> <H3> je dirigeais 3 h3 </ h3> <H4> Je me dirigeais 4 h4 </ h4> <H5> je dirigeais 5 h5 </ h5> <H6> je dirigeais 6 h6 </ h6>

Essayez »

Les résultats sont les suivants:

titre

Inline des sous-titres

Si vous avez besoin d'ajouter un sous - titre à inline tout titre, il suffit d' ajouter des deux côtés de l'élément <small>, ou ajouter.small classe, de cette façon vous pouvez obtenir une plus petite taille plus légère couleur du texte, comme les exemples suivants comme suit:

Exemples

<H1> I se dirigeait 1 h1. <Small> I sous - titre 1 h1 </ small> </ h1> <H2> I se dirigeait 2 h2. <Small> Je suis un sous - titre 2 h2 </ small> </ h2> <H3> I se dirigeait 3 h3. <Small> Je suis un sous - titre 3 h3 </ small> </ h3> <H4> I se dirigeait 4 h4. <Small> Je suis un sous - titre 4 h4 </ small> </ h4> <H5> I se dirigeait 5 h5. <Small> Je suis un sous - titre 5 h5 </ small> </ h5> <H6> I se dirigeait 6 h6. <Small> I sous - titre 6 h6 </ small> </ h6>

Essayez »

Les résultats sont les suivants:

Inline des sous-titres

Une copie du corps de guidage

Afin d'ajouter un paragraphe pour souligner le texte, vous pouvez ajouter class = "plomb", qui sera plus grand et plus audacieux, plus la hauteur de la ligne de texte, comme le montrent les exemples suivants:

Exemples

<H2> copie de corps de guidage </ h2> <P class = "lead"> Ceci est un exemple de copie de démonstration de l' utilisation du corps de guidage. Ceci est un exemple d'une version de démonstration de l'utilisation du corps de guidage. Ceci est un exemple d'une version de démonstration de l'utilisation du corps de guidage. Ceci est un exemple d'une version de démonstration de l'utilisation du corps de guidage. Ceci est un exemple d'une version de démonstration de l'utilisation du corps de guidage. Ceci est un exemple d'une version de démonstration de l'utilisation du corps de guidage. Ceci est un exemple d'une version de démonstration de l'utilisation du corps de guidage. Ceci est un exemple d'une version de démonstration de l'utilisation du corps de guidage. </ P>

Essayez »

Les résultats sont les suivants:

Une copie du corps de guidage

mettre l'accent sur

Les balises HTML par défaut pour mettre en valeur <small> (85% de la société mère définir la taille de texte du texte), <strong> (définir le texte texte plus audacieux), <em> (définir le texte en italique).

Bootstrap fournit des classes utilisées pour souligner le texte, comme le montrent les exemples suivants:

Exemples

<Small> La Banque est dans la balise de contenu </ small> <br> <Strong> La Banque est dans la balise de contenu </ strong> <Em> La Banque est dans le contenu de la balise, et rendu comme italique </ em> <P class = "text-left"> texte aligné à gauche </ p> <P class = "text-center"> Aligner texte </ p> <P class = "text-right"> texte aligné à droite </ p> <P class = "text-coupé"> contenu Bank est atténué </ p> <P class = "text-primaire"> contenu Bank avec une classe primaire </ p> <P class = "text-succès»> Contenu de la Banque avec une classe de réussite </ p> <P class = "text-info"> contenu avec une information de classe bancaire </ p> <P class = "text-warning"> contenu bancaire avec une classe d'avertissement </ p> <P class = "text-danger"> Contenu de la Banque avec une classe de danger </ p>

Essayez »

Les résultats sont les suivants:

mettre l'accent sur

abréviation

HTML élément tag est fourni pour les abréviations, comme WWW ou HTTP. définition Bootstrap de <abbr> élément de style pour afficher une ligne en pointillé dans le texte au bas du cadre, lorsque la souris est au - dessus affichera le texte intégral (aussi longtemps que vous ajoutez un <abbr> title attribut texte). Afin d'obtenir un texte de police plus petite, ajouter .initialism à <abbr>.

Exemples

<Abbr title = "World Wide Web"> WWW </ abbr> <br> <Abbr title = "Real Simple Syndication" class = "initialism"> RSS < / abbr>

Essayez »

Les résultats sont les suivants:

abréviation

Adresse (Address)

Utilisez <adresse> tag, vous pouvez afficher les informations de contact sur la page. Depuis <adresse> affichage par défaut: block;, vous avez besoin d'utiliser des étiquettes pour ajouter un texte adresse enveloppe fermée.

Exemples

<Adresse> <Strong> Certains Company, Inc. < / strong> 007 rue <br> Certains Ville, État XXXXX <br> <Abbr title = "Téléphone"> P: </ abbr> (123) 456-7890 </ address> <Adresse> <Strong> Nom complet </ strong > <br> <A href = "mailto: #"> [email protected] </ a> </ Adresse>

Essayez »

Les résultats sont les suivants:

adresse

Référence (Blockquote)

Vous pouvez utiliser la valeur par défaut <blockquote> à côté d'un texte HTML. D' autres options incluent l' ajout d' un <small> pour identifier la source d'une citation en utilisant laclasse.Retirer droite référence d'alignement à droite. L'exemple suivant illustre ces caractéristiques:

Exemples

<Blockquote> <P> Ceci est une référence à l'instance par défaut. Ceci est une référence à l'instance par défaut. Ceci est une référence à l'instance par défaut. Ceci est une référence à l'instance par défaut. Ceci est une référence à l'instance par défaut. Ceci est une référence à l'instance par défaut. Ceci est une référence à l'instance par défaut. Ceci est une référence à l'instance par défaut. </ P> </ Blockquote> <Blockquote> Ceci est un titre avec une source de référence. <Small> Quelqu'un célèbre <cite title = "Source Titre"> Source Titre </ cite> </ small> </ Blockquote> <blockquote class = "pull-right"> Ceci est une référence à la aligné à droite. <Small> Quelqu'un célèbre <cite title = "Source Titre"> Source Titre </ cite> </ small> </ Blockquote>

Essayez »

Les résultats sont les suivants:

citation

liste

soutien Bootstrap listes ordonnées, les listes à puces et des listes de définitions.

  • Liste ordonnée: une liste ordonnée de nombres ou d' autres moyens au début de la liste de caractères ordonnée.
  • Liste non ordonnée: liste non ordonnée se réfère à une liste sans ordre particulier, est une liste de numéros commençant par l' accent sur le style traditionnel.Si vous ne souhaitez pas afficher cet accent, vous pouvez utiliser laclasse.list-sans style pour supprimer les styles. Vous pouvez également utiliser la listede classe.list-inline de tous les éléments sur la même ligne.
  • Leslistes de définitions: Dans ce type de liste, chaque élément de la liste peut contenir <dt> et <dd>.<Dt> au nom de ladéfinition des termescomme le dictionnaire, qui fait partie du (ou des phrases) sont définies. Ensuite, <dd> est <dt> description. Vous pouvez utiliser laclassedl-horizontale , le <dl> ligne appartient Description affiche côte à côte.

L'exemple suivant illustre ces types de listes:

Exemples

<H4> Ordonné Liste </ h4> <Ol> <Li> Article 1 </ li > <Li> Article 2 </ li > <Li> Article 3 </ li > <Li> Article 4 </ li > </ Ol> <H4> Liste unordered </ h4> <Ul> <Li> Article 1 </ li > <Li> Article 2 </ li > <Li> Article 3 </ li > <Li> Article 4 </ li > </ Ul> <H4> Liste de style undefined </ h4> <Ul class = "liste-sans style"> <Li> Article 1 </ li > <Li> Article 2 </ li > <Li> Article 3 </ li > <Li> Article 4 </ li > </ Ul> <H4> Liste Inline </ h4> <Ul class = "list-inline"> <Li> Article 1 </ li > <Li> Article 2 </ li > <Li> Article 3 </ li > <Li> Article 4 </ li > </ Ul> <H4> Liste de définitions </ h4> <Dl> <Dt> 1 Description </ dt > <Dd> Article 1 </ dd > <Dt> Description de 2 </ dt > <Dd> Article 2 </ dd > </ Dl> Liste de définitions <h4> niveau </ h4> <Dl class = "dl-horizontal"> <Dt> 1 Description </ dt > <Dd> Article 1 </ dd > <Dt> Description de 2 </ dt > <Dd> Article 2 </ dd > </ Dl>

Essayez »

Les résultats sont les suivants:

liste

Plus classe typesetting

Le tableau suivant fournit des exemples supplémentaires Bootstrap classe typographie:

catégorie description Exemples
.lead Sélectionnez le paragraphe pour essayer
.small Réglage petit texte (fixé à 85% la taille du texte de parent) essayer
.text gauche Définir texte aligné à gauche essayer
.text-centre Texte Réglage Aligner essayer
.text droite Texte Réglage Aligner à droite essayer
.text-justify Définition de l'alignement du texte, paragraphes au-delà de l'écran un peu d'habillage de texte essayer
.text-nowrap Le paragraphe au-delà de l'écran envelopper partiellement essayer
.text-minuscules Réglage de texte en minuscules essayer
.text en majuscules Réglage de texte en majuscules essayer
.text-capitaliser Réglage initiales de mots essayer
.initialism Il est affiché dans l'élément <abbr> dans le texte à afficher de petites polices essayer
.blockquote-reverse Définition d'une référence à un aligné à droite essayer
.list-sans style Retirez le style de liste par défaut, les éléments de liste aligné à gauche (<ul> et <ol> in). Cette catégorie applique uniquement pour diriger la liste des éléments de l'enfant (si vous avez besoin d'enlever un emboîtées éléments de la liste, vous devez utiliser le style dans une liste imbriquée) essayer
.list-inline Sera placé sur la même ligne tous les éléments de la liste essayer
.dl horizontal Cette classe définit le flotteur et le décalage appliqué <dl> et l'élément <dt>, vous pouvez visualiser les exemples spécifiques de mise en œuvre essayer
.PRE-scrollable Donc élément <pre> scrollable scrollable essayer