bootstrap jquery alert_bootstrap第七课
生活随笔
收集整理的這篇文章主要介紹了
bootstrap jquery alert_bootstrap第七课
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
bootstrap 模態框
bootstrap是一個非常酷的前端開發框架，它可以大大的簡化我們日常開發當中的功能與樣式。它有非常漂亮的css組件和非常實用的控件供我們使用。接下來我們來看看bootstrap的內容吧！
首先大家要引入bootstrap的css和js
可以在這里下載：https://v3.bootcss.com/getting-started/
下載下來引入頁面即可。(注意要引入jQuery 因為Bootstrap 的所有 JavaScript 插件都依賴 jQuery)
bootstrap的模態框就是當我們點擊按鈕時會彈出來一個父窗體，里面可以有確定、取消等交互內容。
直接上代碼：html><html?lang="zh-CN">
????<head>
????????<meta?charset="utf-8">
????????<meta?name="viewport"?content="width=device-width,?initial-scale=1">
????????<title>bootstrap模態框title>
????????<link?rel="stylesheet"?href="css/bootstrap.min.css">?
????????<style?type="text/css">.main?{width:?100%;padding:?10px;
????????????}.container?{width:?100%;
????????????}style>
????head>
????<body>
????????<div?class="main">.
????????????<div?class="container">
????????????????<div?class="row">
????????????????????
????????????????????<div?class="panel?panel-success">
????????????????????????<div?class="panel-heading">
????????????????????????????模態框演示
????????????????????????div>
????????????????????????<div?class="panel-body">
????????????????????????????<div?class="col-lg-2?col-md-3?col-sm-6?col-xs-12">
????????????????????????????????
????????????????????????????????
????????????????????????????????<button?type="button"?class="btn?btn-primary?btn-lg"?data-toggle="modal"?data-target="#loveTalkModel">土味情話？button>
????????????????????????????div>
????????????????????????div>
????????????????????div>
????????????????div>
????????????div>
????????div>
????????
????????
????????
????????
????????
????????
????????
????????<div?class="modal?fade"?id="loveTalkModel"?tabindex="-1"?role="dialog"?aria-labelledby="loveTalkModelLabel"?aria-hidden="true">
????????????<div?class="modal-dialog">
????????????????<div?class="modal-content">
????????????????????<div?class="modal-header">
????????????????????????<button?type="button"?class="close"?data-dismiss="modal"?aria-hidden="true">
????????????????????????????×
????????????????????????button>
????????????????????????<h4?class="modal-title"?id="loveTalkModelLabel">
????????????????????????????土味情話？?
????????????????????????h4>
????????????????????div>
????????????????????<div?class="modal-body">
????????????????????????你上輩子一定是碳酸飲料吧，為什么我一看到你就能開心的冒泡？
????????????????????div>
????????????????????<div?class="modal-footer">?
????????????????????????<button?type="button"?class="btn?btn-default"?data-dismiss="modal">取消
????????????????????????button>
????????????????????????<button?type="button"?id="submitTo"?class="btn?btn-primary">
????????????????????????????確定
????????????????????????button>
????????????????????div>
????????????????div>
????????????div>
????????div>?
????????<script?src="js/jquery-3.3.1.min.js">script>?
????????<script?src="js/bootstrap.min.js">script>?
????????<script?type="text/javascript">
????????????$("#submitTo").click(function(){
????????????????alert("愛你哦!");
????????????????$("#loveTalkModel").modal("hide");
????????????})script>
????body>
html>效果：? ? ? ? ? ? ? ? ▼? ? ? ? ? ? ? ? 更多精彩推薦，請關注我們? ? ? ? ? ? ? ? ▼
關注公眾號
一起努力
總結
以上是生活随笔為你收集整理的bootstrap jquery alert_bootstrap第七课的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 徽商银行信用卡汽车分期怎么办理？需要什么
- 下一篇： java 闭包_公司新来的女实习生问我什