Bootstrap4+MySQL前后端综合实训-Day03-AM【折叠、模态框】
生活随笔
收集整理的這篇文章主要介紹了
Bootstrap4+MySQL前后端综合实训-Day03-AM【折叠、模态框】
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
【Bootstrap4前端框架+MySQL數據庫】前后端綜合實訓【10天課程 博客匯總表 詳細筆記】
目 ? 錄
折疊
菜鳥教程——Bootstrap——折疊
模態框
菜鳥教程——Bootstrap——模態框
折疊
菜鳥教程——Bootstrap——折疊
? ?
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><!-- 新 Bootstrap4 核心 CSS 文件 --><link rel="stylesheet" href="bootstrap4/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" /><!-- jQuery文件。務必在bootstrap.min.js 之前引入 --><script src="jquery/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于彈窗、提示、下拉菜單，包含了 popper.min.js --><script src="js/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><script src="bootstrap4/js/bootstrap.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>手風琴特效</title><style type="text/css">.second-nav>li {padding-left: 50px;}</style></head><body><button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">簡單的折疊</button><div id="demo" class="collapse">Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div><ul class="list-group first-nav"><li class="list-group-item bg-danger" data-toggle="collapse" data-target="#demo1">First item</li><ul class="list-group second-nav collapse" id="demo1"><li class="list-group-item bg-info">First item</li><li class="list-group-item bg-info">Second item</li><li class="list-group-item bg-info">Third item</li></ul><li class="list-group-item bg-danger">Second item</li><li class="list-group-item bg-danger" data-toggle="collapse" data-target="#demo2">Third item</li><ul class="list-group second-nav collapse" id="demo2"><li class="list-group-item bg-info">First item</li><li class="list-group-item bg-info">Second item</li><li class="list-group-item bg-info">Third item</li></ul></ul></body> </html>模態框
菜鳥教程——Bootstrap——模態框
? ?
????
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><!-- 新 Bootstrap4 核心 CSS 文件 --><link rel="stylesheet" href="bootstrap4/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/css/font-awesome.min.css" /><!-- jQuery文件。務必在bootstrap.min.js 之前引入 --><script src="jquery/jquery.min.js"></script><!-- bootstrap.bundle.min.js 用于彈窗、提示、下拉菜單，包含了 popper.min.js --><script src="js/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><script src="bootstrap4/js/bootstrap.min.js"></script><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><title>bootstrap入門</title><style type="text/css"></style></head><body><button class="btn btn-warning" data-toggle="modal" data-target="#editUser">顯示模態框</button><!-- 模態框 --><div class="modal fade" id="editUser"><div class="modal-dialog"><div class="modal-content"><!-- 模態框頭部 --><div class="modal-header bg-info"><h4 class="modal-title">編輯學生</h4></div><!-- 模態框主體 --><div class="modal-body">111</div><!-- 模態框底部 --><div class="modal-footer"><button type="button" class="btn btn-info" data-dismiss="modal">確定</button><button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button></div></div></div></div></body> </html>今天上午，老師沒講課——讓做昨天布置的兩個頁面。
總結
以上是生活随笔為你收集整理的Bootstrap4+MySQL前后端综合实训-Day03-AM【折叠、模态框】的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Bootstrap4+MySQL前后端综
- 下一篇： Bootstrap4+MySQL前后端综