Heim > Web-Frontend > js-Tutorial > Hauptteil

Umfassende Analyse der Verwendung von Bootstrap-Layout (Textstil)_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 15:28:46
Original
1267 Leute haben es durchsucht

1. Absatz

Absätze sind ein weiteres wichtiges Element in der Typografie. Legen Sie einen globalen Textstil für Text in Bootstrap fest (der Text bezieht sich hier auf den Haupttext):

1. Die globale Textschriftgröße beträgt 14 Pixel (Schriftgröße).

2. Die Zeilenhöhe beträgt 1,42857143 (Zeilenhöhe), was etwa 20 Pixel entspricht (Sie können verwirrt sein, wenn Sie eine Reihe von Dezimalzahlen sehen. Tatsächlich wird sie über den LESS-Compiler berechnet. Natürlich hat auch Sass dies eine solche Funktion).

3. Die Farbe ist dunkelgrau (#333);

2. Textstil

In tatsächlichen Projekten werden bei einigen wichtigen Texten die Teile, die Sie hervorheben möchten, in unterschiedlichen Stilen verarbeitet. Bootstrap führt auch eine leichte Verarbeitung dieses Teils durch.

Wenn Sie möchten, dass ein Absatz p hervorgehoben wird, können Sie dies tun, indem Sie den Klassennamen „.lead“ hinzufügen. Seine Funktion besteht darin, die Textschriftgröße zu erhöhen, den Text fett darzustellen und auch die Zeilenhöhe und den Rand entsprechend zu bearbeiten .

1. Fett: In Bootstrap können Sie die Tags verwenden, um Text direkt fett darzustellen.

2. Kursivschrift: In Bootstrap können Sie verwenden, um Text kursiv zu gestalten.

3. Schwerpunktkategorie

.text-muted: Hinweis: Verwenden Sie Hellgrau (#999)
.text-primary: Primär, verwenden Sie Blau (#428bca)
.text-success: Erfolgreich, verwenden Sie hellgrün (#3c763d)
.text-info: Benachrichtigungsinformationen, verwenden Sie Hellblau (#31708f)
.text-warning: Achtung, verwenden Sie Gelb (#8a6d3b)
.text-danger: Achtung, braun verwenden (#a94442)

<div class="text-muted">.text-muted 效果</div>
<div class="text-primary">.text-primary效果</div>
<div class="text-success">.text-success效果</div>
<div class="text-info">.text-info效果</div>
<div class="text-warning">.text-warning效果</div>
<div class="text-danger">.text-danger效果</div>

Nach dem Login kopieren

Der Effekt ist wie folgt:

4. Textausrichtung

Die Textausrichtung ist beim Schriftsatz unverzichtbar. Text-align wird in CSS häufig verwendet, um den Ausrichtungsstil von Text festzulegen. Es gibt vier Hauptstile:

☑ Linksbündig, übernimmt den Wert links

☑ In der Mitte ausrichten, nimmt den Wertemittelpunkt ein

☑ Rechts ausrichten, nimmt den Wert rechts an

☑ Richten Sie beide Enden aus, nimmt den Wert justify an

Um die Bedienung zu vereinfachen und die Verwendung zu erleichtern, definiert Bootstrap vier Klassennamen bis , um den Ausrichtungsstil des Textes zu steuern:

☑ .text-left:Linksbündig

☑ .text-center:zentriert

☑ .text-right: rechtsbündig

☑ .text-justify:Beide Enden ausrichten

Mit Textstilen ist der Layouteffekt klarer und prägnanter. Ich hoffe, dass Sie in Ihren Werken einfachere und großzügigere Textstile verwenden können, um Ihre Werke hervorzuheben und attraktiver zu machen.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!