Heim > Artikel > Web-Frontend > So richten Sie eine modale Box in Bootstrap4 ein
So richten Sie eine modale Box in Bootstrap4 ein
- (*-*)浩Original
- 2019-07-12 09:58:022668Durchsuche
Modale Boxen sind untergeordnete Formulare, die übergeordneten Formularen überlagert sind. Typischerweise besteht der Zweck darin, Inhalte aus einer separaten Quelle anzuzeigen, die eine gewisse Interaktion ermöglichen, ohne das übergeordnete Formular zu verlassen. Unterformulare können Informationsinteraktion usw. bereitstellen.
Öffnen Sie beispielsweise ein Modal, indem Sie auf eine Schaltfläche klicken. (Empfohlenes Lernen: Bootstrap-Video-Tutorial)
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>模态框实例</h2> <!-- 按钮：用于打开模态框 --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> 打开模态框 </button> <!-- 模态框 --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模态框头部 --> <div class="modal-header"> <h4 class="modal-title">模态框头部</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- 模态框主体 --> <div class="modal-body"> 模态框内容.. </div> <!-- 模态框底部 --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button> </div> </div> </div> </div> </div> </body> </html>
Wir können eine kleine modale Box erstellen, indem wir die Klassen .modal-sm und .modal-lg hinzufügen kann ein großes Modal erstellen.
Die Größenklasse wird nach der .modal-dialog-Klasse des Für weitere technische Artikel zu Bootstrap , besuchen Sie bitte die Spalte Bootstrap-Tutorial, um mehr zu erfahren! Das obige ist der detaillierte Inhalt vonSo richten Sie eine modale Box in Bootstrap4 ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!