微金所项目-响应式开发文档

此案例例采用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

微金所文件下载地址
https://gitee.com/Big_Cat-AK-47/wjs-bootstrap

微金所项目-响应式开发文档相关推荐

微网通联一键认证iOS开发文档
一.前置条件请开发者提供应用的基本信息,包括:服务器IP地址,应用名称,Android (应用签名,应用包名),IOS(Bound ID),供我方在运营商报备. 微网会输出开发者,每个应用对接的Ap ...
开源轻量级办公系统Sandbox介绍以及配套开发文档连载
1.Sandbox介绍 Sandbox是一个基于django框架开发的轻量级办公平台,主要模块有:权限控制.资产(库存)管理.设备管理.客户信息管理和工单流程管理,其目的在于建立一套规范化.统一化和清 ...
M5(项目)-01-尚硅谷谷粒商城项目分布式基础篇开发文档
M5(项目)-01-尚硅谷谷粒商城项目分布式基础篇开发文档分布式基础篇一.环境搭建各种开发软件的安装虚拟机: docker,mysql,redis 主机: Maven, idea(后端),Vs ...
移动端web总结（二）——微金所项目总结
移动端微金所项目知识点总结 1,媒体查询:使用媒体查询能针对不同屏幕区间设置不同的布局和样式语法: @media screen and (max-width: 768px) and (min-wid ...
BootStrap---day02、03微金所项目
BootStrap---day02.03微金所项目前两天没有更新,主要是因为做项目做得没有心情来写博客了(真的很菜),今天的任务都做完了,就来写一写这几天使用BootStrap写项目的总结和心得. ...
传智播客微金所项目实战
微金所项目实战(出处:传智播客) 1. 搭建Bootstrap页面骨架及项目目录结构 ├─ /weijinsuo/ ··················· 项目所在目录 └─┬─ /css/ ···· ...
DotNet 项目开发文档的自动生成和相关工具的使用
在 VS.Net 的 IDE 中对C#提供了一些可以自动生成的 XML 注释,使用这些注释可以对代码中定义的对象进行说明.注解:通过设置项目属性,在生成项目时,可以让VS.Net自动的将这些注释信息输 ...
Struts2增删改查 myeclipse开发文档加项目源码及eclipse开发项目源码
Struts2增删改查 myeclipse开发文档加项目源码及eclipse开发项目源码 git里只有myeclipse开发的项目文档及项目github下载地址:https://github.com ...
数据库字典 - 微擎开发文档
数据库字典 - 微擎开发文档参考文档 account 平台账号表(公众号.小程序.PC等) 字段名数据类型说明 acid int(10) 主键 uniacid int(10) 所属帐号uniac ...

微金所项目-响应式开发文档

微金所项目-响应式开发文档相关推荐

最新文章

热门文章