欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

bootstrap 彈出div

Ajax
吳明珍1年前9瀏覽0評論

Bootstrap 彈出 DIV


Bootstrap 是一個流行的前端開發框架，它提供了許多用于創建響應式、現代化網站和應用程序的組件和工具。其中一個非常有用的功能是彈出 DIV，可以在用戶與網頁交互時顯示一些額外的信息或功能。本文將通過幾個代碼案例，詳細解釋Bootstrap彈出DIV的用法和實現過程。


案例一：簡單的彈出提示框


，我們需要引入Bootstrap的CSS和JavaScript文件，以及jQuery庫。然后，我們可以使用Bootstrap提供的popover組件來實現彈出提示框的功能。


<code>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap 彈出 DIV</title>
<link rel="stylesheet" >
</head>
<body>
<br>
    <button type="button" class="btn btn-primary" data-toggle="popover" title="提示" data-content="這是一個簡單的彈出提示框。">彈出提示框</button>
<br>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/js/bootstrap.bundle.min.js"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<br>
</body>
</html>
</code>

在上面的代碼中，我們創建了一個按鈕元素，并為其添加了data-toggle、title和data-content屬性。data-toggle="popover"告訴Bootstrap該元素需要彈出一個popover。title屬性定義了提示框的標題，data-content屬性定義了提示框的內容。然后，通過JavaScript代碼初始化彈出功能，使得按鈕點擊時顯示相應的提示框。


案例二：彈出表單


除了簡單的提示框，我們還可以利用Bootstrap彈出DIV來實現彈出表單的功能。下面的代碼展示了如何在點擊按鈕時彈出一個包含輸入框和提交按鈕的表單。


<code>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap 彈出 DIV</title>
<link rel="stylesheet" >
</head>
<body>
<br>
    <button type="button" class="btn btn-primary" data-toggle="popover" title="登錄" data-html="true" data-content="<form><div class='form-group'><label for='username'>用戶名</label><input type='text' class='form-control' id='username'></div><div class='form-group'><label for='password'>密碼</label><input type='password' class='form-control' id='password'></div><button type='submit' class='btn btn-primary'>登錄</button></form>">登錄</button>
<br>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/js/bootstrap.bundle.min.js"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<br>
</body>
</html>
</code>

在上述代碼中，我們在data-content屬性中嵌入了一個完整的HTML表單，并使用了轉義字符串替代了尖括號。data-html="true"用于告訴Bootstrap解析并渲染HTML代碼。當用戶點擊按鈕時，彈出DIV中將顯示這個嵌入的表單，并且用戶可以進行輸入并提交。


案例三：基于觸發事件的彈出DIV


除了通過點擊按鈕來觸發彈出DIV外，Bootstrap還支持其他事件作為觸發器。下面的代碼示例展示了如何使用鼠標懸停來觸發彈出DIV。


<code>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Bootstrap 彈出 DIV</title>
<link rel="stylesheet" >
</head>
<body>
<br>
    <div class="d-inline-block" tabindex="0" data-toggle="popover" role="button" data-trigger="focus" title="懸停提示" data-content="這個DIV會在鼠標懸停時彈出。">鼠標懸停彈出</div>
<br>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.2/js/bootstrap.bundle.min.js"></script>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
<br>
</body>
</html>
</code>

在上述代碼中，我們使用了data-trigger屬性將事件觸發器設置為focus，這樣當用戶將鼠標懸停在該DIV上時，彈出DIV會顯示出來。通過設置tabindex="0"，我們使得該DIV能夠獲得鍵盤焦點，從而也可以通過Tab鍵來觸發。


通過上述代碼案例，我們了解了如何使用Bootstrap彈出DIV的功能。無論是簡單的提示框、彈出表單還是基于觸發事件的彈出DIV，Bootstrap的popover組件都可以幫助我們實現這些功能。希望通過本文的介紹，讀者們能夠更加熟悉和掌握Bootstrap彈出DIV的用法。