Heim > Artikel > Web-Frontend > Wo ist die modale Bootstrap-Box?
Wo ist die modale Bootstrap-Box?
- WBOYOriginal
- 2022-08-01 17:55:401674Durchsuche
Das modale Feld von Bootstrap wird dem übergeordneten Formular überlagert und ist ein untergeordnetes Formular. Der Zweck des modalen Felds besteht darin, Inhalte aus einer separaten Quelle anzuzeigen und eine gewisse Interaktion zu ermöglichen, ohne das übergeordnete Formular zu verlassen. Sie können eine kleine modale Box erstellen, indem Sie die Klasse „.modal-sm“ hinzufügen, und eine große modale Box erstellen, indem Sie die Klasse „.modal-lg“ hinzufügen.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 5, DELL G3-Computer
Was ist die modale Box von Bootstrap?
Die modale Box (Modal) wird dem übergeordneten Element überlagert Formular-Unterformular. Normalerweise 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.
So erstellen Sie eine modale Box
Das folgende Beispiel erstellt einen einfachen modalen Boxeffekt:
<!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.3.1/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.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/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>Ausgabeergebnis:
Modalboxgröße
Wir können .modal-sm hinzufügen, indem wir hinzufügen. modal-sm-Klasse zum Erstellen einer kleinen modalen Box und die .modal-lg-Klasse zum Erstellen einer großen modalen Box.
Die Größenklasse wird nach der .modal-dialog-Klasse des
<!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.3.1/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.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/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 modal-sm">
<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>Ausgabeergebnis:
Verwandte Empfehlungen: Bootstrap-Tutorial
Das obige ist der detaillierte Inhalt vonWo ist die modale Bootstrap-Box?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!