Aller au contenu

Comment effectuer la mise en forme du texte avec le Framework BootStrap 3

Apprenez à mettre en valeur le contenu de votre site avec le Framework BootStrap 3.

Découvrez comment personnaliser vos titres et vos paragraphes, faire des citations, rajouter de la couleur.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment effectuer la mise en forme du texte avec le Framework BootStrap 3

Bonjour à tous et bienvenu sur développement facile, donc dans ce nouveau cours dédié au Framework CSS BootStrap 3. Vous allez apprendre à justement créer du contenu texte avec les différentes options d’affichage vous allez apprendre à mettre en valeur votre texte définir un fond, etc.  On va voir tout ça ensemble dans ce cours.

Les titres

Donc il faut savoir que BootStrap 3 propose déjà des pré formatages pour votre titre. Donc H1, en fait j’ai tout listé sur cette présentation, suffira de la mettre en pause et de lire la présentation. H1 taille 36 pixels, vous avez padding-top c’est-à-dire l’espacement en haut l’espacement en bas toujours en pixels, 20 pixels, 10 pixels. H2 jusqu’à H6 donc l’avantage de BootStrap3 il a des valeurs prédéfinies pour tous les titres avec un espace en haut un espace en bas défini en pixel, après en fonction du type de titre que vous affichez sur votre site Internet, vous utilisez la balise correspondante.

Les paragraphes

Vous avez également des classes CSS pour aligner très facilement les paragraphes. Vous avez un paragraphe avec une balise <p> avec du texte dedans, vous souhaiter aligner à gauche et vous mettez la classe CSS text-left automatiquement votre texte sera aligné à gauche. Si vous voulez l’aligner à droite au contraire, vous utiliser la classe CSS text-right. Si vous voulez votre texte soit centré dans votre paragraphe en fait dans votre balise <p>, vous utilisez la balise CSS text-center donc c’est aussi simple que ça il suffit d’ajouter une classe CSS à votre paragraphe pour l’aligner à gauche, centré ou à droite automatiquement. Donc ça permet de gagner un temps énorme, tout simplement.

Mettre en avant du texte

Vous avez un texte imposant, c’est à dire un grand texte affiché sur votre page en principe on affiche un petit résumé notamment sur les blogs quand les articles font énormément de mots on affiche un petit résumé donc ç’est un paragraphe juste après le titre et donc BootStrap gère ce système de résumé avec la classe lead. Vous mettez votre paragraphe, donc votre balise <p> et vous ajoutez la classe CSS lead et vous affichez votre résumé. Donc vous avez H1 le titre, lead p avec la classe CSS le résumé et derrière votre classe normale avec l’article, donc en principe on met le titre, le résumé et un lien lire la suite, vous apprendrez à faire des boutons avec BootStrap 3, vous aurez votre bouton lire la suite et après ça va vous afficher justement votre article au complet.

Les citations

Bien évidemment BootStrap, comme sur les blogs, je prends souvent l’exemple de blogs, tout le monde connaît WordPress, c’est très parlant, permet l’utilisation des citations comme citation nombre de vue dans YouTube, dans les blogs pardon, d’avoir un petit compteur mis en valeur pour le nombre de vues, les forums, les articles.

Donc vous pouvez utiliser le blockquote, donc c’est exactement comme avec WordPress pour créer un bloc de citations. Donc blockquote, votre texte small pour afficher en tout petit. Blockquote donc ça fait un système de citation ou de témoignages comme vous voyez sur certains sites avec la balise blockquote et small pour afficher en tout petit. Je vous montrerais un exemple et comme ça vous verrez un petit peu ce que ça donne.

Le texte sous fond de couleur

Bien évidemment vous pouvez insérer un bloc de texte du contenu HTML dans vos blocs div avec un arrière-plan de couleur. Donc vous avez des boîtes avec un arrière-plan couleur qui contient votre contenu HTML,  du texte en gras, en italique, des images et vous pouvez bien évidemment définir des bordures fine, des coins arrondis dans votre bloc, suffit tout simplement d’utiliser une balise div avec la classe CSS well. C’est aussi simple que ça. Donc par défaut well possède un padding de 19 pixels, et il est possible d’utiliser des sous-classes well-lg large périphérique, well-sm small size pour modifier la taille de ce padding. En fait ça va vous permettre classe well donc div classe  well, comme vous voyez l’exemple sur votre écran, de mettre du texte en avant dans une div de couleur avec des bordures des coins arrondis et vous définissez le padding avec well-lg ou well-sm, c’est un exemple pour définir en fonction de la taille du périphérique d’affichage de votre bloc de texte mis en avant.

Exemple d’application

Je vous montre un exemple de code source tout de suite visuellement c’est toujours beaucoup plus parlant donc je passe l’inclusion de la classe CSS et du fichier JavaScript, vous connaissez. Là aussi je vous ai expliqué dans les cours précédents comment créer ces zones de couleur tout simplement. Je passe directement au code source la classe row pour définir une grille et donc sur les périphériques de bureau ça va utiliser neuf colonnes. Le petit résumé, donc les titres, le résumé ici, et en fait pour centrer du texte, donc texte center donc sur notre grille le texte est centré même si on saute une ligne, juste en utilisant ça. Le texte alinéa droite, juste en utilisant la classe text-right, donc aligné à droite, mais pas dans cette grille là, dans cette grille secondaire, puisque on a défini une deuxième grille ici et ici. Par contre dans la grille principale le texte est centré. Vous avez la puissance du framework BootStrap pour ce système de grille et donc aligner du texte et donc là vous avez un bloc de citation avec du texte et du texte écrit en plus petit, donc citation couplée faiblement les objets qui interagissent donc ce que je vous conseille de faire avec l’auteur de la citation donc programmation-facile.com moi-même. Ça vous fait des citations que vous pouvez utiliser pour mettre en valeur votre contenu avec différentes possibilités donc comme je vous l’ai dit blockquote, small pour afficher en plus petit et donc le système de grille qui est vraiment très pratique donc si je diminue bien évidement sur les Smartphones ça s’affiche un peu plus difficilement, sur les tablettes et donc vous avez également le texte avec well si je mets SM pour l’afficher en plus petit il sera affiché beaucoup plus petit et peut-être que ça passe sur les périphériques ça passe un peu mieux sur les périphériques mobiles, il faudrait que j’agrandisse, j’ai défini des zones, j’agrandisse la taille de la zone ou que je les mette en automatique tout simplement donc là je vais recharger la page et les tailles des zones vont être agrandis. Voilà la taille s’est agrandie. Donc là c’est du CSS vraiment basique après c’est bien évidemment à adapté en hauteur automatique, en fonction du périphérique. Juste je voulais vous montrer la mise en avant du texte, je voulais ajouter un commentaire, mise en avant d’un bloc de texte dans une div bordure fine et coin arrondi tout simplement et donc là ça permet de centrer enfin d’aligner le texte suivant vos préférences voilà un alignement à gauche alignement du texte à gauche par contre très très important c’est dans la grille ci-dessus, pas la grille principale, dans la grille imbriquée on va dire, ça vous parle mieux dans la grille imbriquée, c’est-à-dire dans cette grille le texte est aligné à gauche dans cette grille le texte est aligné à droite dans cette grille le texte est centré ici dans cette grille.

Votre plan d’actions !

Maintenant c’est à vous de jouer, comme je vous le dis, vous avez toutes les cartes en main pour créer des sites magnifiques qui s’adaptent automatiquement sur les Smartphones, les tablettes et les ordinateurs de bureau donc de vos internautes si vous avez des questions posez-les sous cette vidéo également sous cette vidéo vous retrouverez le code source complet de l’exemple utilisé. Et maintenant je vous invite à regarder la deuxième vidéo, à la fin de cette vidéo un lien va apparaître dans cette vidéo, il suffira de cliquer sur ce lien ou il y a une image au-dessus de cette vidéo ça va vous renvoyer vers la suite donc la deuxième vidéo pour aller beaucoup plus loin avec HTML 5, CSS 3, le framework BootStrap 3. Donc je vous dis à tout de suite dans la deuxième vidéo.

[/ppmtoggle][/ppmaccordion]

Télécharger l’exemple de mise en forme du texte

Retrouvez le code source commenté pour revoir tout ce que vous avez appris dans ce cours.

Téléchargement du code source Exemple de mise en forme du texte avec BootStrap 3

Cliquez ici pour télécharger le code source Exemple de mise en forme du texte avec BootStrap 3

Partagez vos sites Web réalisés avec BootStrap 3

Utilisez les commentaires pour partager vos réalisations avec BootStrap 3

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Concevoir des Applications Mobiles Magnifiques — d’ici les 7 prochains jours ?

TÉLÉCHARGEZ : Les codes sources du livre « HTML5 / CSS3 » pour Créer VOS Applications Mobiles — d’ici les 7 prochains jours !

Cliquez ici pour tout recevoir >>