1、响应式布局（案例）
①字体图标
②导航条
③轮播图
2、JavaScript
①JavaScript 定义
②JavaScript 组成部分
③JavaScript 三种方式引入
④JavaScript 注释
⑤JavaScript 结束符
⑥JavaScrip 输入和输出
响应式布局
bootstrap
1、使用bootstrap的注意事项、建议、总结
①在使用bootstrap ui框架的时候是不需要和以前一样写base.css来样式的初始化!!
②媒体查询+浮动 就是bootstrap实现栅格系统的本质!
③响应式布局的网站，能不能用flex布局?
Ⅰ、一般的情况下，响应式布局的网站 不建议使用 flex!(通用)
- 响应式布局包含了pc端和移动端，pc端可能会存在低版本的浏览器(ie,8,9,10)低版本的pc端的ie浏览器，会css3的支持没有那么优化-flex无效
Ⅱ、特别的情况，经理明确说明，不用管低版本的ie -就可以正常使用所学习过的css3的知识 过渡、动画、flex
导航条
at-navbar{
background-color: transparent;
border: none;
}
元素设置高度
Ⅰ、在最外层来设置2
Ⅱ、由里面来撑开
Ⅲ、 优先级 权重的问题 Ⅳ、只要是使用第三方的ui框架
- 90%代码人家写好
- 10%代码 需要我们自己去重置去调试去调整
Ⅴ、认真去对待调试!!! 开发人员 必须要熟练的技术!!
Ⅵ、旧项目使用的boostrap的版本和新的项目的bootstrap版本不一致才导致 效果没有对应上!!
小结
1、旧的项目 用的旧的 bootstrap
2、新的项目用的新的bootstrap
3、我们没有自己改动过代码但是效果却对应不上!!找到了原因引入的第三方库的版本不相同导致!!
4、 从中学习到了什么
①调试错误的范围 更加大!
②老师演示的调试错误的方法 已经出现错误的情形 你感觉 工作中 会不会出现!
5 如何解决?
①直接使用旧的bootstrap的版本(暂时使用1方案)
② 建议老板 使用新的版本-接受有一些布局细节和旧版本不一致的情绪
③使用新版本，哪些不一样具体再去挨个微调(不推荐，可能工作量会特别大)
2、栅格系统（重要！！！）
栅格系统是bootstrap封装好的一种技术(媒体查询)，更加方便的方式来让我们使用
1、做引入框架的铺垫
①引入样式
②引入 jquery.js
③引入 bootstrap.js
2、写栅格代码
①先容器container(版心)或者 container-fluid(版心)
②再写行 row
③根据屏幕的种类 以及每一列占的分数。
3、懂得基本步骤 那么bootstrap的最核心的地方
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-rounded" src="./uploads/pro1.jpg" alt="">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-rounded" src="./uploads/pro2.jpg" alt="">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-rounded" src="./uploads/pro3.jpg" alt="">
</div>
<div class="col-md-3 col-sm-6 col-xs-12">
<img class="img-rounded" src="./uploads/pro4.jpg" alt="">
</div>
</div>
</div>
3、字体图标的运用
<body>
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
<span class="glyphicon glyphicon-object-align-vertical" aria-hidden="true"></span>
<span class="glyphicon glyphicon-bitcoin" aria-hidden="true"></span>
<span class="glyphicon glyphicon-yen" aria-hidden="true"></span>
<span class="glyphicon glyphicon-baby-formula" aria-hidden="true"></span>
</body>
4、导航条
<nav id="at-navbar" class="navbar navbar-default navbar-fixed-top">
/* 导航条是否充满整个窗口 */
<div class="container">
<!-- 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="#">
<img src="./images/logo.png" alt="">
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul id="atnav" class="nav navbar-nav navbar-right">
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">GitHub</a></li>
<li><a href="#">Tweb Conf</a></li>
<li><a href="#">SuperStar</a></li>
<li><a href="#">Web前端</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
</div>
</nav>
5、轮播图
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- 小圆点 -->
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- 轮播的图片 -->
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="./images/1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="./images/1.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="./images/2.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- 滑动箭头 -->
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
JavaScript
1、定义
①是什么？（编程语言）
是一种运行在客户端（浏览器）的编程语言，实现人机交互效果
②作用：
Ⅰ、网页特效 (监听用户的一些行为让网页作出对应的反馈)
Ⅱ、表单验证 (针对表单数据的合法性进行判断)
Ⅲ、数据交互 (获取后台的数据, 渲染到前端)
Ⅳ、服务端编程 (node.js)
2、JavaScript 组成部分
①ECMAScript:
- 规定了js基础语法核心知识。
比如：变量、分支语句、循环语句、对象等等
②Web APIs :
Ⅰ、DOM （页面标签）
操作文档，比如对页面元素进行移动、大小、添加删除等操作
Ⅱ、BOM （浏览器刷新）
操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等
注意 DOM属于BOM
权威网站：MDN
3、JavaScript 三种方式引入
①内部JavaScript(写小demo)
直接写在html文件里，用script标签包住
规范：script标签写在上面
拓展： alert(‘你好，js’) 页面弹出警告对话框
<body>
<script>
alert('你好,弹出窗口')
</script>
</body>
②外部JavaScript(工作常用)
代码写在以.js结尾的文件里
语法：**通过标签html
<body>
<!-- 注意：引入js外部文件，就不要写内部js，书写错误，无效 -->
<script src="./js/外部js书写.js"></script>
</body>
③内联JavaScript(不推荐)
代码写在标签内部
<body>
<!-- 不常用 编写代码的体验不好，很容易写错， 了解一下即可 -->
<!-- 引号只能：双引号里面放单引号或单引号里面放双引号，不能同时使用同一种 -->
<button onclick="alert('过万啦')">点击我 我就月薪过万</button>
<button onclick='alert("也过万啦")'>点击我 我就月薪过万</button>
<!-- 点击div也可出现弹窗 -->
<div onclick='alert("也过万啦")'>我来啦</div>
</body>
4、JavaScript 注释
①单行注释
符号：//
作用：//右边这一行的代码会被忽略
快捷键：ctrl + /
②多行注释
符号：/* */
作用：在/* 和 */ 之间的所有内容都会被忽略
快捷键：shift +alt+a
<body>
<script>
//单行
// ctrl + / " // "
/* 多行 */
// shift+alt+a " /**/ "
// alert("呵呵你好")
</script>
</body>
5、JavaScript 结束符
英文状态下的分号";" 看自己习惯，可写可不写
为了风格统一，要写结束符就每句都写，要么每句都不写（按照团队要求.）
工作中有工具统一自动帮我们做格式化
<script>
/*
现代好的 前端项目的开发流程
1 对代码统一做好公共的设置
这个设置 会强制帮我们来格式化 这个团队的代码
比如 ： alert( "你好" ) => 自动被格式化 alert("你好")
比如 ： alert("你好") => alert("你好");
比如 ： alert("你好"); => alert("你好")
2 综上所述 在企业开发中 有工具强制帮我们做统一的格式化 你加不加都无所谓 不影响
*/
</script>
6、JavaScrip 输入和输出
①输出：（三种）
Ⅰ、alert() ；
-
页面弹出警告对话框
Ⅱ、document.write() ；
-
向body内输出内容
-
如果输出的内容写的是标签，也会被解析成网页元素
Ⅲ、console.log() 常用
- 控制台输出语法，程序员调试使用
②输入： prompt("请输入您的的姓名：")；
弹出一个对话框获取用户的输入
语法：
Ⅰ、输入获取输出内容
<script>
// 获取用户的名称
username = prompt("请输入你的姓名");
// 打印出来 用户的名称
document.write(username);
alert(username);
console.log(username);
</script>
Ⅱ、输入获取多个输出
<script>
// 1 你叫什么名字
username = prompt('你叫什么名字');
// 2 你家住哪里
address = prompt('你家住哪里');
// 3 你喜欢吃什么
foods = prompt('你喜欢吃什么');
// 4 你喜欢自己一个听音乐吗
music = prompt('你喜欢自己一个听音乐吗');
// 5 你喜欢运动
sports = prompt('你喜欢运动');
// 输入一下 到网页中
// console.log(username);
// console.log(address);
// console.log(foods);
// console.log(music);
// console.log(sports);
// 能不能在一行上直接输出 不要换行
// 使用 一个 + 表示连接
console.log(username + address + foods + music + sports);
</script>
控制台输出
