python全栈开发_day48_bootstrap

jQuery事件
jQuery动画效果
补充语法

Bootstrap前端框架
特点:教你如何复制粘贴
ps:虽然是复制粘贴，但是你们可能连复制粘贴都不会!!!

取消标签自带的事件
return false

$('button').on('click',function () {
console.log(this)
})
this指代的是当前被操作对象(并且是原生的js对象)


$('button').on('click',function () {
$(this).clone().insertAfter(this);
})
克隆标签:默认情况下只克隆标签的文本和样式不克隆事件


绑定事件的两种方式
第一种
$('div').click(function(){
事件代码
})
第二种
$('div').on('事件名',function(){
事件代码
})

hover:鼠标悬浮事件



取消标签自带的事件有两种方式
第一种:
return false
第二种:
$('input').click(function (e) {
alert(123);
// 1. return false
// 2. e.preventDefault();
})


事件冒泡:
事件会一层层往上一级汇报
如何组织事件冒泡:
在你的事件函数内部加一句取消事件冒泡的代码
注意需要加上形参e

$('p').click(function (e) {
alert('p');
e.stopPropagation()
});

事件委托:
将触发的事件委托给内部某个标签去执行
无论改标签是初始化就有还是后期动态添加都可以执行
$('body').on('click','button',function () {
alert(123)
})


文档加载
三种方式:
第一种(了解):
$(document).ready(function(){
// 在这里写你的JS代码...
})
第二种(了解):
$(function(){
// 你在这里写你的代码
})
第三种:
直接在body内部最下方书写代码


将标签当做自己的临时小仓库
可以让任何标签帮你存储数据


整个前端
HTML
CSS
JS
jQuery

就差一个搭建前端页面的精髓




Bootstrap它是基于jQuery，也就意味着你在用bootstrap要先导入jQuery文件！！！

建议使用3.X版本，不要轻易使用最新版

修改页面样式其实就是修改类属性



布局容器
<div class="container "></div> 左右有固定留白
<div class="container-fluid c1"></div> 全屏展示



栅格系统
一个row就表示一行(这一行默认给你均分成了12份,每一份你还可以均分成12份)

首先使用bootstrap先写一个布局容器
<div class='container'></div>
<div class='container-fluid'></div>


<div class="container">
<div class="row"> 一行
<div class="col-md-6 c1"></div> 控制你占当前行的多少列

列偏移
col-md-offset-3

浮动
pull-left
pull-right

表格
<table class="table table-hover table-bordered table-striped">

按钮
<button class="btn btn-success">button</button>
<button class="btn btn-info">button</button>
<button class="btn btn-warning">button</button>
<button class="btn btn-danger">button</button>
<button class="btn btn-primary">button</button>
<a href="http://www.xiaohuar.com" class="btn btn-primary">Link</a>


btn-block 占父标签100%

导航



作业1:
注册示例提示信息显隐