Heim >Web-Frontend >Bootstrap-Tutorial >So erstellen Sie eine Fehlermeldung im Bootstrap

So erstellen Sie eine Fehlermeldung im Bootstrap

藏色散人
藏色散人Original
2020-11-18 11:20:423066Durchsuche

So erstellen Sie eine Fehleraufforderung mit Bootstrap: Erstellen Sie zunächst eine HTML-Beispieldatei. Führen Sie dann Bootstrap.css, jquery.js und Bootstrap.js ein und erstellen Sie schließlich einen Bootstrap-Warnfehler.

So erstellen Sie eine Fehlermeldung im Bootstrap

Die Betriebsumgebung dieses Tutorials: Windows7-System, Bootstrap3-Version. Diese Methode ist für alle Computermarken geeignet.

Empfohlen: „Bootstrap-Video-Tutorial

Bootstrap-Fehlerwarnmeldungsaufforderung

Bootstrap bietet Stile für eine erfolgreiche Ausführung, Warnungen und Fehlermeldungen.

Sie müssen die folgenden Dateien einführen, wenn Sie diese Funktion verwenden:

bootstrap.css

jquery.js (muss vor bootstrap.js platziert werden)

bootstrap.js (die offizielle Empfehlung ist die Einführung von bootstrap-alert.js)

Hauptsächlich verwendete Stile:

.span4
.alert(默认样式)
.alert alert-successs
.alert alert-error
.alert alert-info

Der Beispielcode lautet wie folgt folgt:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>bootstrap警告错误</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">    
    <script  src="bootstrap/js/jquery.1.9.1.js"></script>
    <script  src="bootstrap/js/bootstrap.js"></script>
    
</head>    
<body>
    <div class="container">
        <h2>警告错误</h2>
        <div class="row">
        <div class="span4">
            <div class="alert">
                <a class="close" data-dismiss="alert">×</a>
                <strong>
                    Warning
                </strong>这里是警告提示信息
            </div>
            <div class="alert alert-success">
                <a class="close" data-dismiss="alert">×</a>
                <strong>
                    Success
                </strong>这里是成功提示信息
            </div>
            <div class="alert alert-info">
                <a class="close" data-dismiss="alert">×</a>
                <strong>
                    Info
                </strong>这里是信息提示信息
            </div>
        </div>
    </div>
</div>
</body>
</html>

Der Effekt ist wie im Bild gezeigt:

So erstellen Sie eine Fehlermeldung im Bootstrap

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine Fehlermeldung im Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn