bootstrap jquery alert_bootstrap第七课
生活随笔
收集整理的這篇文章主要介紹了
bootstrap jquery alert_bootstrap第七课
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
bootstrap 模態(tài)框
bootstrap是一個(gè)非常酷的前端開(kāi)發(fā)框架，它可以大大的簡(jiǎn)化我們?nèi)粘ｉ_(kāi)發(fā)當(dāng)中的功能與樣式。它有非常漂亮的css組件和非常實(shí)用的控件供我們使用。接下來(lái)我們來(lái)看看bootstrap的內(nèi)容吧！
首先大家要引入bootstrap的css和js
可以在這里下載：https://v3.bootcss.com/getting-started/
下載下來(lái)引入頁(yè)面即可。(注意要引入jQuery 因?yàn)锽ootstrap 的所有 JavaScript 插件都依賴 jQuery)
bootstrap的模態(tài)框就是當(dāng)我們點(diǎn)擊按鈕時(shí)會(huì)彈出來(lái)一個(gè)父窗體，里面可以有確定、取消等交互內(nèi)容。
直接上代碼：html><html?lang="zh-CN">
????<head>
????????<meta?charset="utf-8">
????????<meta?name="viewport"?content="width=device-width,?initial-scale=1">
????????<title>bootstrap模態(tài)框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">
????????????????????????????模態(tài)框演示
????????????????????????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">
????????????????????????你上輩子一定是碳酸飲料吧，為什么我一看到你就能開(kāi)心的冒泡？
????????????????????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("愛(ài)你哦!");
????????????????$("#loveTalkModel").modal("hide");
????????????})script>
????body>
html>效果：? ? ? ? ? ? ? ? ▼? ? ? ? ? ? ? ? 更多精彩推薦，請(qǐng)關(guān)注我們? ? ? ? ? ? ? ? ▼
關(guān)注公眾號(hào)
一起努力
總結(jié)
以上是生活随笔為你收集整理的bootstrap jquery alert_bootstrap第七课的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 徽商银行信用卡汽车分期怎么办理？需要什么
- 下一篇： java 闭包_公司新来的女实习生问我什