Bootstrap von Twitter ist derzeit das beliebteste Front-End-Frontwork. Bootstrap basiert auf HTML, CSS und JavaScript. Es ist einfach und flexibel und macht die Webentwicklung schneller.
Schlüsselpunkte für das Lernen:
1. Seitenlayout
In dieser Lektion lernen wir hauptsächlich den Layoutstil im Bootstrap Global CSS -Stil, einschließlich Titel, Seitenkörper, Ausrichtung, Liste und anderen allgemeinen Inhalten.
eins. Seitenlayout
Bootstrap bietet einige Stile des regulären Designseitenlayouts für Entwickler.
1. Seitenkörper
Bootstrap legt die globale Schriftgröße auf 14px fest, die Leitungshöhe leitete auf 1,428 (d. H. 20px); Das Absatzelement ist auf die Höhe von 1/2 Linien (d. H. 10px) eingestellt; Die Farbe ist auf #333 eingestellt.
// Erstellen Sie einen Text mit Absätzen mit dem Start der Bootstrap -Framework </p> <p> Bootstrap -Framework </p> <p> Bootstrap -Framework </p> <p> Bootstrap -Framework </p> <p> Bootstrap Framework </p> bootstrap Framework </p> <p> bootstrap -Framework </p>.
2. Titel
//From h1 to h6<h1>Bootstrap framework</h1>//36px<h2>Bootstrap framework</h2>//30px<h3>Bootstrap framework</h3>//24px<h4>Bootstrap framework</h4>//18px<h5>Bootstrap framework</h5>//14px<h6>Bootstrap Framework </h6> // 12px
Wir haben aus Firebug gelernt, dass Bootstrap H1 ~ H6 neu gestaltete und auch die Definition von Class = (. H1 ~ H6) für gewöhnliche Inline -Elemente unterstützt, um dieselbe Funktion zu erreichen.
// Inline -Elemente verwenden Title Font <Pan> Bootstrap </span>
Hinweis: Wenn Sie Elemente über Firebug betrachten, können Sie auch sehen, dass die Schriftfarbe, die Schriftstil und die Linienhöhe fest sind, wodurch ein Gleichmäßigkeit gewährleistet ist. Der Native wird basierend auf der bevorzugten Schriftart, die im System eingebaut ist, bestimmt, und die Farbe ist die schwärzendste.
Zwischen H1 ~ H6 -Elementen kann auch ein kleines Element als Untertitel eingebettet werden.
//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 Untertitel </small> </h4> <h5> Bootstrap -Framework <klein> Bootstrap -Untertitel </small> </h5> <h6> Bootstrap -Framework <klein> Bootstrap -Untertitel </small> </h6>
Durch die Beobachtung von Firebug stellten wir fest, dass die Größe des kleinen Elements unter H1 ~ H3 nur 65% des übergeordneten Elements ausmacht. Dann beträgt das kleine Element unter H1 ~ H3 23,4px, 19,5px und 15,6px; Die Größe des kleinen Elements unter H4 ~ H6 macht nur 75% des übergeordneten Elements aus, nämlich: 13,5px, 10,5px und 9px. Der kleine Stil unter H1 ~ H6 wurde ebenfalls verändert, die Farbe ist hellgrau geworden: #777, die Reihenhöhe 1 und die Dicke 400.
3.. Inline -Textelemente
// Markierungen, <mark> Elemente oder .mark -Klasse <P> Bootstrap <mark> Frame </mark> </p> // eine Vielzahl von Text mit Zeilen <Del> Bootstrap </del> // Löschter Text <S> Bootstrap -Framework </s>/nutzlosem Text <Ins> Bootstrap -Framework </// // // INSEPTORE text text text. unterstrichener Text // eine Vielzahl von Text mit Betonung <klein> Bootstrap -Framework </small> // 85% der Standard -Schriftgröße <strong> Bootstrap -Framework </strong> // BOLD 700 <em> Bootstrap Framework </em> // Tilt
4. Ausrichtung
// Text Alignment <P> Bootstrap -Framework </p> // links <P> Bootstrap -Framework </p> // CENTER <P> Bootstrap -Framework </p> // auf dem rechten <P> Bootstrap -Framework </p> // An beiden Enden, schlechte Support <P> bootstrap Framework </p> // No Line -Wrack -Wrack -Wracking
5. Gehäuse
// Englische Texthülle <P> Bootstrap -Framework </p> // Kleinbuchstaben <P> Bootstrap -Framework </p> // Großbuchstaben <P> Bootstrap Framework </p> // Großbuchstaben <P> Bootstrap Framework </p> // Originalbuchstabenkapitalisierung
6. Abkürzung
// Abkürzung Bootstrap <ABBR> Frame </abbr>
7. Adresstext
// Setzen Sie die Adresse, entfernen Sie die Neigung, setzen Sie die Zeilenhöhe, unten 20px <adresse> <strong> Twitter, Inc. </strong> <br> 795 Folsom Ave, Suite 600 <br> San Francisco, CA 94107 <br> <ABBR> P: </abbr> (123) 456-7890 </address>
8. Text zitieren
// Standardstilreferenz, Kantenzeilen hinzufügen, Schriftgröße und innere und äußere Margen <Blockquote> Bootstrap -Framework </blockquote> // Reverse <blockquote> Bootstrap -Framework </blockquote> setzen </blockquote>
9. Listenlayout
//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>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li> <li>Bootstrap framework </li></ul> //List the description list horizontally <dl> <dt> Bootstrap </dt> <dd> Bootstrap bietet Entwicklern einige Stile. </dd> </dl>
10. Code
// Inline -Code <Code> <abschnitt> </code> // Benutzereingabe drücken <kbd> Strg +, </kbd> // Code Block <Pre> <p> Bitte geben Sie ... </p> </pre> ein
Bootstrap listet auch <var> für Markup-Variablen und <Samp> für die Programmausgabe auf, CSS wird jedoch nicht wieder aufgerichtet.
Das obige ist das relevante Wissen über Bootstrap -Seiten -Layoutstil, das Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird für Sie hilfreich sein!