Heim  >  Artikel  >  Web-Frontend  >  Umfassende Analyse der Verwendung von Bootstrap-Layout (Textstil)_Javascript-Fähigkeiten

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

WBOY
WBOYOriginal
2016-05-16 15:28:461268Durchsuche

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 a4b561c25d9afb9ac8dc4d70affff419 verwenden, um Text direkt fett darzustellen.

2. Kursivschrift: In Bootstrap können Sie 907fae80ddef53131f3292ee4f81644b 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>

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.

Stellungnahme:
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