从小白到小黑 python学习之旅 日常总结 58（jQuery 前端框架Bootsrap 简单的图书管理系统页面）
jQuery
事件
<head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <form action=""> <span id="d1" style="color: red"></span> <input type="submit" id="d2"> </form> <script> $('#d2').click(function (e) { $('#d1').text('宝贝 你能看到我吗?') // 阻止标签后续事件的执行 方式1 return false // 阻止标签后续事件的执行 方式2 // e.preventDefault() }) </script> </body>
<head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div id="d1">div <p id="d2">div>p <span id="d3">span</span> </p> </div> <script> $('#d1').click(function () { alert('div') }) $('#d2').click(function () { alert('p') }) $('#d3').click(function (e) { alert('span') // 阻止事件冒泡的方式1 return false // 阻止事件冒泡的方式2 // e.stopPropagation() }) </script> </body>
<head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script> <script src="../../Desktop/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script> </head> <body> <button>是兄弟，就来砍我!!!</button> <script> // 给页面上所有的button标签绑定点击事件 // $('button').click(function () { // 无法影响到动态创建的标签 // alert(123) // }) // 事件委托 $('body').on('click','button',function () { alert(123) // 在指定的范围内(body) 将事件(click)委托给某个标签(button) 无论该标签是事先写好的还是后面动态创建的 }) </script> </body>
// js中等待页面加载完毕再执行代码 window.onload = function(){ // js代码 } """jQuery中等待页面加载完毕""" // 第一种 $(document).ready(function(){ // js代码 }) // 第二种 $(function(){ // js代码 }) // 第三种 """直接写在body内部最下方"""
$('#d1').hide(5000) // 5秒后隐藏
$('#d1').show(5000) // 5秒后展示
$('#d1').slideUp(5000) // 5秒 向上滑动
$('#d1').slideDown(5000) // 5秒 向下滑动
$('#d1').fadeOut(5000) // 5秒后 消失 渐变
$('#d1').fadeIn(5000) // 5秒后 出现 渐变
$('#d1').fadeTo(5000,0.4) // 5秒 后面变成透明度0.4 渐变
补充
.each()
第一种方式
$('div')
w.fn.init(10) [div, div, div, div, div, div, div, div, div, div, prevObject: w.fn.init(1)]
//.each() 第一个参数 是索引 第二个参数是 标签对象 (可以就写1个参数)
// 类似于简易版本的for循环 循环前面的的数组（标签） 把里面的元素一个个的交给后面的函数去运行 第一个是索引 第二个是数据对象
$('div').each(function(index,obj){console.log(index,obj)})
// 0 <div>1</div>
// 1 <div>2</div>
// 2 <div>3</div>
// 3 <div>4</div>
// 4 <div>5</div>
// 5 <div>6</div>
// 6 <div>7</div>
// 7 <div>8</div>
// 8 <div>9</div>
// 9 <div>10</div>
第二种方式
// 类似于简易版本的for循环 循环前面的的数组（标签） 把里面的元素一个个的交给后面的函数去运行 第一个是索引 第二个是数据对象 $.each([111,222,333],function(index,obj){console.log(index,obj)}) // 0 111 // 1 222 // 2 333
有了each之后 就无需自己写for循环了 用它更加的方便
.data()
//能够让标签帮我们存储数据 并且用户看不见(不能直接看见 要调用.data(属性名)才能查看) $('div').data('info','回来吧，我原谅你了!') //添加 $('div').first().data('info') //查看 "回来吧，我原谅你了!" $('div').last().data('info') //查看 "回来吧，我原谅你了!" $('div').first().removeData('info') //删除
该框架已经帮你写好了很多页面样式，你如果需要使用，只需要下载它对应文件，之后直接cv拷贝即可
在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可
版本选择建议使用v3版本：地址
Bootstrap 中文网 为 Bootstrap 专门构建了免费的 CDN 加速服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。BootCDN 还对大量的前端开源工具库提供了 CDN 加速服务，请进入BootCDN 主页查看更多可用的工具库
bootstrap的js代码是依赖于jQuery的，也就意味着你在使用Bootstrap动态效果的时候，一定要导入jQuery
Bootstrap的样式有很多 以下是简单介绍
<div class="container"> 左右两侧有留白 </div> <div class="container-fluid"> 左右两侧没有留白 </div> // 后续在使用bootstrap做页面的时候 上来先写一个div class=container,之后在div内部书写页面
<div class="row"></div> //写一个row就是将所在的区域划分成12份 <div class="col-md-6 "> //获取你所要的份数 // 在使用bootstrap的时候 脑子里面一定要做12的加减法
.col-xs- .col-sm- .col-md- .col-lg- // 针对不同的显示器 bootstrap会自动选择对应的参数 // 如果你想要兼容所有的显示器 你就全部加上即可 // 在一行如何移动位置 <div class="col-md-8 c1 col-md-offset-2"></div> // 从左往右移2份
bootstrap将所有原生的HTML标签的文本字体统一设置成了更美观的样式
<table class="table table-hover table-striped table-bordered">
<tr class="success">
<td>1</td>
<td>jason</td>
<td>123</td>
<td>study</td>
</tr>
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<div class="container">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">登陆页面</h2>
<form action="">
<p>username:<input type="text" class="form-control"></p>
<p>password:<input type="text" class="form-control"></p>
<p>
<select name="" id="" class="form-control">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</select>
</p>
<textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
<input type="submit">
</form>
</div>
</div>
// 针对表单标签 加样式就用form-control
class="form-control"
"""
<input type="checkbox">222
<input type="radio">333
checkbox和radio我们一般不会给它加form-control，直接使用原生的即可
"""
// 针对报错信息 可以加has-error（input的父标签加）
<p class="has-error">
username:
<input type="text" class="form-control">
</p>
<a href="https://www.mzitu.com/" class="btn btn-primary">点我</a> <button class="btn btn-danger">按我</button> <button class="btn btn-default">按我</button> <button class="btn btn-success">按我</button> <button class="btn btn-info">按我</button> <button class="btn btn-warning">按我</button> <button class="btn btn-warning btn-lg">按我</button> <button class="btn btn-warning btn-sm">按我</button> <button class="btn btn-warning btn-xs">按我</button> //通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素。 <input type="submit" class="btn btn-primary btn-block">
图片
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg" alt="..." class="img-rounded">
<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg" alt="..." class="img-circle">
<img src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3136075639,3338708347&fm=26&gp=0.jpg" alt="..." class="img-thumbnail">
</div>
</div>
</div>
图标
fontawesome图标库：http://www.fontawesome.com.cn/
//图标是和普通文本一样可以修改颜色的 <h2 class="text-center"><span class="glyphicon glyphicon-user"></span></h2>
<nav class="navbar navbar-inverse">
<!--<nav class="navbar navbar-default">-->
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
swal('你还好吗?')
swal('你还好吗?','我不好，想你了!')
swal('你还好吗?','我不好，想你了!','success')
swal('你还好吗?','我不好，想你了!','warning')
swal('你还好吗?','我不好，想你了!','error')
swal('你还好吗?','我不好，想你了!','info')
进度条
<div class="progress">
<div id='d2' class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 10%">
</div>
</div>
<button id="d1" class="btn btn-danger">跑起来</button>
<script>
function func(i){
let tempWidth = 'width:' + i + '%' // style
let contentText = i + '%' // 文本
$('#d2').attr('style',tempWidth).text(contentText)
}
$('#d1').click(function () {
for(let i=0;i<101;i++){
setInterval(func(i),5000)
}
})
</script>
图书管理系统前端页面搭建
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">图书管理系统</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">图书<span class="sr-only">(current)</span></a></li>
<li><a href="#">作者</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Jason</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多操作 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-3">
<div class="list-group">
<a href="#" class="list-group-item active">
图书列表
</a>
<a href="#" class="list-group-item">作者列表</a>
<a href="#" class="list-group-item">出版社列表</a>
<a href="#" class="list-group-item">妹子图列表</a>
<a href="#" class="list-group-item">更多精彩</a>
</div>
</div>
<div class="col-md-9">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">图书管理系统 <span class="glyphicon glyphicon-qrcode pull-right"></span></h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<button class="btn btn-success pull-right">添加</button>
</div><!-- /.col-lg-6 -->
</div>
<hr>
<div>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>username</th>
<th>password</th>
<th>hobby</th>
<th>price</th>
<th class="text-center">action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
<td>666.66</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
<td>666.66</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
<tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
<td>666.66</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr><tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
<td>666.66</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr><tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
<td>666.66</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr><tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
<td>666.66</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr><tr>
<td>1</td>
<td>egon</td>
<td>123</td>
<td>DBJ</td>
<td>666.66</td>
<td class="text-center">
<button class="btn btn-primary btn-xs">编辑</button>
<button class="btn btn-danger btn-xs">删除</button>
</td>
</tr>
</tbody>
</table>
<nav aria-label="Page navigation" class="text-center">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
浙公网安备 33010602011771号