Kapitel 6: Hilfsgruppenklassen und Responsive Tools_Javascript-Fähigkeiten

Bootstrap von Twitter ist derzeit das beliebteste Frontend-Framework. Bootstrap basiert auf HTML, CSS und JAVASCRIPT. Es ist einfach und flexibel und beschleunigt die Webentwicklung.

Lernpunkte:

1. Hilfsgruppenunterricht

2. Responsive Tools

In dieser Lektion lernen wir hauptsächlich die Hilfsklassen und Responsive-Tools von Bootstrap kennen. Die Hilfsklassen stellen eine Reihe von Klassen bereit, die beim Seitendesign helfen, während die Responsive-Tools Medienabfragen verwenden, um bestimmte Inhalte anzuzeigen oder auszublenden.

1. Hilfsklasse

Bootstrap bietet einige kleine Hilfsgruppenstile im Layout, die zum Festlegen von Text- und Hintergrundfarben, zum Anzeigen von Abschlusssymbolen usw. verwendet werden.

1. Szenario-Textfarbe

样式列表
样式名 描述
text-muted 柔和灰
text-primary 主要蓝
text-success 成功绿
text-info 信息蓝
text-warning 警告黄
text-danger 危险红 
//各种色调的字体
<p class="text-muted">Bootstrap 视频教程</p>
<p class="text-primary">Bootstrap 视频教程</p>
<p class="text-success">Bootstrap 视频教程</p>
<p class="text-info">Bootstrap 视频教程</p>
<p class="text-warning">Bootstrap 视频教程</p>
<p class="text-danger">Bootstrap 视频教程</p> 

2. Hintergrundfarbe der Szene

样式列表

样式名 描述
bg-primary 主要蓝
bg-success 成功绿
bg-info 信息蓝
bg-warning 警告黄
bg-danger 危险红 
//各种色调的背景
<p class="bg-primary">Bootstrap 视频教程</p>
<p class="bg-success">Bootstrap 视频教程</p>
<p class="bg-info">Bootstrap 视频教程</p>
<p class="bg-warning">Bootstrap 视频教程</p>
<p class="bg-danger">Bootstrap 视频教程</p> 

3.Schaltfläche „Schließen“

<button type="button" class="close">&times;</button> 

4. Dreieckssymbol

<span class="caret"></span> 

5. Schnell schweben

<div class="pull-left">左边</div>
<div class="pull-right">右边</div> 

Hinweis: Dieser Float ist eigentlich Float, aber !important wird verwendet, um die Priorität zu stärken.

6. Zentrierung auf Blockebene

<div class="center-block">居中</div> 

Hinweis: ist margin:x auto;

7. Schwimmer aufräumen

<div class="clearfix"></div> 

Hinweis: Dieses Div kann vor dem schwimmenden Block platziert werden, der gereinigt werden muss.

8. Ein- und Ausblenden

<div class="show">show</div>
<div class="hidden">hidden</div> 

2. Responsive Tools

Bei der Medienabfrage ist es manchmal notwendig, einige Inhalte für verschiedene Bildschirmgrößen ein- und auszublenden. Responsive Toolklassen bieten diese Lösung.

//超小屏幕激活显示
<div class="visible-xs-block a">Bootstrap</div> 
//超小屏幕激活隐藏
<div class="hidden-xs a">Bootstrap</div> 

Hinweis: Es gibt drei Variationen für den angezeigten Inhalt: Block, Inline-Block und Inline.

Das Obige ist der Inhalt, der sich auf die vom Herausgeber eingeführten Hilfsgruppenklassen und reaktionsfähigen Tools der BootStrap-Komponente bezieht. Ich hoffe, dass er für alle hilfreich ist!