Seitenlayout für Bootstrap 3.0-Lernnotizen

Seitenlayout für Bootstrap 3.0-Lernnotizen

Dieses Mal werden wir hauptsächlich etwas über das Layout lernen, das auch in den meisten grundlegenden HTML-Tags vorhanden ist, sodass es relativ einfach ist. Um die Vollständigkeit der Serie sicherzustellen, werden wir es auch überprüfen und aufzeichnen. Die wesentlichen Inhalte sind wie folgt:

1. Titel

2. Seitentext

3. Betonung

4. Abkürzungen

5. Adresse

6. Referenzen

7. Listen

8. Zusammenfassung

Titel

Alle Überschriften-Tags in HTML, von <h1> bis <h6>, können verwendet werden. Darüber hinaus werden Klassen von .h1 bis .h6 bereitgestellt, um dem Inline-Text einen Titelstil zu geben.


Code kopieren
Der Code lautet wie folgt:

<div Klasse="Container">
<h1 class="page-header">Titel</h1>
<h1>h1. Bootstrap-Überschrift</h1>
<h2>h2. Bootstrap-Überschrift</h2>
<h3>h3. Bootstrap-Überschrift</h3>
<h4>h4. Bootstrap-Überschrift</h4>
<h5>h5. Bootstrap-Überschrift</h5>
<h6>h6. Bootstrap-Überschrift</h6>
</div>

Schauen Sie sich nur die Wirkung an

Sie können auch ein <small> -Tag oder ein .small Element in eine Überschrift einfügen, um eine Unterüberschrift zu markieren.


Code kopieren
Der Code lautet wie folgt:

<div Klasse="Container">
<h1 class="page-header">Titel</h1>
<h1>h1. Bootstrap-Überschrift</h1><small>Sekundärtext</small>
<h2>h2. Bootstrap-Überschrift</h2><small>Sekundärtext</small>
<h3>h3. Bootstrap-Überschrift</h3><small>Sekundärtext</small>
<h4>h4. Bootstrap-Überschrift</h4><small>Sekundärtext</small>
<h5>h5. Bootstrap-Überschrift</h5><small>Sekundärtext</small>
<h6>h6. Bootstrap-Überschrift</h6><small>Sekundärtext</small>
</div>

Seitentext

Bootstrap setzt die globale font-size auf 14px und line-height auf 1,428. Diese Eigenschaften werden direkt <body> und allen Absatzelementen zugewiesen. Darüber hinaus wird <p> (Absatz) ein unterer Rand zugewiesen, der der halben Zeilenhöhe entspricht (also 10px).


Code kopieren
Der Code lautet wie folgt:

<h1 class="page-header">Seitentext</h1>
<div Stil="border:1px durchgezogen">
<p style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Das kugelförmige Penicillin und Magnis Parturient Montes, Nascetur Ridiculus Mus. Der Ullamcorper Nulla wird nicht mit Auctor Fringilla gemessen. Bei Mollis ist es nicht üblich, luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Der Ullamcorper Nulla wird nicht mit Auctor Fringilla gemessen.

Das Sedum war sehr klein und hatte eine sehr geringe Größe. Es war überhaupt nicht sehr groß. Da es nicht sehr groß war, war es sehr schwierig, ein Band zu bekommen, und ich musste eine Beruhigungsmaßnahme ergreifen.</p>
</div>

Dies ist durch die Effektanzeige sehr deutlich zu erkennen.

Haupttext der Einleitung

Durch das Hinzufügen von .lead können Sie einen Absatz hervorheben.


Code kopieren
Der Code lautet wie folgt:

<h1 class="page-header">Text der Einleitung</h1>
<div Stil="border:1px durchgezogen">
<p class="lead" style="border:1px solid ">Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Das kugelförmige Penicillin und Magnis Parturient Montes, Nascetur Ridiculus Mus. Der Ullamcorper Nulla wird nicht mit Auctor Fringilla gemessen. Bei Mollis ist es nicht üblich, luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Der Ullamcorper Nulla wird nicht mit Auctor Fringilla gemessen.

Das Sedum war sehr klein und hatte eine sehr geringe Größe. Es war überhaupt nicht sehr groß. Da es nicht sehr groß war, war es sehr schwierig, ein Band zu bekommen, und ich musste eine Beruhigungsmaßnahme ergreifen.</p>
</div>
<h1></h1>

Im Vergleich mit dem Hauptteil der Seite oben ist der offensichtliche Effekt erkennbar.

betonen

Nutzen Sie die HTML-Tags einfach zur Hervorhebung und geben Sie ihnen ein wenig Style.

1. Kleiner Text

Umschließen Sie Inline- oder Blocktext, der nicht hervorgehoben werden muss, mit einem <small> -Tag. Der darin enthaltene Text wird auf 85 % der Schriftgröße des übergeordneten Containers eingestellt. Den im Überschriftenelement verschachtelten <small> -Elementen wird eine andere font-size zugewiesen.

Sie können Inline-Elementen auch .small anstelle eines <small> -Tags zuweisen.


Code kopieren
Der Code lautet wie folgt:
<small>Diese Textzeile ist als Kleingedrucktes zu betrachten.</small>


2. Fokus

Heben Sie einen Textabschnitt hervor, indem Sie seine Schriftstärke erhöhen.


Code kopieren
Der Code lautet wie folgt:
als fetter Text dargestellt


3. Kursivschrift

Heben Sie einen Textabschnitt durch Kursivschrift hervor.


Code kopieren
Der Code lautet wie folgt:
als kursiver Text dargestellt

4. Klassen ausrichten

Textausrichtungsklassen erleichtern die Neuausrichtung von Text.


Code kopieren
Der Code lautet wie folgt:

<p class="text-left">Linksbündiger Text.</p>
Zentrierter Text.
<p class="text-right">Rechtsbündiger Text.</p>

Offensichtlich ist die erste Zeile linksbündig, die zweite Zeile zentriert und die dritte Zeile rechtsbündig.

5. Betonen Sie die Klasse

Diese Klassen werden farblich hervorgehoben. Kann auch auf Links angewendet werden, die dunkler werden, wenn die Maus über den Link bewegt wird, genau wie der Standard-Linkstil.


Code kopieren
Der Code lautet wie folgt:

<h1>Schwerpunkt auf Klasse</h1>
<p class="text-muted">Mäzene, die sich nicht groß nennen, sind nicht groß.</p>
<p class="text-primary">Mäzene, die sich nicht groß nennen, sind nicht groß.</p>
<p class="text-success">.Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-info">Mäzene, die sich nicht groß nennen, sind nicht groß.</p>
<p class="text-warning">Mäzene, die sich nicht groß nennen, sind nicht groß.</p>
<p class="text-danger">.Mäzene haben sich geschlagen und sind nicht groß geworden.</p>
<h1></h1>

Miniaturansicht

Wenn Sie mit der Maus über Abkürzungen und Akronyme fahren, wird der vollständige Inhalt angezeigt. Bootstrap implementiert erweiterte Stile für das HTML-Element <abbr> . Das Abkürzungselement besitzt ein title und erscheint als hell gepunktetes Kästchen. Wenn die Maus darüberfährt, verwandelt es sich in einen Zeiger mit einem Fragezeichen. Wenn Sie den vollständigen Inhalt sehen möchten, bewegen Sie die Maus über die Abkürzung. Das Titelattribut muss dabei jedoch enthalten sein.

Grundlegende Abkürzungen

Wenn Sie den vollständigen Inhalt sehen möchten, bewegen Sie die Maus über die Abkürzung. title muss dabei jedoch enthalten sein.


Code kopieren
Der Code lautet wie folgt:
<abbr title="Attribut">Attribut</abbr>

Ich habe den Effekt gesehen, konnte aber keinen Screenshot machen.

Initialismus

Durch Hinzufügen von .initialism zur Abkürzung kann die Schriftgröße verkleinert werden.


Code kopieren
Der Code lautet wie folgt:

<abbr Titel="HyperText Markup Language" Klasse="Initialismus">HTML</abbr>

Oder posten Sie einfach den Code und sehen Sie sich die Wirkung selbst an.

Adresse

Präsentieren Sie Kontaktinformationen in einem Format, das dem alltäglichen Gebrauch am nächsten kommt. Durch Hinzufügen von <br> am Ende jeder Zeile wird die gewünschte Formatierung beibehalten.


Code kopieren
Der Code lautet wie folgt:

<Adresse>
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
<abbr title="Telefon">P:</abbr> (123) 456-7890
</Adresse></p> <p><Adresse>
Vollständiger Name
<a href="<a href="mailto:#">[email protected]</a">mailto:#">[email protected]</a</a>>
</Adresse>

Verweise

Zitieren Sie in Ihrem Dokument andere Quellen.

Standardstilreferenz

Wickeln Sie alles darin ein, um es als Referenz darzustellen. Für direkte Zitate empfehlen wir die Verwendung von Tags. Wickeln Sie es darin ein und es wird als Referenz angezeigt. Für direkte Zitate empfehlen wir die Verwendung von Tags.


Code kopieren
Der Code lautet wie folgt:

<blockquote>
<p>Ich saß einfach nur da und habe versucht, Elit zu errichten. Integer posuere erat a ante.</p>
</blockquote>

Zitieroptionen

Für das Standard- <blockquote> gibt es einige einfache Variationen, mit denen Stil und Inhalt geändert werden können.

Benennen Sie die Quelle: Fügen Sie ein <small> -Tag hinzu, um die Quelle des Zitats anzugeben. Der Quellenname kann innerhalb des <cite> -Tags platziert werden.


Code kopieren
Der Code lautet wie folgt:

<blockquote>
<p>Ich saß einfach nur da und habe versucht, Elit zu errichten. Integer posuere erat a ante.</p>
Jemand Berühmtes im Quellentitel
</blockquote>

Es wird einen weiteren Quelltitel geben

Ein anderer Anzeigestil

Verwenden Sie .pull-right , um den Eindruck zu erwecken, dass die Referenz nach rechts verschoben und ausgerichtet ist.


Code kopieren
Der Code lautet wie folgt:

<blockquote Klasse="nach rechts ziehen">
<p>Ich saß einfach nur da und habe versucht, Elit zu errichten. Integer posuere erat a ante.</p>
</blockquote>

Eine Ausrichtung nach rechts verschiebt den Betrag und natürlich erfolgt ein entsprechendes Ziehen nach links.

Liste

Ungeordnete Liste

Eine Liste von Elementen, deren Reihenfolge keine Rolle spielt.


Code kopieren
Der Code lautet wie folgt:

<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>

Dies ist offensichtlich dasselbe wie HTML.

Sortierte Liste

Eine Reihe von Elementen, bei denen die Reihenfolge entscheidend ist.


Code kopieren
Der Code lautet wie folgt:

<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ol>

Gleiches gilt für geordnete Listen.

Unformatierte Liste

Eine Reihe von Elementen mit dem list-style und entferntem linken Rand (nur für direkte untergeordnete Elemente). Dies gilt für direkte untergeordnete Elemente, d. h. Sie müssen diese Klasse zu allen verschachtelten Listen hinzufügen, um den gleichen Stil zu erhalten.


Code kopieren
Der Code lautet wie folgt:

<ul Klasse="Liste ohne Stil">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>

Inline-Liste

Durch Festlegen display: inline-block; und Hinzufügen einer kleinen Menge an Polsterung werden alle Elemente in derselben Spalte platziert.


Code kopieren
Der Code lautet wie folgt:

<ul Klasse="Liste-inline">
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
<li>Lorem ipsum dolor sit amet</li>
</ul>

Die Wirkung ist natürlich einzeilig.

beschreiben

Liste von Phrasen mit Beschreibungen.


Code kopieren
Der Code lautet wie folgt:

<dl>
<dt>.Lorem ipsum dolor sit amet</dt>
<dd>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</dd>
</dl>

Denken Sie daran, dass dieses Tag auch in HTML vorhanden ist.

Horizontale Beschreibung

.dl-horizontal können die Phrase und ihre Beschreibung in <dl> in einer Zeile ausgerichtet werden. Es beginnt wie der standardmäßige <dl> -Stil und wird gestapelt und dann auf die gleiche Weise angeordnet, wie sich die Navigationsleiste allmählich erweitert.


Code kopieren
Der Code lautet wie folgt:

<dl Klasse="dl-horizontal">
<dt>.Lorem ipsum dolor sit amet</dt>
<dd>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet</dd>
</dl>

Zusammenfassen

Die Hauptsache ist, dass Sie es einfach überprüfen und sich bei der Verwendung damit vertraut machen, dann sollte es kein Problem sein.

Zum Schluss möchte ich noch eine Erkenntnis anfügen, die in manchen Situationen hilfreich sein kann.

Inline-Code: Fügen Sie den Codeausschnitt im Inline-Stil mit dem Tag <code> in den Textkörper ein.


Code kopieren
Der Code lautet wie folgt:
Beispielsweise sollte <code>&lt;section&gt;</code> als Inline umschlossen werden.

Einfache Effekte

Schneller Basiscode: Mehrere Codezeilen können das Tag <pre> verwenden. Um den Code richtig anzuzeigen, achten Sie darauf, die spitzen Klammern zu escapen.


Code kopieren
Der Code lautet wie folgt:
<pre>&lt;p&gt;Beispieltext hier...&lt;/p&gt;</pre>

Einfache Wirkung

Sie können auch .pre-scrollable verwenden, die die maximale Höhe auf 350 Pixel festlegt und eine vertikale Bildlaufleiste anzeigt.

Das Obige ist der vollständige Inhalt dieses Artikels. Haben Sie ein neues Verständnis dieser gängigen HTML-Tags? Wie das Sprichwort sagt, hilft es Ihnen, etwas Neues zu lernen, wenn Sie die Vergangenheit Revue passieren lassen. Ich hoffe, es kann für alle hilfreich sein.

<<:  Zusammenfassung der Standardverwendung von HTML-, CSS- und JS-Kommentaren

>>:  Concat() von kombinierten Feldern in MySQL

Artikel empfehlen

Warum ist es langsam, wenn Limit- und Offset-Paging-Szenarien verwendet werden?

Beginnen wir mit einer Frage Als ich vor fünf Jah...

So implementieren Sie mit MyCat die Lese-/Schreibtrennung von MySQL-Master und -Slave unter Linux

Inhaltsverzeichnis Linux - Verwenden Sie MyCat, u...

So verwenden Sie Xtrabackup zum Sichern und Wiederherstellen von MySQL

Inhaltsverzeichnis 1. Sicherung 1.1 Vollständig v...

Vue.js implementiert den Code zum Klicken auf das Symbol zum Vergrößern und Verlassen

Im vorherigen Artikel wurde vorgestellt, wie Vue ...

Mysql praktische Übungen einfaches Bibliotheksverwaltungssystem

Inhaltsverzeichnis 1. Sortierfunktion 2. Vorberei...

Lösung für den Fehler „MySQL-Server ist verschwunden“

MySQL-Server hat Problem in PHP behoben 1. Hinter...

Kann Asynchronität in JavaScript „Await“ speichern?

Ich wusste vorher, dass man await verwenden muss,...

JavaScript-Canvas zum Erzielen von Meteoreffekten

In diesem Artikel wird der spezifische Code für J...

Persönliche Meinung: Sprechen Sie über Design

<br />Wählen Sie das praktischste Thema aus....

So verwenden Sie einen Gamecontroller in CocosCreator

Inhaltsverzeichnis 1. Szenenlayout 2. Fügen Sie e...

Lösung für den Initialisierungsfehler bei der Installation von mysql5.7 aus einem RPM-Paket in centos6.5

1. Rz auf den Server hochladen und entpacken rz [...

Welche Regeln gelten für den Kontext in JavaScript-Funktionen?

Inhaltsverzeichnis 1. Regel 1: Objekt.Methode() 1...

Schritte und Methoden zur Bindung von Domänennamen und IPs in der Alibaba Cloud

1 Rufen Sie die Alibaba Cloud-Konsole auf, suchen...

So implementieren Sie Polygonbrechung in Echtzeit mit Threejs

Inhaltsverzeichnis Vorwort Schritt 1: Aufbau und ...

JavaScript implementiert eine verschiebbare Modalbox

In diesem Artikel wird der spezifische JavaScript...