Mit den vorverarbeiteten Layout-Klassen von Bootstrap Front-End-Front-Framework müssen wir für jedes Layout-Tagelement nicht mehr viel CSS-Code schreiben. Wir können die Layoutfunktionen von Bootstrap verwenden. Sie können vordefinierte Stile für Titel, Absätze, Listen und andere Inline-Elemente erstellen und eine sehr Standard-Webseite eingeben.
Lass uns zusammen lernen. Welche Artensetklassen hat das Bootstrap Front-End-Framework für uns vordefiniert?
Erstens: Bootstrap verwendet Helvetica Neue, Helvetica, Arial und Sans-Serif als Standard-Schriftstapel, die derzeit die am häufigsten verwendeten Schriftarten auf allen Webseiten sind. Von da an müssen wir keine Schriftstile im globalen Stil für den Körper mehr definieren. Solange Sie die Schotten-Font-Familie von Bootstrap Front-End verwenden, wird die obige Schriftserie standardmäßig verwendet.
Das heißt: Schriftfamilie: ohne Serif;
Überprüfen wir es und öffnen Sie das Framework CSS -Datei -Bootstrap.css am vorderen Ende des Bootstraps
Liebe Freunde, können wir nur die Standardschriften des Bootstrap Front-End-Frontworks verwenden? Offensichtlich nicht. Später werde ich Ihnen beibringen, wie Sie das Bootstrap -Framework anpassen und ein Bootstrap -Framework erstellen, das wir mögen und die wir bewirken möchten.
Zweitens: Das Front-End-Framework von Bootstrap hat den CSS-Stil von H1-H6 vordefiniert. Ich habe einen Teil des definierten Stils aus dem Framework CSS-Datei bootstrap.css des Bootstrap Front-End-Frameworks extrahiert. Sie können sehen, dass die Attributwerte von Schriftgröße für HN definiert sind.
H1 {Schriftgröße: 36px;}
H2 {Schriftgröße: 30px;}
H3 {Schriftgröße: 24px;}
H4 {Schriftgröße: 18px;}
H5 {Schriftgröße: 14px;}
H6 {Schriftgröße: 12px;}
Der tatsächliche Effekt ist wie folgt:
Webseitencode:
Webseiteneffekt:
Drittens: Inline -Untertitel. Wenn Sie jedem Titel einen Inline -Untertitel hinzufügen müssen, fügen Sie einfach <klein> auf beiden Seiten des Elements hinzu oder fügen Sie eine .Small -Klasse hinzu, sodass Sie einen leichteren Text mit einer kleineren Schriftgröße erhalten können, wie im folgenden Beispiel gezeigt:
Webseitencode:
Webseiteneffekt:
Viertens: Leiten Sie die Hauptkopie. Um dem Absatz Betontextexte hinzuzufügen, können Sie Class = "Lead" hinzufügen, was zu einem größeren, dickeren Text mit höherem Line führt, wie im folgenden Beispiel gezeigt:
Webseitencode:
Webseiteneffekt:
Die folgende Kursliste für Bootstrap Front-End gibt keine Beispiele mehr. Ich werde den Zweck nur aufschreiben, da Sie kleine Effekte wie das obige Beispiel ausprobieren können.
Fünftens: Betonen Sie, dass die Standard -Betonung von HTML <klein> (STEX> auf 85% der übergeordneten Textgröße festlegen), <strong> (Text auf dickerer Text festlegen), <em> (Text auf kursiv stellen).
Sechstens: Abkürzung, HTML -Elemente bieten Tags für die Abkürzung wie www oder http. Bootstrap definiert den Stil des <ABBR> -Elements als ein gepunkteter Rand, der am Ende des Textes angezeigt wird, und der vollständige Text wird angezeigt, wenn die Maus darüber schwebt (solange Sie dem Titelsattribut <abbr> Title Text hinzugefügt haben). Um einen kleineren Schriftstext zu erhalten, fügen Sie .Initialismus zu <abbr> hinzu.
Siebte: Adresse. Mit dem Tag <adresse> können Sie Kontaktinformationen auf der Webseite anzeigen. Da <adresse> standardmäßig angezeigt wird: Block; Sie müssen dem beigefügten Adresstext einen Zeilenumbruch hinzufügen.
Achtung: Blockquote, Sie können den Standard -<blockquote> neben jedem HTML -Text verwenden. Weitere Optionen sind das Hinzufügen eines <emmall> -Tags, um die Quelle der Referenz zu identifizieren, und die Verwendung von Class.Pull-Right, um die Referenz nach rechts auszurichten. Das folgende Beispiel zeigt diese Funktionen:
Neunte: Liste
Bootstrap unterstützt bestellte Listen, ungeordnete Listen und definierte Listen.
Bestellte Liste: Bestellte Liste bezieht sich auf eine Liste, die mit Zahlen oder anderen bestellten Zeichen beginnt.
Nicht ordnungsgemäße Liste: Unordentliche Liste bezieht sich auf eine Liste ohne eine bestimmte Reihenfolge und ist eine Liste, die mit einem traditionellen Schwerpunktstil beginnt. Wenn Sie diese Schwerpunkte nicht anzeigen möchten, können Sie die klasse.List-tefyled verwenden, um den Stil zu entfernen. Sie können auch alle Listenelemente in derselben Zeile mithilfe von Class.list-Inline einfügen.
Definitionsliste: In dieser Art der Liste kann jedes Listenelement <Dt> und <dd> Elemente enthalten. <dt> steht für den Definitionsterm wie ein Wörterbuch, das als Zugehörigkeit (oder Phrase) definiert ist. Als nächstes ist <dd> die Beschreibung von <dt>. Sie können ClassDL-Horizontal verwenden, um die Habseligkeiten in der Zeile <dl> Zeilen neben der Beschreibung anzuzeigen.
Die anderen Bootstrap-Front-End-Framework-Klassen müssen wie folgt sehr kompetent sein, und jeder muss sie auswendig lernen und nutzen.
.Lead hebt Absätze hervor
.Small Set Small Text (auf 85% der Größe des übergeordneten Textes festgelegt)
.Text-links-Set Text Linksausrichtung
.Text-zentrale Set Textcenter-Ausrichtung
.Text-Rechts legen die richtige Ausrichtung des Textes fest
.Text- Rechtifizierung legt die Textausrichtung fest und der Text außerhalb des Bildschirms im Absatz wird automatisch verpackt
.Text-nowrap-Absätze wickeln keine Zeilen über den Bildschirm hinaus ein
.Text-Lowercase-Set Text-Kleinbuchstaben
.Text-Oppercase-Set-Textkapitalisierung
.Textkapitalisiert legt die Kapitalisierung des ersten Buchstabens des Wortes fest
.Initialismus Der im <abbr> Element angezeigte Text wird in kleiner Schrift angezeigt
.Blockquote-Reverse-Sets Referenzausrichtung der richtigen Ausrichtung
.List-begeisterte Entfernung entzieht den Standardlistenstil und richtet sich in den Listenelementen (in <ul> und <ol>) aus. Diese Klasse eignet sich nur für Direktlistenelemente (wenn Sie verschachtelte Listenelemente entfernen müssen, müssen Sie diesen Stil in der verschachtelten Liste verwenden).
List-Inline platziert alle Listenelemente in derselben Zeile
.dl-horizontal Diese Klasse setzt float und offset und wird auf <dl> Elemente und <dt> Elemente angewendet. Für bestimmte Implementierungen können Sie die Instanz anzeigen.
.
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.