Detaillierte Einführung in Bootstrap-Eingabeaufforderungsinformationen

Auf einigen Webseiten wird häufig ein Tag hinzugefügt, um dem Benutzer zusätzliche Informationen mitzuteilen. Wenn beispielsweise ein neues Navigationselement zur Navigation hinzugefügt wird, kann ein „neues“ Tag hinzugefügt werden, um den Benutzer darüber zu informieren

　【Ähnliche Videoempfehlung: Bootstrap-Tutorial】

　 Im Bootstrap-Framework wird dieser Effekt speziell in eine Label-Komponente extrahiert und endet mit „.label“. ”-Stil zum Hervorheben

Die Verwendungsmethode ist sehr einfach. Sie können Inline-Tags wie span

<h3>Example heading <span class="label label-default">New</span></h3>

【Automatisch ausblenden】

verwenden

Wenn kein Inhalt vorhanden ist, automatisch ausblenden

.label:empty {display: none;
}

<h3>Example heading <span class="label label-default"></span></h3>

[Farbeinstellungen]

Ähnlich wie das Button-Element button bietet auch der Beschriftungsstil eine Vielzahl von Farben:

☑ label-default: Standardbeschriftung, dunkelgrau

☑ label-primary: Hauptbeschriftung , dunkelblau

☑ label-success: Erfolgsetikett, grün

☑ label-info: Informationsetikett, hellblau

☑ label-warning: Warnetikett, orange

　☑ label-danger: falsches Etikett, rot

Verwenden Sie diese Klassennamen hauptsächlich, um die Hintergrundfarbe und Textfarbe zu ändern

<span class="label label-default">Default</span><span class="label label-primary">Primary</span><span class="label label-success">Success</span><span class="label label-info">Info</span><span class="label label-warning">Warning</span><span class="label label-danger">Danger</span>

Badge

In gewisser Weise ist der Badge-Effekt dem zuvor eingeführten Label-Effekt sehr ähnlich. Wird auch zum Verfassen einiger Aufforderungsnachrichten verwendet. Was häufig angezeigt wird, sind die von einigen Systemen gesendeten Informationen, z. B. das System fragt nach der Anzahl der ungelesenen Nachrichten

Im Bootstrap-Framework wird dieser Effekt als Badge-Effekt bezeichnet und mit dem „Badge“-Stil erreicht it

Sie können Span-Tags verwenden, um sie wie Tags zu machen, und dann die Klasse badge hinzufügen

<a href="#">Inbox <span class="badge">42</span></a>

【Automatisch ausblenden】

Wenn keine neuen oder ungelesenen Informationseinträge vorhanden sind, d. h. sie keinen Inhalt enthalten, kann die Badge-Komponente automatisch ausgeblendet werden (implementiert über den CSS-:empty-Selektor).

.badge:empty {display: none;
}

<a href="#">Inbox <span class="badge"></span></a>

【Knopfabzeichen】

Das Abzeichen hat einen ähnlichen Stil die Schaltflächenelementtaste und die Kapselnavigation, Navigationspillen, aber die Farbe ist unterschiedlich gesamtes Browser-Ansichtsfenster, um wichtige Inhalte auf der Website anzuzeigen

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li></ul><button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span></button>

Wenn Sie der riesigen Bildschirmkomponente abgerundete Ecken hinzufügen möchten, fügen Sie dies einfach ein Komponente innerhalb des

-Elements

<div class="jumbotron">
  <h1>小火柴的蓝色理想</h1>
  <p>好的代码像粥一样，都是用时间熬出来的</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div>

.container

<div class="container"><div class="jumbotron"><h1>小火柴的蓝色理想</h1><p>好的代码像粥一样，都是用时间熬出来的</p><p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p></div></div>

Header

Die Header-Komponente kann entsprechend hinzugefügt werden Fügen Sie dem
-Tag Leerzeichen hinzu und arbeiten Sie damit. Der Rest der Seite bildet eine gewisse Trennung. Es unterstützt den Standardeffekt von

-Elementen, die in

-Tags eingebettet sind, und unterstützt auch die meisten anderen Komponenten (es müssen einige zusätzliche Stile hinzugefügt werden)

h1h1small

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in Bootstrap-Eingabeaufforderungsinformationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!