Wozu dient die Bootstrap-Modalbox?

(*-*)浩
Freigeben: 2019-07-24 13:42:53
Original
2403 Leute haben es durchsucht

Bootstrap-Modals werden mit benutzerdefinierten JQuery-Plugins erstellt.

Wozu dient die Bootstrap-Modalbox?

Es kann verwendet werden, um modale Fenster zu erstellen, um das Benutzererlebnis zu bereichern, oder um Benutzern praktische Funktionen hinzuzufügen. Sie können Popovers und Tooltips mit Modals verwenden. (Empfohlenes Lernen: Bootstrap-Video-Tutorial)

Wird anhand einiger Beispiele und Erklärungen erläutert, wie Bootstrap zum Erstellen eines modalen Fensters verwendet wird. Wir werden auch die verschiedenen Optionen zur Anpassung besprechen.

Sie benötigen Jquery, Bootstrap CSS und die JavaScript-Datei bootstrap-modal.js. Diese js-Datei befindet sich im js-Ordner im Hauptordner des von Ihnen erstellten Bootstrap-Downloads.

Jquery befindet sich in Ihrem Bootstrap-Home-Ordner unter docs > asset > Oder Sie können direkt https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js besuchen, um Jquery herunterzuladen.

Wie Bootstrap-Modale (modale Boxen) aussehen

Das folgende Beispiel zeigt, wie Bootstrap-Modale (modale Boxen) aussehen.

Wozu dient die Bootstrap-Modalbox?

Verwenden Sie Bootstrap-Modale (Modalboxen) auf Ihrer Website

Das folgende Beispiel zeigt, wie Sie es in einem Webseiten-Bootstrap verwenden Modalitäten. Beachten Sie, dass Sie keinen JavaScript-Code schreiben müssen.

<div>
    <h2>使用Bootstrap创建模态框</h2>
    <div>
        <div>
            <a>×</a>
            <h3>这是一个模态框标题</h3>
        </div>
        <div>
            <h4>模态框中的文本</h4>
            <p>你可以在这添加一些文本。</p>
        </div>
        <div>
            <a>唤醒活动</a>
            <a>关闭</a>
        </div>
    </div>
    <p><a>发动演示模态框</a></p>
</div>
<script></script>
<script></script>
Nach dem Login kopieren

Weitere technische Artikel zu Bootstrap finden Sie in der Spalte Bootstrap-Tutorial, um mehr darüber zu erfahren!

Das obige ist der detaillierte Inhalt vonWozu dient die Bootstrap-Modalbox?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage