Bootstrap, de Twitter, est actuellement le cadre frontal le plus populaire. Bootstrap est basé sur HTML, CSS et JavaScript. Il est simple et flexible, ce qui rend le développement Web plus rapide.
Points clés pour l'apprentissage:
1. Disposition de la page
Dans cette leçon, nous apprendrons principalement le style de mise en page dans le style CSS global de bootstrap, y compris le titre, le corps de la page, l'alignement, la liste et d'autres contenus généraux.
un. Mise en page
Bootstrap fournit quelques styles de mise en page régulière des pages de conception que les développeurs peuvent utiliser.
1. corps de la page
Bootstrap définit la taille globale de la police à 14px, la hauteur de ligne de hauteur de ligne est définie à 1,428 (c'est-à-dire 20px); L'élément de paragraphe est défini sur une hauteur de ligne 1/2 (c'est-à-dire 10px); La couleur est définie sur # 333.
// Créer un texte avec paragraphe mis en surbrillance <p> framework bootstrap </p> <p> Bootstrap framework </p> <p> framework Bootstrap </p> <p> Bootstrap Framework </p> <p> framework </p> <p> framework </p> </p>
2. Titre
// De H1 à H6 <H1> Bootstrap Framework </ H1> // 36PX <H2> Framework Bootstrap </H2> // 30PX <H3> Framework Bootstrap </H3> // 24px <H4> Bootstrap Framework </H4> // 18px <h5> framework Bootstrap </H5> //14px <h6> Bootstrapstrapwor </h5> //14px <h6> Bootstrapstraw framework </h6> // 12px
Nous avons appris de Firebug que Bootstrap a refactorisé H1 ~ H6 respectivement, et prend également en charge la définition de la classe = (. H1 ~ H6) pour les éléments en ligne ordinaires pour atteindre la même fonction.
// Les éléments en ligne utilisent la police de titre <span> bootstrap </span>
Remarque: Lors de la visualisation des éléments via Firebug, vous pouvez également voir que la couleur de la police, le style de police et la hauteur de ligne sont tous fixes, assurant ainsi l'uniformité. Le natif sera déterminé sur la base de la police préférée construite dans le système, et la couleur est la plus noire.
Entre les éléments H1 ~ H6, un petit élément peut également être intégré comme sous-titre.
//Insert small element in the title element <h1>Bootstrap framework <small>Bootstrap subtitle</small></h1><h2>Bootstrap framework <small>Bootstrap subtitle</small></h2><h3>Bootstrap framework <small>Bootstrap subtitle</small></h3><h4>Bootstrap framework <small>Bootstrap sous-titre </small> </h4> <h5> framework bootstrap <small> sous-titre bootstrap </small> </h5> <h6> framework bootstrap <mall> sous-titre bootstrap </small> </h6>
Grâce à la visualisation de Firebug, nous avons constaté que la taille du petit élément sous H1 ~ H3 ne représente que 65% de l'élément parent. Ensuite, par calcul (voir le style calculé par Firebug), le petit élément sous H1 ~ H3 est de 23,4px, 19,5px et 15,6px; La taille du petit élément sous H4 ~ H6 ne représente que 75% de l'élément parent, à savoir: 13,5px, 10,5px et 9px. Le petit style sous H1 ~ H6 a également été modifié, la couleur est devenue gris clair: # 777, la hauteur de la rangée est de 1 et l'épaisseur est de 400.
3. Éléments de texte en ligne
//Add marks, <mark>elements or .mark class <p>Bootstrap<mark>frame</mark></p> //A variety of text with lines <del>Bootstrap</del>//Deleted text <s>Bootstrap framework</s>//Useless text <ins>Bootstrap framework</ins>//Insert text <u>Bootstrap framework</u>//The effect is the same as above, Texte souligné // une variété de texte avec une importance <small> framework bootstrap </small> // 85% de la taille de la police standard <strong> framework bootstrap </strong> // bold 700 <em> framework bootstrap </em> // inclinaison
4. Aligner
// Définir l'alignement du texte <p> Bootstrap Framework </p> // sur le framework Bootstrap de gauche <p> </p> // Centre <p> Bootstrap Framework </p> // Sur le cadre de la droite <p> Bootstrap Framework </p> // AUCUNE LIGNE AUX EST, Mauvais support <p> Bootstrap Framework </p> //
5.
// Définir le boîtier de texte en anglais <p> Bootstrap Framework </p> // minuscules <p> Bootstrap Framework </p> // uppercase <p> bootstrap framework </p> // uppercase <p> framework Bootstrap </p> // lettre d'origine lettre de lettre
6. Abréviation
// abréviation bootstrap <bbr> cadre </bbr>
7. Texte de l'adresse
// Définissez l'adresse, supprimez l'inclinaison, définissez la hauteur de la ligne, 20px inférieur <adress> <strong> Twitter, inc. </strong> <br> 795 Folsom Ave, Suite 600 <br> San Francisco, CA 94107 <br> </ ABBR> P: </BBR> (123) 456-7890 </ Address>
8. Citation du texte
// Référence de style par défaut, ajouter des lignes de bord, régler la taille de la police et les marges intérieures et extérieures <lockquote> framework bootstrap </lockquote> // revers <blockquote> framework bootstrap </lockquote>
9. Disposition de la liste
//Move out the default style <ul> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li></ul> //Set inline <ul> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li> Framework Bootstrap </li> <li> Framework Bootstrap </li> <li> Framework Bootstrap </li> <li> Framework Bootstrap </li> <li> Framestrap Bootstrap </li> <li> Bootstrap Framework </li> <li> Bootstrap Framework </li> </ul> // Répertoriez la description Liste Horrizally <DL> <dt> bootstrap </dt> <dd> bootstrap fournit des styles à utiliser les développeurs. </dd> </dl>
10. Code
// Code en ligne <code> <section> </code> // Entrée utilisateur Appuyez sur <KBD> CTRL +, </KBD> // Block de code <pre> <p> Veuillez saisir ... </p> </pre>
Bootstrap répertorie également <var> pour les variables de balisage et <samp> pour la sortie du programme, mais CSS n'est pas réécoutté.
Ce qui précède est les connaissances pertinentes sur le style de mise en page de la page bootstrap qui vous est présenté par l'éditeur. J'espère que cela vous sera utile!