day50

昨日回顾

事件冒泡

组织后续事件发生
return false;
e.stopPropagation()

事件委托
$('父类').on(‘事件名称’,'子代选择器',function(){})
页面载入
$(document).ready(function(){})
$((function)(){})

each循环
li = [11,22,33]
$.each(li,function(k,v){})
$('.c1').each(function(k,v)(){})

data
$('div').data('key','value')
$('div').removeData('key')

今日内容

Bootstrap

快速开发框架   html css js 都封装好了
现在时，三个在一块 
CSS 把fonts 的东西都加载进入了  但是必须有那个文件夹 一块 ，相对引入

content = 'width=device-width，initial-scale=1' 按照设备等比缩放为 1 手机电脑适配 按照的是获取窗口大小的那个

栅格系统

0 auto 上下零边距 左右居中  
12 等份   中间两个  就是居中

container-fluid   设置了padding
虽然 100% 大小     但是两边有留白
布局：
cox-sizing:content-box   
            border-box   pading大了，content笑了，总大小是一定的

<div class="col-md-12">   // 12 块  6块在左边

媒体查询
捕获手机的宽度 设置不同的样式

media@().....
@media (min-width: @screen-sm-min) { ... }

响应式

针对不同的屏幕宽度，把网页做出不同的大小
这样就不换行了   col-md-6 换行
div class='col-md-6  col-sm-6 c1'   中等屏幕  小屏幕
或者   直接用    .col-xs-   自动调节大小（自动适配手机） 不换行

列嵌套

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9          // 文本内容
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

列偏移

col-md-4 col-md-offset-4     往右偏移4个
也是用margin做的，只不过封装好了

列排序

push-6   往右边走6个
pull-6   往左边走6个

h1 - h6 主题
b 的 p标签变大了
mark 标签自带高亮
strong  变粗
用bootstrap  给你封装了这些很多  可以查看
<p class='text-uppercase c1 c2 c3'>
基本缩略语
首字母缩略语
带下划线的文本<u>
斜体  <em> 

无序列表
list-inline
code 标签

用户输入kbd

校验状态 
has-error    红色警告
has-warning
图标
span class=''
比如 span(style = 'red'  'gly gly-ast')

控件尺寸
input 框变大变小
内在其实是给input框加高度

day51

昨日回顾

引入

bootstrap 引入

本地   link href ='bootstrap.min.css'
网络

js 前端加密   自动登陆好了   自动筛选车票  
预订车次加密了  号     反混淆  反爬虫   本来好爬  现在不好爬了  用到继承什么的去网上查  公司信息 比较重视的   一般的不用加密

基本模板

布局容器

div class = 'container' 两边有留白
div class = 'container-fluid'  布满整个窗口 宽度上 高度上一般不限定死的 网页内容多 就高

栅格系统

    class = 'row'  一行
    class = 'col-md-6'  占6列   <992时, 就用samll
又分了12列 
列排序
    超小屏幕的：col-xs-xx
    小屏幕的：col-sm-xx
    中屏幕的： col-md-
    大屏幕的：  col-lg-
列偏移
    class = 'col-md-6 offset 3'
    class = 'col-md-6 col-md-push-6'
拉回来
    class = 'col-md-6 col-md-pull-6'

列嵌套
div class=row
    div class='col-sm-9'    将上面的9列加载了12列
        div class='row'
            div class='col-xs-8-'

媒体查询

可以做响应式

表格

不想要了，自己设置覆盖他

table-striped  带条纹的
table class='table table-hover'  悬停有色

状态类

颜色：active  warnning  danger   info  successs   

表单

form 
提交
form-group  一组  has-success   都变成绿色

图标

ok  图标
feedback    反馈   ✔变色

不喜欢怎么办

自带的不好看，
怎么做，去网上搜各种
jQuery  滚轮插件  表格插件

专业的前端

他们的库很多
    别人的
    自己写好的，准备用的
    
搭建个页面分分钟的事，这是他们的基本功

iconfont

iconfont 比较强大 想要的图标都有 
class = 'iconfont icon'

fontawesome

split  
pulse   旋转

兼容性

iconfont 和 fontawesome 和 bootstrap  是相互兼容的
但是引用了多的话可能就不兼容了  如：fa  和别的fa 重了的话

组件

必须把css 和 js 文件都引入
bootstrap  以来jQuery  所以先引入jQ

分割线

drop 下拉
分割线： s

嵌套

href('#')

不刷新   JavaScript：void(0)
如果刷新就会没了 ， 不利于调试

vue的弊端

路飞学城

专业的是怎样的操作

标签页

又称 导航  table    
京东栏  商品评价  
div在下面加文字图片就成

胶囊式的标签页

nav nav-pills   

标签页固定在顶端

nav-fixed-top  
nav-fixed-buttom  

active

class= 'active'  被选中了  灰色的北京颜色

啥是锚点

mysql

bin-log   记录日志 创建文件等等都备份 必须要写的 
solo-log   
监控慢日志  
读取慢日志的条数有多少条  
搞好关系 运维  dba  有些sql语句写出来很牛

巨幕

大背景  jumbotron

模态对话框

点击就能用

轮播图

设置图片宽度   img{ width:100%;}   宽度铺满
data-interval = '1000';   轮播时间间隔

js代码
S(''){

}

作业

添加  模态对话框
编辑还没做呢？
浮动 pull-right   


快速搭页面

信息收集卡