Einführung in den Typografiestil, den Listenstil und den Tabellenstil des Bootstrap-Layouts

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!

Layout-Container

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)

Text hervorheben (Schattierung)

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控制下标为奇数的行*/

Nach dem Login kopieren

.table-hover

Erzielen Sie den Effekt der Mausplatzierung

		 table.table-hover tr:hover{
            background:red;
            }
            /*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/

.table-confided

Für eine kompakte Tabelle halbieren Sie den Polsterwert

.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!