9_bootstrap less 移动端

2022-01-06 10:35:42

chrome,firefox提供了"Device Emulation"功能，可模拟常见的各种浏览设备

android ADT或ios Xcode附带的设备模拟器，或第三方在线测试工具www.browerstack.com

Responsive Web Design：响应式/自适应网页设计

流式网格布局(Fluid：流式)；

可伸缩的图片/文字

CSS3 Media Query技术，根据浏览设备的宽高调用不同的css

①允许用户缩放：head内声明viewport

<head>

</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 请求数量，从而导致页面加载变慢

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>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

</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)告诉屏幕阅读软件使用何种发音

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>

移动设备优先：

全局样式：

@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>

<label><input type="checkbox">七天之内自动登录</label>

</div>

</form>

(2)行内表单

</div>

</form>

(3)水平表单

水平表单要求在一行中有多个元素，它是栅格系统整合表单元素——栅格系统的变种：

.container <=> .form-horizontal

.row <=> .form-group

.col-*-* <=> .col-*-*

</div>

</div>

</div>

</form>

字体图标：Glyphicons Halflings(收费)；FontAwesome

项目中引入图表字体对应文件js、css、fonts(和css、js同级目录)

@font-face{

font-family:xxx;

src:url("../fonts/文件");}

或

不要和其他组件混合使用；只对内容为空的元素起作用，定义class

在任何可以使用文字的地方都可使用，css控制样式；字体图标会继承样式

按钮组：

基本按钮组：

...同上

</div>

按钮工具栏：

...同上

</div>

尺寸：.btn-group-lg|sm|xs

两端对齐：btn-group-justified

垂直排列：btn-group-vertical不能和btn-droup组合

按钮式下拉菜单：<div class="btn-group">/*下拉菜单内容<button><ul>*/</div>

面板：上中下结构

</div>

.....

</div>

媒体对象：左中右结构

<div class="media-body"><h4 class="media-heading">Media heading</h4></div>

</div>

列表组：

...

</ul>

定制内容：给列表组加入徽章组件，它会被自动放在右边

路径/面包屑导航：

<li class="active">xxx</li> //当前页

</ol>

徽章：

标签：

label-default/primary/success/info/warning/danger：灰/蓝/绿/浅蓝/黄/红

水井/Well：class="well well-lg/sm" 嵌入inset的简单效果

巨幕：延伸整个浏览器视口来展示网站上的关键内容

进度条：

<div class="progress-bar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%

</div>

颜色：progress-bar-success/info/warning/danger

条纹：progress-bar-striped

动画：条纹+active

缩略图：

</a>

</div>

...

</div>

页头：

</div>

分页条：

<li>

</li>

...

<li>

</li>

</ul>

尺寸：.pagination-lg/sm

分页器：

<li><a href="#">Previous</a></li>

</ul>

下拉菜单：data-*

<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="#" class="alert-link">...</a>//警告框中的链接

//可关闭的警告框，不使用该标签则div.alert-dismissable不用写

</div>

折叠框：

data-toggle="collapse"

data-target="#collapseExample"

<div>

<button data-toggle="collapse in" data-target="#div2" type="button">展开collapse in</button>

....

</div>

工具提示tooltip.js

$(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="#id"

<div class="modal fade" id="id"> //半透明的背景层,fade淡入淡出

<div class="modal-dialog"> //定位/宽度

<div class="modal-content"> //背景/边框/阴影

<div class="modal-header">//头部

</div>

</div>

标签页/导航：nav+

...

</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

//默认/反色：navbar-default/inverse；相对定位：默认；固定：navbar-fixed-top|bottom；

<img src="">//商标

</a>

<a class="navbar-toggle" data-toggle="collapse" href="#id">//按钮

<span class="icon-bar"></span>//icon-bar行内块，显示，sr-only隐藏/绝对定位

</a>

</div>

</ul>

<form class="navbar-form navbar-left">//导航条表单

<div class="form-group has-feedback">//has-feedback：相对定位

<label class="sr-only" for="kw">请输入搜索关键字</label>

<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="#" class="navbar-link">非导航链接</a>

</div>

</nav>

轮播：

<div class="carousel slide" id="DIV">// data-ride="carousel" data-interval="3000"

</ol>

</div>

</div>

....

</div>

<a class="carousel-control left" href="#DIV" data-slide="prev"> //carousel-control绝对定位

<span class="glyphicon glyphicon-chevron-left"></span> //字体图标

</a>

</a>

</div>

$('.carousel').carousel({//默认

interval: 5000，

pause："hover"，

wrap：true，

keyboard：true

})

$('#myCarousel').on('slide.bs.carousel', function () {//左右标签事件

// do something…

})

导航滚动事件：

<div>

<ul class="nav nav-tabs">//导航

</ul>

</div>

</div>

</body>

body {

position: relative;

}

$('body').scrollspy({ target: '.navbar-example' })

bootlint：官方提供的检测工具，在使用了Bootstrap页面上，用于自动检测某些常见的HTML和class错误，

/*Bootlint用于检测文档中的HTML和Class错误*/

(function () {

var s = document.createElement("script");

s.onload = function () {

bootlint.showLintReportForCurrentDocument([]);

};

s.src = "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="js/modernizr.js"></script>

给IE6、7、8 追加min/max媒体查询功能：

<!--[if lte IE 8]>

<![endif]-->

常见的动态层叠样式语言：Scss/SCSS；Stylus；Less

Less：可在客户端浏览器上运行，也可在服务端上运行(Node.js、Rhino)

客户端使用：

服务器端使用：

安装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：

引入文件

data-role=”page” jqm的页面

data-role=”header” 基础page的页头

data-role=”footer” 基础page的页尾

class=”ui-content”

<a href="#page2">跳转到page2</a>

<a href="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=”#page1”跳转

class=”ui-content”

<a href="" data-rel="back">返回上一页</a>

多页面跳转

href="#id"

href="**.html"

js：$.mobile.change(‘xxx.html’)

转场transitions/跳转动画

data-transition="reverse"

js：$.mobile.changePage(‘**.html’,{‘transition’:’slide’})

返回上一页

data-rel=”back”

页面主题data-theme="a"

*.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';

}

码农公寓

相关文章