Heim >Web-Frontend >js-Tutorial >Umfassende Analyse der Verwendung von Bootstrap-Layout (Textstil)_Javascript-Fähigkeiten
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.