Wo ist die modale Bootstrap-Box?-Front-End-Fragen und Antworten-php.cn

Wo ist die modale Bootstrap-Box?

WBOY

Freigeben： 2022-08-01 17:55:40

Original

1690 Leute haben es durchsucht

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.

Wo ist die modale Bootstrap-Box?

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">&times;</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>

Nach dem Login kopieren

Ausgabeergebnis:

Wo ist die modale Bootstrap-Box?

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

-Elements platziert:

<!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">&times;</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>

Nach dem Login kopieren

Ausgabeergebnis:

Wo ist die modale Bootstrap-Box?

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!