Apprenez mettre en valeur le contenu de votre site avec le Framework BootStrap 3.Dcouvrez comment personnaliser vos titres et vos paragraphes, faire des citations, rajouter dela couleur. Tout est dans la formation ci-dessous.

jQLeadBrite("#leadplayer_video_element_53DD145742F0E").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDRVZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidHh0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludmFsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTNERDE0NTc0MkYwRSIsIndpZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6IkNvbW1lbnQgZWZmZWN0dWVyIGxhIG1pc2UgZW4gZm9ybWUgZHUgdGV4dGUgYXZlYyBsZSBGcmFtZXdvcmsgQm9vdFN0cmFwICIsImRlc2NyaXB0aW9uIjoiQ29tbWVudCBlZmZlY3R1ZXIgbGEgbWlzZSBlbiBmb3JtZSBkdSB0ZXh0ZSBhdmVjIGxlIEZyYW1ld29yayBCb290U3RyYXAgIiwiYXV0b3BsYXkiOmZhbHNlLCJzaG93X3RpbWVsaW5lIjp0cnVlLCJlbmFibGVfaGQiOnRydWUsIm9wdCI6ZmFsc2UsImN0YSI6eyJ0aW1lIjoiZW5kIiwiYnRleHQiOiJDbGlxdWV6IGljaSBwb3VyIHByb2ZpdGVyIFx1MDBlMCB2b3RyZSBhdmFudGFnZSBkZXMgbm91dmVhdXRcdTAwZTlzIEhUTUw1IGV0IENTUzMgISAiLCJ1cmwiOiJodHRwOlwvXC93d3cuZm9ybWF0aW9uLWh0bWwudHZcLyIsImF1dG9fZm9sbG93IjpmYWxzZSwibmV3X3dpbmRvdyI6ZmFsc2V9LCJ5bSI6IjJCb0lPSGVyYTEwIn0=");

Afficher le texte de la vidoComment effectuer la mise en forme du texte avec le Framework BootStrap 3 Bonjour tous et bienvenu sur dveloppement facile, donc dans ce nouveau cours ddi au FrameworkCSS BootStrap 3. Vous allez apprendre justement crer du contenu texte avec les diffrentesoptions d'affichage vous allez apprendre mettre en valeur votre texte dfinir un fond, etc. Onva voir tout a ensemble dans ce cours.Les titres Donc il faut savoir que BootStrap 3 proposedj des pr formatages pour votre titre. Donc H1, en fait j'ai tout list sur cette prsentation,suffira de la mettre en pause et de lire la prsentation. H1 taille 36 pixels, vous avez padding-top c'est--dire l'espacement en haut l'espacement en bas toujours en pixels, 20 pixels, 10pixels. H2 jusqu' H6 donc l'avantage de BootStrap3 il a des valeurs prdfinies pour tous lestitres avec un espace en haut un espace en bas dfini en pixel, aprs en fonction du type detitre que vous affichez sur votre site Internet, vous utilisez la balise correspondante.Lesparagraphes Vous avez galement des classes CSS pour aligner trs facilement lesparagraphes. Vous avez un paragraphe avec une balise

avec du texte dedans, vous souhaiter aligner gauche et vous mettez la classe CSS text-left

1 / 4

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 votreparagraphe en fait dans votre balise

, vous utilisez la balise CSS text-center donc c'est aussi simple que a il suffit d'ajouter uneclasse 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 Vousavez un texte imposant, c'est dire un grand texte affich sur votre page en principe on afficheun petit rsum notamment sur les blogs quand les articles font normment de mots on afficheun petit rsum donc 'est un paragraphe juste aprs le titre et donc BootStrap gre ce systmede rsum avec la classe lead. Vous mettez votre paragraphe, donc votre balise

et vous ajoutez la classe CSS lead et vous affichez votre rsum. Donc vous avez H1 le titre,lead p avec la classe CSS le rsum et derrire votre classe normale avec l'article, donc enprincipe on met le titre, le rsum et un lien lire la suite, vous apprendrez faire des boutonsavec BootStrap 3, vous aurez votre bouton lire la suite et aprs a va vous afficher justementvotre article au complet.Les citations Bien videmment BootStrap, comme sur les blogs, jeprends souvent l'exemple de blogs, tout le monde connat WordPress, c'est trs parlant, permetl'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. Doncvous pouvez utiliser le blockquote, donc c'est exactement comme avec WordPress pour crerun bloc de citations. Donc blockquote, votre texte small pour afficher en tout petit. Blockquotedonc a fait un systme de citation ou de tmoignages comme vous voyez sur certains sitesavec la balise blockquote et small pour afficher en tout petit. Je vous montrerais un exemple etcomme a vous verrez un petit peu ce que a donne.Le texte sous fond de couleur Bienvidemment vous pouvez insrer un bloc de texte du contenu HTML dans vos blocs div avec unarrire-plan de couleur. Donc vous avez des botes avec un arrire-plan couleur qui contientvotre contenu HTML, du texte en gras, en italique, des images et vous pouvez bien videmmentdfinir des bordures fine, des coins arrondis dans votre bloc, suffit tout simplement d'utiliser unebalise div avec la classe CSS well. C'est aussi simple que a. Donc par dfaut well possde unpadding de 19 pixels, et il est possible d'utiliser des sous-classes well-lg large priphrique, well-sm small size pour modifier la taille de ce padding. En fait a va vous permettre classe welldonc div classe well, comme vous voyez l'exemple sur votre cran, de mettre du texte en avantdans une div de couleur avec des bordures des coins arrondis et vous dfinissez le paddingavec well-lg ou well-sm, c'est un exemple pour dfinir en fonction de la taille du priphriqued'affichage de votre bloc de texte mis en avant.Exemple d'application Je vous montre unexemple de code source tout de suite visuellement c'est toujours beaucoup plus parlant donc jepasse l'inclusion de la classe CSS et du fichier JavaScript, vous connaissez. L aussi je vous aiexpliqu dans les cours prcdents comment crer ces zones de couleur tout simplement. Jepasse directement au code source la classe row pour dfinir une grille et donc sur lespriphriques de bureau a va utiliser neuf colonnes. Le petit rsum, donc les titres, le rsumici, et en fait pour centrer du texte, donc texte center donc sur notre grille le texte est centrmme si on saute une ligne, juste en utilisant a. Le texte alina droite, juste en utilisant laclasse text-right, donc align droite, mais pas dans cette grille l, dans cette grille secondaire,puisque on a dfini une deuxime grille ici et ici. Par contre dans la grille principale le texte estcentr. Vous avez la puissance du framework BootStrap pour ce systme de grille et donc

2 / 4

aligner du texte et donc l vous avez un bloc de citation avec du texte et du texte crit en pluspetit, donc citation couple faiblement les objets qui interagissent donc ce que je vous conseillede faire avec l'auteur de la citation donc programmation-facile.com moi-mme. a vous fait descitations que vous pouvez utiliser pour mettre en valeur votre contenu avec diffrentespossibilits donc comme je vous l'ai dit blockquote, small pour afficher en plus petit et donc lesystme de grille qui est vraiment trs pratique donc si je diminue bien videment sur lesSmartphones a s'affiche un peu plus difficilement, sur les tablettes et donc vous avezgalement le texte avec well si je mets SM pour l'afficher en plus petit il sera affich beaucoupplus petit et peut-tre que a passe sur les priphriques a passe un peu mieux sur lespriphriques mobiles, il faudrait que j'agrandisse, j'ai dfini des zones, j'agrandisse la taille dela zone ou que je les mette en automatique tout simplement donc l je vais recharger la page etles tailles des zones vont tre agrandis. Voil la taille s'est agrandie. Donc l c'est du CSSvraiment basique aprs c'est bien videmment adapt en hauteur automatique, en fonction dupriphrique. Juste je voulais vous montrer la mise en avant du texte, je voulais ajouter uncommentaire, mise en avant d'un bloc de texte dans une div bordure fine et coin arrondi toutsimplement et donc l a permet de centrer enfin d'aligner le texte suivant vos prfrences voilun alignement gauche alignement du texte gauche par contre trs trs important c'est dansla grille ci-dessus, pas la grille principale, dans la grille imbrique on va dire, a vous parlemieux dans la grille imbrique, c'est--dire dans cette grille le texte est align gauche danscette grille le texte est align droite dans cette grille le texte est centr ici dans cettegrille.Votre plan d'actions ! Maintenant c'est vous de jouer, comme je vous le dis, vous aveztoutes les cartes en main pour crer des sites magnifiques qui s'adaptent automatiquement surles Smartphones, les tablettes et les ordinateurs de bureau donc de vos internautes si vousavez des questions posez-les sous cette vido galement sous cette vido vous retrouverez lecode source complet de l'exemple utilis. Et maintenant je vous invite regarder la deuximevido, la fin de cette vido un lien va apparatre dans cette vido, il suffira de cliquer sur celien ou il y a une image au-dessus de cette vido a va vous renvoyer vers la suite donc ladeuxime vido pour aller beaucoup plus loin avec HTML 5, CSS 3, le framework BootStrap 3.Donc je vous dis tout de suite dans la deuxime vido.

Tlcharger l'exemple de mise en forme du texteRetrouvez le code source comment pour revoir tout ce que vous avez appris dans ce cours.

Downloads

Exemple de mise en forme du texte avec BootStrap 3

3 / 4

Code source comment pour personnaliser votre texte avec le Framework BootStrap 3Ce fichier contient galement le Framework BootStrap version 3.2.0

Partagez vos sites Web raliss avec BootStrap 3Utilisez les commentaires pour partager vos ralisations avec BootStrap 3Comment effectuer lamise en forme du texte avec le Framework BootStrap 3

Tlcharger Gratuitement votre Formation Professionnelle Dveloppement Web : Cliquez icipour Recevoir les Vidos

Powered by TCPDF (www.tcpdf.org)

4 / 4