此案例例采用bootstrop开发响应式所以先简单介绍一下bootstrop
bootstrop官网https://v3.bootcss.com/,下载即可
基本模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
//IE任何版本都以当前所支持的最高级标准模式渲染,避免版本升级造成的影响
<meta http-equiv="X-UA-Compatible" content="IE=edge">
//viewport:用户网页的可视区域 content=“width”=device-width:设备区域等于可视区域大小,
//initail-scale=1初识缩放比例
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
//引入bootstrop.css文件
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
- 头部快
在992-1200显示,其他尺寸隐藏(hidden-xs hidden-sm)
- 栅格系统(2-5-2-3),而且是居中显示,所以总体结构是container>row>col-md-2/5/2/3
- 结构:
- 图标(span) 文字(span),图标(span),图片(img) 按钮(button)
- 样式:设置高 行高,文字居中
- 给每一个div设置右边框,但是最后一个不用 >div:nth-of-type(-n+3)
- 第一个div的图片需要鼠标移入,在下方显示。首先display:none 当鼠标移入(是移入a),图片显示。但是会出现一个问题:父容器设置具体高度,但是子容器撑开父容器:给子容器设置定位即可
- 利用子绝父相设置完定位,此时图片的位置会出错,因为父级是a,不会撑开整个header的高度,只是自身文字的高度,所以要把a设置为快级元素(定位的父级一般要是块级元素)
- 但是此时图片的边框重叠了,解决这个办法,只需要将他的top比父级高度少1像素
- 最后一个div是引入的button ,想要修改他的样式,需要有的放肆,找到最后一个div >div:nth-last-of-type(1) 修改样式
- 字体图标的引入:一个基类 一个图标类
- 导航条
- 导航条直接在bootstrop赋值样式即可,但是有几点需要说一下
- 移动端特有的展示效果
- Brand and toggle get grouped for better mobile display
- class=“navbar-toggle collapsed”:说明在移动端会有手风琴菜单的效果
- data-toggle=“collapse”:说明他是手风琴组件
- data-target="#bs-example-navbar-collapse-1":说明当前手风琴控制的是哪个导航(下面控制的导航id一样)
- 首先修改他的高度,如果设置固定高度,在移动端会出现溢出,所以在期中一个子元素设置撑开就可以,然后设置字体,行高,这里由于内置样式有内边距,所以要减去内边距
- 修改导航条样式:这里要注意li和active是同级关系
- li >a li>a:hover,a:focus:
- active >a,a:hover,a:focus:
- 手风琴样式不是居中问题: 内部有内边距,去掉即可
- 列表在768-992之间隐藏
- 轮播图
- 分析: w<768移动端 图片随着屏幕的缩小自适应–缩小
- img宽度为100% ,通过img标签实现
- w>=768 图片作为背景,当屏幕变宽时,会显示更多的两边区域
- background-image background-size bacground-position
- Indicators:点标记 data-target="#carousel-example-generic":当前点标记控制的是哪一个轮播图,和下面的control一样,data-slide-to=“0”:当前li指向的是那个索引的图片 每一个liem就是一个轮播图片的内容 图片说明(carousel-caption) Controls pc端上一张和下一张按钮 href="#carousel-example-generic":设置控制的是哪一张轮播图 data-slide=“prev”:作用是上一张
-由于存在标签,就会发送请求,所以通过js, 根据当前屏幕的宽度,设置移动端和pc的切换 - 用js动态创建,来添加移动端和pc端的图片,而且也不需要在不同屏幕下影藏
- 1:根据屏幕尺寸的变化,将不同尺寸的图片添加到item里面
- 2:获取当前屏幕的宽度
- 判断是非移动端还是非移动端
- 非移动端,为每一个item添加子元素,遍历
- 获取自定义属性中,存储图片的路径
- 添加非移动端的子元素
var items=$(".carousel-inner .item"); /*监听屏幕的大小改变*/ $(window).on("resize",function(){ /*1.获取当前屏幕的宽度*/ var width=$(window).width(); /*2.判断屏幕的宽度*/ if(width>=768){/*说明非移动端*/ /*为每一个item添加子元素--遍历*/ $(items).each(function(index,value){ var item=$(this); /*当前自定义属性中 存储的图片路径*/ var imgSrc=item.data("largeImage"); console.log(imgSrc); /*添加非移动端的子元素*/ item.html($('<a href="javascript:;" class="pcImg"></a>').css("backgroundImage","url('"+imgSrc+"')")); }); } else{ $(items).each(function(index,value){ var item=$(this); var imgSrc=item.data("smallImage"); item.html('<a href="javascript:;" class="mobileImg"><img src="'+imgSrc+'" alt="..."></a>'); }); } }).trigger("resize");
- trigger(“resize” ) 自动加载
- 样式部分将a设置为快,设置100%
- 信息快
- >992 三个 768-992 两个 >768 消失
- 一定要分清什么是直接子元素 紧挨着,一个也不能空
- 由于要放字体图标,所以将div改为span
- [ ]
- 预约快
- 768以下隐藏
- hidden-xs col-sm-9 col-sm-3
- 标签页
- 导航面板 内容面板
- Nav tabs 导航面板 导航条
- href="#home":眸链接,说明当前的导航项会链接到id号为home的面板上
- data-toggle=“tab”:说明他会触发一个事件,这个事件就是切换到一个指定的面板
- Tab panes 内容面板 右边变化,左边是固定
- b:加粗 下标 sub
- 栅格系统的列嵌套
- 左边缩放,左边固定 左边margin-right 右边定位
- 宝和北的添加
- 两个文字,整体,用div包 不应该破坏之前元素的布局,进行定位
- 设置div的水平居中,span的边框
- 添加工具提示
- data-toggle="tooltip :说明当前是工具提示组件 data-placement=“top” :工具提示的位置 title="Tooltip on top提示文本 span的外形 工具提示(div)选项功能的本质
- 初始化tooltip 加入jquery代码 但是提示挤在一起,需要设置父容器的宽度
- 水平滑动:子容器的宽度远远大于父容器的宽度
- 计算ul实际的宽度,找到素有ul的li元素,计算宽度和
- 滑动:找到所有的li,计算总宽度,将总宽度最后给了ul
- 新闻快
- 左中右三块
- 992以下 上中下 以上左中右
- 真正做关联的是href
- 通过媒体查询,在不同屏幕下的样式
- 微元素,必须父元素有具体的宽高值,才可以
- 合作伙伴快
- 快元素设置居中 margin:auto 如果不管用,可以将其设置为行内元素,用text-aline:center