Rumah > Artikel > hujung hadapan web > Di manakah kotak modal bootstrap?
Di manakah kotak modal bootstrap?
- WBOYasal
- 2022-08-01 17:55:401692semak imbas
Kotak modal Bootstrap ditindih pada borang induk dan merupakan bentuk anak; tujuan kotak modal adalah untuk memaparkan kandungan daripada sumber yang berasingan tanpa meninggalkan borang induk interaksi, dsb. Anda boleh mencipta kotak modal kecil dengan menambah kelas ".modal-sm", dan mencipta kotak modal besar dengan menambah kelas ".modal-lg".
Persekitaran pengendalian tutorial ini: sistem Windows 10, bootstrap versi 5, komputer DELL G3
Di manakah kotak modal daripada bootstrap?
Modal ialah subborang yang merangkumi borang induk. Lazimnya, tujuannya adalah untuk memaparkan kandungan daripada sumber berasingan yang boleh mempunyai beberapa interaksi tanpa meninggalkan borang induk. Subborang boleh menyediakan interaksi maklumat, dsb.
Cara mencipta kotak modal
Contoh berikut mencipta kesan kotak modal mudah:
<!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>Hasil output:
Saiz kotak modal
Kita boleh mencipta kotak modal kecil dengan menambah kelas .modal-sm, kelas .modal-lg Anda boleh buat modal besar.
Kelas saiz diletakkan selepas kelas .modal-dialog bagi elemen dc6dce4a544fdca2df29d5ac0ea9906b
<!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>Hasil keluaran:
Pengesyoran berkaitan: tutorial bootstrap
Atas ialah kandungan terperinci Di manakah kotak modal bootstrap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!