Wie viele gemeinsame Klassen gibt es in Bootstrap?

Klasse, die häufig in Bootstrap verwendet wird:

Basisklasse

.code来显示单行内联代码
.pre来显示多行块代码
.kbd来显示用户输入代码
.pre-scrollable高度超出340px，就会在Y轴出现滚动条

Tabellenklasse

.table基础表格margin-bottom:20px，在thead底部2px的浅灰实线，每个单元格顶部1px的浅灰实线
.table-striped：斑马线表格，隔行有一个浅灰色的背景色
.table-bordered：带边框的表格,所有单元格有1px的边框
.table-hover：鼠标悬停在表格的行上,有高亮的背景色
.table-condensed：将单元格的内距由8px调至5px
.table-responsive：设置类名.table-responsive的容器,将<table class="table">置于这个容器中

Klasse der Tabellenzeile

.active表示当前活动信息
.success成功或正确的行为
.info表示中立信息或行为
.warning表示警告
.danger表示危险活着错误行为

Zusätzlich zu .active sollten die anderen vier Klassennamen mit .table-hover

Form

.form übereinstimmen - Horizontaler Formeffekt, kooperieren Sie mit dem Rastersystem des Bootstrap-Frameworks; legen Sie die Füll- und Randwerte des Formularsteuerelements fest, ähnlich der „Zeile“ des Rastersystems > bei Verwendung der Eingabe in Bootstrap Der Typtyp
muss hinzugefügt werden, um sicherzustellen, dass der Steuerelementstil in verschiedenen Formularstilen nicht schief geht. Sie müssen .form-control
hinzufügen, um die Auswahl mehrerer Zeilen festzulegen Wert des Mehrfachattributs auf mehrere
-Zeilen, um die Höhe zu definieren, und Spalten, um die Breite festzulegen. .form-control, es sind keine Spalten erforderlich
Verwenden Sie das Label-Paket sowohl für Kontrollkästchen als auch für Radio
Wenn das Kontrollkästchen horizontal angeordnet werden muss, müssen Sie nur den Klassennamen „checkbox-inline“ hinzufügen label label

Feste Navigationsleiste

Der obere und untere Rand des Hauptinhalts der Seite wird von der festen Navigationsleiste abgedeckt. Um zu verhindern, dass die feste Navigationsleiste den Inhalt verdeckt, müssen wir einige Verarbeitungen am Körper vornehmen:

body {
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
　…
</div>

Tatsächlich haben wir zusätzlich zu dieser Lösung noch andere Lösungen, indem wir die feste Navigationsleiste anbringen der Seiteninhalt Vorderseite:

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
　…
</div>
<div class="content">我是内容</div>

Fügen Sie den folgenden Stilcode in die Datei ein:

.navbar-fixed-top ~ .content {
padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
padding-bottom: 70px;
}

Empfohlen:

Bootstrap Getting Started Tutorial

Das obige ist der detaillierte Inhalt vonWie viele gemeinsame Klassen gibt es in Bootstrap?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!