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
快速搭頁面
信息收集卡
