In diesem Artikel werden Ihnen der Layoutstil, der Listenstil und der Tabellenstil des Bootstrap-Layouts vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie weitere Video-Tutorials zum Thema Bootstrap lernen und erhalten möchten, können Sie auch Folgendes besuchen: Bootstrap-Tutorial!
Bootstrap Es geht davon aus, dass jede Webseite eine feste Breite haben sollte wird horizontal und vertikal innerhalb des Containers zentriert oder nimmt 100 % der Breite des Containers ein.
Bootstrap setzt die globale Schriftgröße auf 14 Pixel, die Zeilenhöhe auf 1,428 (20 Pixel), die Absatzzeilenhöhe auf 1/2 (10 Pixel) und die Farbe zu # 333
1) Feste Breite
.container Klasse wird verwendet für feste Breite und Container, die ein responsives Layout unterstützen (horizontal zentriert).
2) Prozentuale Breite
.container-Fluid wird für Container mit 100 % Breite verwendet und nimmt das gesamte Visualisierungsfenster ein.
Satzstil
.text-center Zentrierte Ausrichtung
.text-right Rechts ausrichten
.text-left Linksbündig
.text-uppercase wird verwendet, um Kleinbuchstaben in Großbuchstaben umzuwandeln
.text-lowercase wird verwendet, um Großbuchstaben in Kleinbuchstaben umzuwandeln
.text-capitalize wird verwendet, um den ersten Buchstaben groß zu schreiben
Tag gibt eine Abkürzung oder Abkürzung an, z. B. „WWW“ oder „NATO“ (günstig für Suchmaschinensuchen)
Das Folgende sind Tags im Bootstrap-Stil
wird verwendet, um Computerquellcode oder andere Textinhalte darzustellen, die von einer Maschine gelesen werden können. (Schattierung)
<span style="color:rgb(0,0,0);font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;text-align:left;background-color:rgb(253,252,248);">Gemeinsame Anwendungen stellen den Quellcode des Computers dar (Schattierungen und Ränder werden hinzugefügt) </span></span> </span></p>
<p><span style="color:rgb(204,102,0);"><strong><span style="font-size:18px;">Listenstil</span></strong></span><br></p>
<p><span style="font-size:14px;color:#000000;"><strong>Liste: geordnete Liste, ungeordnet Liste, Definitionsliste. </strong></span></p>
<p><span style="font-size:14px;color:#000000;"><em>.sr-only </em>Versteckt ein Element, das eine Zeile, eine Spalte oder die gesamte Tabelle sein kann</span></p>
<p><span style="font-size:14px;color:#000000;"><em>.list-unstyled</em> wird verwendet, um die Aufzählungszeichen vor der Liste zu entfernen und den Standardrandwert der Liste zu entfernen. list-inline ordnet den Inhalt der Liste in derselben Zeile an und fügt einen kleinen Füllwert </span></p>
<p><span style="font-size:14px;color:#000000;">.dl-horizontal</span></p> hinzu, um die Liste mit zu definieren <p><span style="font-size:14px;color:#000000;">, Ordnen Sie den Definitionstitel und die Definitionsbeschreibungsinformationen in derselben Zeile an und ordnen Sie den Inhalt im dt-Tag und im dd-Tag in derselben Zeile an </span><span style="font-size:14px;color:#ff6666;"></span><span style="font-size:14px;color:#000000;"></span></p>
<p>Tabellenstil<span style="color:rgb(0,0,0);"> <span style="color:rgb(204,102,0);"><strong><span style="font-size:18px;"></span></strong></span><br></span>.table</p> Fügen Sie die .table-Klasse zu jedem < table>-Tag, um ihm einen einfachen Stil, ein paar Polsterungen und horizontale Trennlinien zu verleihen. <p><span style="font-size:14px;color:#000000;"><em></em></span>.table-bordered</p> Fügt der Tabelle und jeder Zelle darin Rahmen hinzu <p><span style="font-size:14px;color:#000000;"><em></em></span>. gestreift </p> erzielt den Farbwechseleffekt jeder Zeile (<p><span style="font-size:14px;color:#000000;">IE8 unterstützt <em></em> nicht) </span><span style="font-size:14px;color:#ff6666;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">table.table-striped tr:nth-child(odd){
background:red;
}
/*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/
table.table-hover tr:hover{
background:red;
}
/*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/
.table-responsive
Legen Sie die Reaktionsfähigkeit auf das übergeordnete Tabellenelement fest. Wenn der Bildschirm kleiner als 768 Pixel ist, werden um ihn herum Ränder angezeigt Die Statusklasse
kann nur für tr oder td oder th festgelegt werden und kann nicht für Tabellen-Tags
über diese Statusklassen kann Farbe für Zeilen oder Zellen eingestellt werden
| Kategorie | Beschreibung | Instanz |
|---|---|---|
| .active | Hover-Farbe auf Zeile oder Zelle anwenden | Probieren Sie es aus |
| .Erfolg | zeigt einen erfolgreichen Vorgang an | Versuchen Sie es einfach einen Moment |
| .info | Vorgänge, die auf Änderungen der Informationen hinweisen | Probieren Sie es aus |
| .Warnung | Zeigt einen Warnvorgang an | Probieren Sie es aus |
| .danger | weist auf einen gefährlichen Vorgang hin | einmal auszuprobieren |
具体请看：
| Farbverlauf | success颜色 | ||
| Farbverlauf | 1499 | Nachricht | active颜色 |
| Farbverlauf | 1499 | 代发货 | info颜色 |
| Farbverlauf | 1499 | 代发货 | warning颜色 |
| Farbverlauf | 1499 | 代发货 | |
| 商品名称 | 商品价格 | 商品状态 | success颜色 |
| 小米手机 | 1499 | 代发货 | active颜色 |
| 小米手机 | 1499 | 代发货 | info颜色 |
| 小米手机 | 1499 | 代发货 | warning颜色 |
| 小米手机 | 1499 | 代发货 | danger颜色 |
Das obige ist der detaillierte Inhalt vonEinführung in den Typografiestil, den Listenstil und den Tabellenstil des Bootstrap-Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
