7 Jun 18 Bootstrap
7 Jun 18
一、今日面试题
编写Python脚本，分析xx.log文件，按域名统计访问次数
xx.log文件内容如下：
https://www.sogo.com/ale.html
https://www.qq.com/3asd.html
https://www.sogo.com/teoans.html
https://www.bilibili.com/2
https://www.sogo.com/asd_sa.html
https://y.qq.com/
https://www.bilibili.com/1
https://dig.chouti.com/
https://www.bilibili.com/imd.html
https://www.bilibili.com/
输出：
4 www.bilibili.com
3 www.sogo.com
1 www.qq.com
1 y.qq.com
1 dig.chouti.com
方法一
import re
with open('xx.log','r',encoding="utf-8") as f:
data=f.read()
ret=re.findall(r'https://(.*?)/.*',data)
dic={}
for i in ret:
if i not in dic:
dic[i]=1
else:
dic[i]+=1
ret2=sorted(dic,key=lambda x:dic[x],reverse=True)
for k in ret2:
print(dic[k],k)
方法二
import re
from collections import Counter
with open('xx.log','r',encoding='utf-8') as f:
data=f.read()
ret=re.findall(r'https://(.*?)/.*?',data)
dic=Counter(ret)
ret2=sorted(dic.items(),key=lambda x:x[1],reverse=True)
for k,v in ret2:
print(v,k)
二、复习绑定事件的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绑定事件的方式</title>
</head>
<body>
<button >b1按钮</button>
<input type="button" >
<input type="button" >
<input type="button" >
<input type="button" >
<script src="jquery-3.3.1.min.js"></script>
<script>
function foo() {
console.log(123);
}
// 使用JS绑定事件
document.getElementById("b2").onclick = function () {
foo();
};
// jQuery绑定事件的方式1
$("#b3").click(function () {
foo();
});
// jQuery绑定事件的方式2
$("#b4").on("click", function () {
foo();
});
// jQuery绑定事件的方式3 事件委托
$("body").on("click", "#b5", function () {
foo();
});
</script>
</body>
</html>
三、作业讲解（编辑重点：data的用法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>今日作业</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
}
.modal {
position: absolute;
left: 50%;
top: 50%;
height: 300px;
400px;
background-color: white;
z-index: 100;
margin-top: -150px;
margin-left: -200px;
}
.hide {
display: none;
}
</style>
</head>
<body>
<button >新增</button>
<table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Egon</td>
<td>喊麦</td>
<td>
<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>2</td>
<td>Alex</td>
<td>吹牛逼</td>
<td>
<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">
</td>
</tr>
<tr>
<td>3</td>
<td>苑昊</td>
<td>不洗头</td>
<td>
<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">
</td>
</tr>
</tbody>
</table>
<div class="cover hide"></div>
<div class="modal hide">
<p><input type="text" ></p>
<p><input type="text" ></p>
<p>
<button >提交</button>
<button >取消</button>
</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
// 定义一个隐藏模态框的函数
function hideModal() {
$(".cover, .modal").addClass("hide");
}
function showModal() {
$(".cover, .modal").removeClass("hide");
}
$("#add").click(function () {
// 点击新增按钮要做的事儿
// 1. 弹出模态框
showModal();
});
$("#submit").click(function () {
// 点击提交按钮要做的事儿
// 1. 取值，取模态框中用户填写的值
let username = $("#username").val();
let hobby = $("#hobby").val();
// 2. 隐藏模态框
hideModal();
// 需要作判断
// 如果是新增操作
// $().data("tr") 返回值如果是undefined就表示 不是编辑操作
if ($(this).data("key") === undefined){
// 3. 创建tr标签， 追加td， 要拼接序号和用户填写的信息
let trEle = document.createElement("tr");
let td1 = document.createElement("td");
td1.innerText = $("table tr").length;
$(trEle).append(td1);
let td2 = document.createElement("td");
td2.innerText = username;
$(trEle).append(td2);
let td3 = document.createElement("td");
td3.innerText = hobby;
$(trEle).append(td3);
let td4 = document.createElement("td");
td4.innerHTML = `
<input type="button" value="编辑" class="edit">
<input type="button" value="删除" class="delete">
`;
$(trEle).append(td4);
// 4. 追加到table tbody标签的最后
$("tbody").append(trEle);
} else {
// 如果是编辑操作
// 拿到用户编辑之后的值 ，要将编辑的当前行指定位置的数据更新一下
let $editEle = $(this).data("key");
// 从.data()中取出之前保存的 那一行
// 更新用户编辑之后的值
$editEle.eq(1).text(username);
$editEle.eq(2).text(hobby);
// 将key对应的值 清空
$(this).removeData("key");
}
// 清空
$("#username, #hobby").val("");
});
$("#cancel").on("click", function () {
// 点击取消
// 1. 把模态框隐藏
hideModal();
// 2. 把之前填写的清空掉
$("#username, #hobby").val("");
});
// 事件委托
$("table").on("click", ".delete", function () {
// 删除按钮点击要做的事儿
// 1.更新序号...
// 把当前行后面的所有tr的第一个td的值-1
let $currentTr = $(this).parent().parent();
let $nextAllTr = $currentTr.nextAll();
for (let i = 0; i < $nextAllTr.length; i++) {
let n = $($nextAllTr[i]).children().first().text();
$($nextAllTr[i]).children().first().text(n - 1);
}
// 2. 把当前点击按钮所在的行 删掉
$currentTr.remove();
});
// 点击编辑按钮要做的事儿
$("table").on("click", ".edit", function () {
// 弹出模态框
showModal();
// 取到 点击的编辑按钮 那一行的值
// this --> 当前点击的编辑按钮
let $currentTds = $(this).parent().parent().children();
let name = $currentTds.eq(1).text();
let hobby = $currentTds.eq(2).text();
// 填充到模态框的input中
$("#username").val(name);
$("#hobby").val(hobby);
// 把当前编辑的这一行jQuery对象 保存到.data("tr", $())里面
$("#submit").data("key", $currentTds)
})
</script>
</body>
</html>
四、今日内容（https://v3.bootcss.com/css/）
1、Bootstrap 安装的两种方式
- 从http://www.bootcss.com上下载v3.3.7生产环境的Bootstrap，解压看到三个文件夹：可以只留css中的bootstrap.min.css，js中的bootstrap.min.js，以及fonts；并将这三个文件夹放到本地目录下。用的时候将上述两个文件拖入本地html文件中
这种操作为本地操作，不需要互联网
- 在cdn(content delivery network) 中（www.bootsdn.cn）中找到相应链接，将链接导入本地html文件中
该操作需要互联网支持
注意：bootstap中的js是基于jQuery的，所以在石油Bootstrap中的js前必须先导入jQuery
2、为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加viewport 元数据标签。
<meta name="viewport" content="width=device-width, initial-scale=1">
推荐加入html template中
3、Normalize.css(为了增强跨浏览器表现的一致性（e.g.兼容不同浏览器margin不同）)： 一个CSS 重置样式库。
4、布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。
A、.container 类用于固定宽度并支持响应式布局的容器。（有留白）
B、.container-fluid 类用于100% 宽度，占据全部视口（viewport）的容器。
5、栅格系统
A、一个row分为12份
B、如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。
C、正常浏览器：.col-md-*
D、手机： .col-xs-*
E、列偏移：.col-md-offset-*
F、嵌套列：为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。
G、列排列：.col-md-push-* .col-md-pull-*
H、响应式列重置 .clearfix
<div class="col-md-6 col-xs-6 red"></div>
6、媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
}
.c {
100%;
height: 200px;
}
.c1 {
}
/* 正常显示为红色，如果满足以下媒体查询显示为绿色*/
@media screen and (max- 600px) {
.c1 {
}
}
</style>
</head>
<body>
<div class="c c1"></div>
</body>
</html>
7、常用样式（用的时候control c + control v）
https://v3.bootcss.com/css/
8、登陆示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<script src="jquery-3.3.1.min.js"></script>
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<style>
.login-box {
margin-top: 100px;
}
body {
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-4 login-box">
<h1 class="text-center">Log in First</h1>
<form class="form-horizontal">
<div class="form-group has-error">
<label for="inputEmail3" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" class="form-control" >
<span class="help-block">username must be filled</span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Log in</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script>
$("input").on("focus", function () {
$(this).next().text("").parent().parent().removeClass("has-error");
})
</script>
</body>
</html>
9. 图标
A、自带
B、font awesome：http://www.fontawesome.com.cn/