首页 > 代码库 > 9_bootstrap less 移动端
9_bootstrap less 移动端
chrome,firefox提供了"Device Emulation"功能,可模拟常见的各种浏览设备
android ADT或ios Xcode附带的设备模拟器,或第三方在线测试工具www.browerstack.com
Responsive Web Design:响应式/自适应网页设计
流式网格布局(Fluid:流式);
可伸缩的图片/文字
CSS3 Media Query技术,根据浏览设备的宽高调用不同的css
①允许用户缩放:head内声明viewport
<head>
<meta name="viewport" content="width=device-width,intial-scale=1,user-scalable=no">
</head>
viewport:视口,
属性:
width/height=数值
device-width/height:视口宽度/高度
initial-scale:初始时的缩放倍率
minimum-scale:允许的最小缩放倍率
maximum-scale:允许的最大缩放倍率
user-scalable:是否允许用户手动缩放,取值1/0/yes/no
②不使用绝对宽度:width:60%/auto;
③相对大小字体:em,rem:em 的实际大小是相对于其上下文的字体大小而言
<body>标签设置文字大小为100%,给其他文字都使用相对单位em;现代浏览器的默认文字大小都是16 像素:
body{font:normal 100% Helvetica,Airal,sans-serif;} //body字体大小100%=1em=16px
x{font-size:1.5em;}
④流式布局,浮动定位:布局用的各个区块的位置都是浮动的float:right/left;
⑤图片自适应:给图片设置阈值img{width:50%;max-width:100%;}
⑥CSS3 Media Query技术:根据浏览设备类型、特性不同加载不同css语句
mediaQuery:指css中可以获得浏览设备特性,如分辨率、方向、色彩深度等
1)link导入css文件,会增加用于页面渲染的HTTP 请求数量,从而导致页面加载变慢
<link rel="stylesheet" href="http://www.mamicode.com/xxx.css" media="screen and width=400px">
<link rel="stylesheet" href="http://www.mamicode.com/xxx.css" media="screen and (width:400px) and (max-device-width:600px)">
media="all/screen/handheld/print/tty/tv/projection/braille" 等
浏览网页的设备类型:所有/彩色电脑屏幕/手持设备/文档打印/电传打字机/电视/幻灯/盲文
语法:width=xxx或(width:xxx);多个and连接;
@media 设备1 only (选取条件) not (选取条件) and (设备选取条件) ,设备2/设备2() {sRules}
device-width/height:显示屏幕/触觉设备宽高
max/min-device-width/height
width/height:渲染窗口宽高
max/min-width/height=xxx:<=xxx或>=xxx生效
resolution:分辨率
orientation(portrait|lanscape):设备手持方向横/竖向
aspect-ratio/device-aspect-ratio:画面/设备比例
color/color-index:对象颜色/颜色列表
2)css的@media规则:css片段中有选择的执行,建议
pc:@media screen and(min-width: 992px){}
pad:@media screen and (min-width: 768px) and (max-width: 991px) {}
phone:@media screen and (max-width: 767px) {}
真正的响应式布局,可以完全避免使用boot
bootstrap:中文网:http://www.bootcss.com/
由动态css语言less写成,
移动设备优先,
基于jQuery
不支持Windows下的Safari
解决浏览器兼容性:
html5shiv.min.js文件:解决IE8浏览器支持HTML5的新元素
respond.min.js文件:解决IE8浏览器支持css Media Query
基本模板:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>...</title>
<link rel="stylesheet" href="http://www.mamicode.com/css/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="http://www.mamicode.com/js/html5shiv.min.js"></script>
<script src="http://www.mamicode.com/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<script src="http://www.mamicode.com/jquery.min.js"></script>
<script src="http://www.mamicode.com/js/bootstrap.min.js"></script>
</body>
</html>
win10 Edge:取代了IE
html5shiv.js:用于让老IE识别HTML5新标签的JS
respond.js:让IE支持响应式网页(CSS3 Media Query)的JS
<html lang="zh-cn"> lang属性指定当前网页所用的自然语言,如zh、zh-cn、zh-tw、zh-hk、zh-sg、en、en-us、en-uk、ja、de等,有两个用途:(1)让浏览器的翻译功能明确当前页面的自然语言 (2)告诉屏幕阅读软件使用何种发音 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> Cross User Agent Compatible,跨浏览器兼容性,指定使用哪种版本的IE内核, edge表示使用可用的最新版本的内容。 IE6 IE7 7/6 IE8 8/7/6 ---------------------------- IE9 9/8/7/6 IE10 10/9/8/7/6 IE11 11/10/9/8/7/6 ---------------------------- win10 Edge: 取代了IE |
html5shiv.js: 由@afarkas @jdalton @jon_neal @rem编写的一个用于让老IE识别HTML5新标签的JS |
respond.js: 由Scott Jehl编写的一个用于让老IE支持响应式网页(CSS3 Media Query)的JS |
css目录:bootstrap.css该框架的样式文件;bootstrap-theme.css主题文件
css Reset:x{padding:0;margin:0;}
box-sizing=content-box/border-box:设置元素盒模型
content-box:默认,宽度高度为内容框,宽度高度之外绘制元素的内边距、边框
border-box:宽度高度设置边框盒尺寸,内边距、边框在之内绘制
HTML5文件类型:bootstrap某些元素和属性需要html5
<!DOCTYPE html>
<html lang="zh-CN">.....</html>
移动设备优先:
<meta name="viewport" content="width=device-width,intial-scale=1">
全局样式:
@font-family-base、@font-size-base、@line-height-base变量作为排版的基本参数
@link-color为所有链接设置颜色,并当链接处于:hover状态才添加下划线
布局容器:
container定宽容器
container-fluid变宽容器
:before,:after防止子元素margin越界和浮动影响
按钮:.btn+.btn-*
.btn-default默认样式
.btn-danger/warning/success/info/primary颜色
.btn-lg/sm/xs尺寸
.btn-block块,width100%
图片:
<img src="" class="img-responsive" alt="Responsive image">:响应式图片
图片形状:img-rounded、img-circle、img-thumbnail、img-responsive
文本:
对齐:text-left/center/right/justify/nowrap
大小写:text-lowercase/uppercase/capitalize
颜色:text-default/primary/success/info/warning/danger:灰/蓝/绿/浅蓝/黄/红
列表:
ul/ol类:list-unstyled、list-inline;
dl类:dl-horizontal
表格:
基本表格.table
条纹状:.table-striped
带边框:.table-bordered
紧缩:.table-condensed
鼠标悬停:.table-hover
响应式表格,用于table的父元素:.table-responsive
状态类
浮动:.pull-left/right、.center-block、.clearfix清除浮动
显示:.show、.hidden、.invisible
背景:bg-default/primary/success/info/warning/danger
四种屏幕尺寸:lg,mg,sm,xs
大型PC屏幕(Large-lg);w>1200px;
普通PC屏幕(Medium-md):992px=<w<1200px
PAD屏幕(Small-sm):168=<w<991px;
PHONE屏幕(ExtraSmall-xs):w<767px
栅格布局:渲染速度快,底层用div+css实现
随着屏幕/视口尺寸的增加,系统会自动分为最多12列
使用:
最外层必需是div.container固定宽度或container-fluid宽度100%;栅格布局可以嵌套
容器中放置div.row,div.row中放置div.col,内容放置于div.col中
只有column可以作为row的直接子元素
列分为4组:col-lg-* col-md-* col-sm-* col-xs-* *为1-12数字,表示其跨越的范围
列向右偏移:调整某一列出现的位置,影响后续的列
col-offset-lg-1/2
列排序:跳转某一列出现的位置,但不影响后续的列,用于临时改变列位置
col-md-8 col-md-push-4 推,向右推动4列
col-md-4 col-md-pull-8 拉,向左推动8列
注意不同屏幕的列的适用范围:对更大屏幕有效,对更小屏幕无效
xs:xs/sm/md/lg适用
sm:sm/md/lg
md:md/lg
lg:lg
可以同时声明不同屏幕列宽:<div class="col-xs-12 col-sm-6">
可以指定在某屏幕下隐藏hidden-lg/...
可以自定义修改各类样式
表单:
单行输入框/多行文本域:form-control
多选和单选框:内联多选和单选框
下拉列表:form-control
提示文字:help-block
HTML5规范里指定checkbox、radio要用label包起来
(1)默认表单
<form>
<div class="form-group">
<label for="id">文字</label>
<input class="form-control" id="id">
<span class="help-block">提示文字</span>
</div>
<div class="form-group">
<div class="checkbox">
<label><input type="checkbox">七天之内自动登录</label>
</div>
</div>
</form>
(2)行内表单
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="id">文字</label>
<input class="form-control" id="id">
</div>
</form>
(3)水平表单
水平表单要求在一行中有多个元素,它是栅格系统整合表单元素——栅格系统的变种:
.container <=> .form-horizontal
.row <=> .form-group
.col-*-* <=> .col-*-*
<form class="form-horizontal">
<div class="form-group">
<div class="col-*-*">
<label for="id">文字</label>
</div>
<div class="col-*-*">
<input class="form-control" id="">
</div>
<div class="col-*-*">
<span class="help-block">提示文字</span>
</div>
</div>
</form>
字体图标:Glyphicons Halflings(收费);FontAwesome
项目中引入图表字体对应文件js、css、fonts(和css、js同级目录)
@font-face{
font-family:xxx;
src:url("../fonts/文件");}
或
<link href="http://www.mamicode.com/css/bootstrap.css" rel="stylesheet">
<span class="glyphicons glyphicons-*"> </span>
不要和其他组件混合使用;只对内容为空的元素起作用,定义class
在任何可以使用文字的地方都可使用,css控制样式;字体图标会继承样式
按钮组:
基本按钮组:
<div class="btn-group">
<button type="button" class="btn btn-default">...</button>
...同上
</div>
按钮工具栏:
<div class="btn-toolbar">
<div class="btn-group">...</div>
...同上
</div>
尺寸:.btn-group-lg|sm|xs
两端对齐:btn-group-justified
垂直排列:btn-group-vertical不能和btn-droup组合
按钮式下拉菜单:<div class="btn-group">/*下拉菜单内容<button><ul>*/</div>
面板:上中下结构
<div class="panel-group">
<div class="panel panel-default/primary/success/info/warning/danger">
<div class="panel-heading">主体头部</div>
<div class="panel-body">主体部分</div>
<div class="panel-footer">尾部</div>
</div>
.....
</div>
媒体对象:左中右结构
<div class="media">
<div class="media-left"><img class="media-object" src="http://www.mamicode.com/..." alt="..."></div>
<div class="media-body"><h4 class="media-heading">Media heading</h4></div>
<div class="media-right">....</div>
</div>
列表组:
<ul class="list-group">
<li class="list-group-item list-group-item-success/info/warning/danger"></li>
...
</ul>
定制内容:给列表组加入徽章组件,它会被自动放在右边
<h4 class="list-group-item-heading">
<p class="list-group-item-text">
路径/面包屑导航:
<ol class="breadcrumb">
<li><a href="http://www.mamicode.com/#">xxx</a></li>
<li><a href="http://www.mamicode.com/#">xxx</a></li>
<li class="active">xxx</li> //当前页
</ol>
徽章:
<a href="">名<span class="badge">数量</span></a>
<span class="label label-default">标签</span>
label-default/primary/success/info/warning/danger:灰/蓝/绿/浅蓝/黄/红
水井/Well:class="well well-lg/sm" 嵌入inset的简单效果
巨幕:延伸整个浏览器视口来展示网站上的关键内容
<div class="jumbotron">内容</div>
进度条:
<div class="progress">
<div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%
</div>
</div>
颜色:progress-bar-success/info/warning/danger
条纹:progress-bar-striped
动画:条纹+active
缩略图:
<div class="row">
<div class="col-xs-6 col-md-3">
<a class="thumbnail">
<img src="http://www.mamicode.com/...">
<div class="caption">内容</div>
</a>
</div>
...
</div>
页头:
<div class="page-header">
<h1>.......<small>.....</small></h1>
</div>
分页条:
<ul class="pagination">
<li>
<a aria-label="Previous"> «</a>
</li>
<li><a>1</a></li>
...
<li>
<a aria-label="Next"> »</a>
</li>
</ul>
尺寸:.pagination-lg/sm
分页器:
<ul class="pager">
<li><a href="http://www.mamicode.com/#">Previous</a></li>
<li><a href="http://www.mamicode.com/#">Next</a></li>
</ul>
下拉菜单:data-*
<div class="dropdown|dropup">
<button data-toggle="dropdown" type="button">触发元素</button>
<span class="caret"></span>
<ul class="dropdown-menu">//隐藏菜单
<li class="dropdown-header">...<li>标题
<li class="divider"><li>分割线
<li class="disbled">....<li>禁用
</ul>
</div>
js-api:$("button").dropdown(‘toggle‘) data和js-api选一
events:$("button").on(事件,f(){})
事件:
show.bs.dropdown
shown.bs.dropdown
hdie.bs.dropdown
hideen.bs.dropdown
警告框:
<div class="alert alert-success/info/warning/danger alert-dismissable">//淡入淡出:.fade.in
<a href="http://www.mamicode.com/#" class="alert-link">...</a>//警告框中的链接
<span class="close" data-dismiss="alert">×</span>
//可关闭的警告框,不使用该标签则div.alert-dismissable不用写
</div>
折叠框:
data-toggle="collapse"
data-target="#collapseExample"
<div>
<a data-toggle="collapse" href="http://www.mamicode.com/#div1">收起</a>
<button data-toggle="collapse in" data-target="#div2" type="button">展开collapse in</button>
<div class="collapse" id="div1">内容</div>
<div class="collapse" id="div2">内容</div>
....
</div>
工具提示tooltip.js
<p data-toggle="tooltip" data-placement="left/top/right/bottom" title="内容">...</p>
$(function () {$(‘[data-toggle="tooltip"]‘).tooltip()}) //data和函数都必须调用
弹出框:
<p data-toggle="popover" data-placement="bottom" data-content="内容">点击弹出框</p>
title="标题"
$(function(){$(‘[data-toggle="popover"] ‘).popover();}) //data和函数都必须调用
模态框:子窗体不关闭,父窗体不能获得用户的操作焦点
<button type="button" class="btn" data-toggle="modal" data-target="#id"></button>//或a标签的href="http://www.mamicode.com/#id"
<div class="modal fade" id="id"> //半透明的背景层,fade淡入淡出
<div class="modal-dialog"> //定位/宽度
<div class="modal-content"> //背景/边框/阴影
<div class="modal-header">//头部
<p class="modal-title"></p>
<span class="close" data-dismiss="modal">×<span>
</div>
<div class="modal-body">主体</div>
<div class="modal-footer">尾部</div>
</div>
</div>
</div>
标签页/导航:nav+
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab">...</a><li>
<li><a data-toggle="tab">...</a><li>
...
<div class="tab-content"><div class="tab-pane active" id="home"></div></div>
</ul>
胶囊式标签页:nav nav-pills
垂直标签页:nav nav-pills nav-stacked
两端对齐:nav nav-tabs nav-justified
js-api:$("#mytab a:last").tab("show")
$(‘#myTab a‘).click(function (e) {
e.preventDefault()
$(this).tab(‘show‘)
})
导航条:navbar
<nav class="navbar navbar-default">
//默认/反色:navbar-default/inverse;相对定位:默认;固定:navbar-fixed-top|bottom;
<div class="container-fluid">
<!--导航条头部,包含商标+汉堡包-->
<div class="navbar-header">
<a class="navbar-brand">
<img src="">//商标
</a>
<a class="navbar-toggle" data-toggle="collapse" href="http://www.mamicode.com/#id">//按钮
<span class="icon-bar"></span>//icon-bar行内块,显示,sr-only隐藏/绝对定位
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
</div>
<!--导航条折叠部分,包含菜单、表单、文字...排列:navbar-lef|right-->
<div class="navbar-collapse collapse" id="id">
<ul class="nav navbar-nav">
<li class="active"><a>...</a></li>
<li><a>...</a></li>
</ul>
<form class="navbar-form navbar-left">//导航条表单
<div class="form-group has-feedback">//has-feedback:相对定位
<label class="sr-only" for="kw">请输入搜索关键字</label>
<input type="text" class="form-control" placeholder="输入关键字" id="kw">
<span class="glyphicon glyphicon-search form-control-feedback"></span>//绝对定位
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<button type="button" class="btn btn-default navbar-btn">导航条按钮</button>
<p class="navbar-text">导航条文本</p>
<a href="http://www.mamicode.com/#" class="navbar-link">非导航链接</a>
</div>
</div>
</nav>
轮播:
<div class="carousel slide" id="DIV">// data-ride="carousel" data-interval="3000"
<!-- 序号标志 -->
<ol class="carousel-indicators">
<li data-target="#DIV" data-slide-to="0" class="active"></li>
<li data-target="#DIV" data-slide-to="1"></li>
<li data-target="#DIV" data-slide-to="2"></li>
</ol>
<!-- 轮播广告的内部:广告本身+每个广告上的文字 -->
<div class="carousel-inner">
<div class="item active">
<img src="http://www.mamicode.com/..." >
<div class="carousel-caption">内容</div>
</div>
<div class="item">
<img src="http://www.mamicode.com/..." >
<div class="carousel-caption">内容</div>
</div>
....
</div>
<!-- 上/下一张按钮 -->
<a class="carousel-control left" href="http://www.mamicode.com/#DIV" data-slide="prev"> //carousel-control绝对定位
<span class="glyphicon glyphicon-chevron-left"></span> //字体图标
</a>
<a class="carousel-control right" href="http://www.mamicode.com/#DIV" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
$(‘.carousel‘).carousel({//默认
interval: 5000,
pause:"hover",
wrap:true,
keyboard:true
})
$(‘#myCarousel‘).on(‘slide.bs.carousel‘, function () {//左右标签事件
// do something…
})
导航滚动事件:
<body data-spy="scroll" data-target=".NAV">
<div>
<div class="NAV">
<ul class="nav nav-tabs">//导航
<li class="active"><a href="http://www.mamicode.com/#fat">111</a></li>
<li><a href="http://www.mamicode.com/#mdo">222</a></li>
</ul>
</div>
<div data-spy="scroll" data-target="#NAV">
<h4 id="fat">111</h4>
<p>11</p>
<h4 id="mdo">222</h4>
<p>22</p>
</div>
</div>
</body>
body {
position: relative;
}
$(‘body‘).scrollspy({ target: ‘.navbar-example‘ })
bootlint:官方提供的检测工具,在使用了Bootstrap页面上,用于自动检测某些常见的HTML和class错误,
<script>
/*Bootlint用于检测文档中的HTML和Class错误*/
(function () {
var s = document.createElement("script");
s.onload = function () {
bootlint.showLintReportForCurrentDocument([]);
};
s.src = "http://www.mamicode.com/js/bootlint.js";
document.body.appendChild(s)
})();
</script>
插件函数调用:
定义:jQuery.fn.max=function(){}
调用:$("li").max()
bootstrap插件函数调用:
js方式调用:$("a").dropdown()
data-*属性方式调用:<a data-toggle="dropdown"></a>
底层实现:$(‘[data-toogle="dropdown"]‘).click(
function(){$(this).dropdown();
})
无障碍Accessible阅读:WAI-ARIA标准
role="" HTML5标签,指定当前元素的实际网页角色;
aria-*=""
Modernizr是一个用于检测浏览器功能的开源JavaScript,功能检测
解决老版本的html和css兼容:<script src="http://www.mamicode.com/js/modernizr.js"></script>
给IE6、7、8 追加min/max媒体查询功能:
<!--[if lte IE 8]>
<script src="http://www.mamicode.com/js/respond.min.js"/></script>
<![endif]-->
常见的动态层叠样式语言:Scss/SCSS;Stylus;Less
Less:可在客户端浏览器上运行,也可在服务端上运行(Node.js、Rhino)
客户端使用:
<link rel="stylesheet/less" href="http://www.mamicode.com/style.css">html引入样式文件
<script src="http://www.mamicode.com/less.js"></script>引入编译程序
服务器端使用:
安装nodejs解释器
下载less编译程序
在命令运行less转换程序;或者把less转换程序配置为WebStorm中的"文件监视器"
cmd:node e:/npm/node_modules/less/bin/lessc e:/1.less e:/1.css
解释器 目标js文件 源文件 目标文件
node e:/npm/lessc.cmd e:/1.less e:/1.css
webstorm中配置fileWatcher,让它所有的less文件的修改,立即调用上诉命令行程序进行编译
Tools——file watchers——+less program:...\npm\lessc.cmd 则编写less时自动编译
注释://不会转换到生成的css文件中 /**/会被转换到生成的css文件
运算,任何数字、颜色、字符串等都可以进行运算:#888/4
变量:@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111; //变量值:所有样式的值
混合/属性集合:
①.bordered{...} 技巧:.bordered(){}//less样式,和css样式区分
②.bordered(@x:0,@y:0,@blur:1px,@color:#000){
border:@arguments;
border-radius:@blur+1px;}
.box{.bordered(2px,5px);}
③.bordered(@x) when (@x<3px){
border:@w solid #aaa;}
.bordered(@x)when(@x>=3px){...}
.box(.bordered(2px);)
嵌套:
body{
color:#aaa;
.nav{font-size:12px;}
>.logo{ //>子代选择器
width:300px;
&:hover{text-decoration:none;}//body>.logo:hover
}
}
函数:
image-width/height("URL"):img{width:image-width(url);}
rgba(red,green,blue,alpha);
hsl(hue,saturation,lightness);
darken(color,num); 颜色变深20%后的值 darken(color.20%)
lighten(color,num); 颜色变浅/亮
ceil(num) 向上取整ceil(970px/3);
floor(num)
max(n1,n2...)
文件导入:
@import "xx.less/xx";
@import "xx.css";不推荐;css也可以导入,也不推荐
WebApp:网页应用,网页版微信,网页版轻应用,本质java web
jQM:jQuery Mobile Sencha Touch
NativeApp:原生应用,借助SDK(Software Development Kit)提供的原生组件进行编程生成的安装包(应用)
apk ipa:android iOS
Hybrid App:混合应用,介于WebApp和NativeApp直接的app,兼具原生开发良好的用户交互体验的优势、WebApp跨平台开发的优势
phoneGap(基于HTML、CSS、JS的快速开发平台)+jQM
安卓开发环境:
下载并安装jdk
配置java环境变量
下载adt(Android Developer Tools)
eclipse:
新建WebApp:new——android application project——package name:com.tarena.demo01
创建模拟器(虚拟机)android virtual device manager:
New——名字avd name:text;安卓版本device:4.0 wvga;SD容量sd card:size:512(M)
Details:查看信息
Start:启动
默认打开页面:res/layout/activity_main.xml
AndroidManifest.xml包名,版本代码,版本名称
permissions使用:add-name-uses permissions用户权限-name-android permission internet
http://www.androd...工具
优秀的开源项目:
errors:
解决方案:在packageExplorer中,查找X符合定位工厂,找到具体是哪个文件出了错,
打开文件,定位具体哪一行出了错误
字体:window-preferences-general-appearance-colors....-java-java editor-edit-courier new
src——com.xxx.xxx——xxxx.java配置,使WebView加载html页面:
package com.example.demo03;
import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.view.Menu;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//创建WebView组件
//alt+/自动补全 会自动import依赖
WebView wv=new WebView(getApplicationContext());
//加载页面
wv.loadUrl("file:///android_asset/index.html");
//设置wv,让它执行js
wv.getSettings().setJavaScriptEnabled(true);
wv.setWebChromeClient(new WebChromeClient(){
@Override
@Deprecated
public void onConsoleMessage(String message,int lineNumber,
String sourceID){
super.onConsoleMessage(message, lineNumber, sourceID);
Log.e("test","日志为"+message+"行号为"+lineNumber);
}
});
//将webNiew组件显示在内容视图中
setContentView(wv);
// setContentView(R.layout.activity_main);
}
// @Override
// public boolean onCreateOptionsMenu(Menu menu) {
// // Inflate the menu; this adds items to the action bar if it is present.
// getMenuInflater().inflate(R.menu.main, menu);
// return true;
// }
}
AndroidManifest.xml配置:
配置主题:取消标题栏android:theme="@android:style/Theme.NoTitleBar" >
原始主题(默认):android:theme="@android:style/Theme.NoTitleBar" >
Permissions配置CAMERA和INTERNET
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.CAMERA"/>
android功能目录:
src 存储的java(逻辑)
gen 自动生成的(R.java)
assets 将不希望被流处理的文件放到,将前端代码放到此文件夹
bin 存放的生成的应用安装包
libs 将封装好的jar包放到此目录
res 资源文件(图标/图片/布局文件/菜单/变量)
AndroidManifest.xml版本号的配置、权限的配置、activity
jQM:
引入文件
<link rel="stylesheet" href="http://www.mamicode.com/jqm/jquery.mobile-1.4.5.css">
<script type="text/javascript" src="http://www.mamicode.com/js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="http://www.mamicode.com/jqm/jquery.mobile-1.4.5.js"></script>
data-role=”page” jqm的页面
data-role=”header” 基础page的页头
data-role=”footer” 基础page的页尾
class=”ui-content”
<a href="http://www.mamicode.com/#page2">跳转到page2</a>
<a href="http://www.mamicode.com/222.html" data-transition="reverse">点击跳转到222.html</a>
<button onclick="$.mobile.changePage(‘222.html‘)">点击跳转到222.html</button>
data-role=”page” id=”page2” id可用a href=http://www.mamicode.com/”#page1”跳转
class=”ui-content”
<a href="" data-rel="back">返回上一页</a>
多页面跳转
href="http://www.mamicode.com/#id"
href="http://www.mamicode.com/**.html"
js:$.mobile.change(‘xxx.html’)
转场transitions/跳转动画
data-transition="reverse"
js:$.mobile.changePage(‘**.html’,{‘transition’:’slide’})
返回上一页
data-rel=”back”
页面主题data-theme="a"
stackoverflow.com
如何申请云服务器,获得免费的域名:
新浪云账号登陆,新建Web应用,申请免费二级域名
登陆Web应用,上传自己网站代码,
使用PC/手机远程访问云服务器应用
微信开发:https://open.weixin.qq.com
用途:移动应用调用微信开发接口,网站调用,公众账号(服务号/订阅号/企业号);
9大接口:语音识别接口,客服接口,OAuth2.0网页授权接口,生成带参数的二维码接口,获取用户地理位置接口,获取关注者列表接口,用户分组接口,上传下载多媒体文件接口
商业化微信开发要求必须使用一级域名,测试时可用SAE提供免费二级域名
二级域名:
邮箱——微博账号
——申请主机空间SAE:Sina App Engine支持MySQL、PHP的Web应用(http://sae.sina.com.cn)
——应用->代码管理Git/SVN工具上传代码(需安装客户端SVN)
——WebStorm检出服务器上项目文件
——设置域名解析服务器,SQL连接第一个参数改为网络sql地址
——访问二级域名
一级域名(商业化):
注册公众平台账号https://mp.weixin.qq.com
——设置公众号,JS接口安全域名(域名必须是一级域名且通过ICP备案)
——申请开发者后,获得AppID(应用ID)和AppSercret(应用秘钥,唯一)
微信网页开发工具包JS-SDK(拍照,选图,语音,位置,分享,扫一扫,卡券,支付等功能)
使用:绑定域名——引入JS文件——通过config接口注入权限验证配置——ready接口处理成功验证——error接口处理失败验证
地理位置接口:
使用微信内置地图:
wx.openLocation({
latitude:0, //纬度,浮点数,90~-90
longitude:0, //经度,浮点数,180~-180
name:‘‘, //位置名
address:‘‘, //地址详情说明
scale:1, //地图缩放级别,整形值,1~28,,默认最大
infoUrl:‘‘ //在查看位置界面底部显示的超链接,可点击跳转
});
获取地理位置接口:
wx.getLocation({
type:‘wgs84‘,
success:function(res){
var lat=res.latitude; //纬度,90~-90
var lon=res.logitude; //经度,180~-180
var speed=res.speed; //速度,以m/s计
var accuracy=res.accuracy; //位置精度
}
});
图像接口:
拍照/手机相册中选图接口:
wx.chooseImage({
count:1,
sizeType:[‘original‘,‘compressed‘], //原图/压缩图
sourceType:[‘album‘,‘camera‘], //相册/相机
success:function(res){
var localIds=res.localIds;
}
});
上传图片接口:
wx.uploadImage({
lovalId:‘‘, //需要上传的图片的本地ID
isShowProgressTips:1, //默认为1,显示进度提示
success:function(res){
var serverId=res.serverId; //返回图片的服务器端ID
}
});
小技巧:
box-sizing:border-box/content-box;高度和宽度,在高度宽度内绘制内边距,边框/默认,在高度宽度之外绘制元素的内边距、边框
js控制Transition动画:
css3 transition,css3 Keyframes,js/jQuery1/2定时器动画,requestAnimationFrame技术jQuery3
transition: box-shadow 250ms linear;
@import{}
@font-face { /*CSS指令:创建一个新的字体*/
font-family: ‘FontAwesome‘;
src: url(‘fonts/fontawesome-webfont.ttf‘),url(‘fonts/fontawesome-webfont.eot‘),url(‘fonts/fontawesome-webfont.ttf‘);
}
使用服务器端字体:FontAwesome
#box {
font-family: "FontAwesome";
color: red;
font-size: 10em;
}
box.innerHTML = ‘\uf002 \uf122‘;
#control-container span {
font-family: "FontAwesome";
}
#control-container span:before {
content: ‘\f002‘;
}
9_bootstrap less 移动端