前言：本文是自己在学习课程中的课程笔记，这里用来温故知新的，并非本人原创。

开发工具

1、记事本，Editplus,... ...

2、Sublime，Dreamweaver

3、Webstorm

========================================

一、什么是响应式网页

Responsive Web Page,响应式网页/自适应网页，即一个页面既可以在PC浏览器中浏览，也可以在手机/平板中浏览。并且配合不同设备有不同的响应结果

响应式网页的特点：

1、页面上的图片和文字要随着屏幕尺寸发生改变

屏幕分辨率：1211px ，图像：1200px

2、页面的布局随着屏幕尺寸而发生改变

二、如何测试响应式网页

1、使用真实的物理设备

优势：测试结果真实可靠

不足：设备太多，成本太大，测试任务量大

方式：

1、搭建本地服务器，部署项目

2、移动终端设备与服务接入相同网络

2、使用第三方模拟设备

优势：无须添加更多设备

不足：效率偏低

3、使用浏览器自带的设备模拟器(Emulator)

优势：功能丰富

不足：... ...

三、视口 - Viewport

IOS中的Safari 最早引入的概念

1、视口：

移动设备中，浏览器里显示网页的一块区域(PC端会忽略)

2、对于响应式网页，设置视口的信息：

1、视口的宽度：要与设备宽度一致

2、视口的缩放倍率：设置为1，即不缩放

3、视口的手动缩放：不允许缩放网页

3、在HTML中指定视口信息：

1、视口的宽度：width

取值：

1、device-width

2、具体数值

2、视口的初始缩放倍率 : initial-scale

取值：缩放倍数

1 : 原始大小

3、是否允许视口手动缩放 : user-scalable

取值：

1/0/yes/no

<metaname="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

以上代码，移动端必备!!!

四、如何编写响应式网页 (重点)

1、必须声明视口(已解决)

2、文字使用相对尺寸(em,rem)，尽量不用绝对尺寸(px)

CSS中的1px 并不代表真实物理设备的 1px

比如：iPhone4以后，屏幕为 Retina 屏幕，屏幕大小没有变化，

但分辨率提升一倍，

iphone4 ：屏幕 320 * 480

分辨率：640 * 960

em : 父元素字体大小倍数

rem : 根元素(html)字体大小倍数

3、容器元素使用相对尺寸(%,auto)，尽量不用绝对尺寸(px)

4、图片使用相对尺寸(%,auto)，尽量不用绝对尺寸(px)

img{

width:50px;/*不推荐*/

width:50%;推荐使用，指定父容器的占比，可以无限缩放

max-width:50%;推荐使用，指定父容器的占比，最大不能超过图像原

始大小}

5、页面元素使用流式布局

流式布局特点：

1、元素默认靠向容器的左上方

2、横向排列，排列不下则换行

方法1：float

方法2：display:inline-block;

6、响应式网页都要使用CSS3 Media Query技术 - 最重要

ex:

1、浏览器宽度 w < 768，背景色红色

2、浏览器宽度 768<= w <=991 背景色绿色

3、浏览器宽度 w > 991 背景色粉色

五、CSS3 Media Query

作用：可以根据不同的媒体类型以及特性执行不同的CSS

Media ：媒体，指浏览网页设备的类型如：screen(PC/Pad/Phone),tv,tty

语法：

通过 @media 规则进行声明

@media MEDIA-TYPE and|not|only (MEDIA-FEATURE)

MEDIA-TYPE:媒体类型

取值：

1、all，默认值，所有设备

2、screen：电脑屏幕，智能手机，平板电脑

3、tv ：电视设备

MEDIA-FEATUER:媒体特性

取值：

1、width ：指定浏览器窗口宽度大小

2、min-width ：指定浏览器窗口宽度最小值

3、max-width ：指定浏览器窗口宽度最大值

ex：

1、在屏幕下，宽度在 767以内，执行操作

@media screen and (max-width:767px){}

2、在屏幕下，宽度在768~991之间，执行操作

@media screen and (min-width:768px) and (max-width:991px){}

@media的用法

1、有选择性的执行某个外部CSS文件

不足：

即使不满足当前设备条件的CSS文件也会被请求，但不会生效

2、有选择性执行CSS片段中的内容

在样式表中

@media screen and (max-width:767px){

选择器{属性:值;}

}

常见屏幕尺寸：

1、超小屏幕(Extra Small : xs)

w <= 767

例如：手机屏幕

2、小型屏幕(Small : sm)

768 <= w <= 991

例如：pad

3、中型屏幕(Medium : md)

992 <= w <= 1199

例如：电脑屏幕

4、大型屏幕(Large : lg)

w >= 1200

例如：分辨率较大的电脑屏幕

一、Twitter Bootstrap

官网：http://getbootstrap.com

中文官网：http://www.bootcss.com

重点 bootstrap.css - 提供了上千个class

依赖于JS库 - jQuery

Bootstrap 分为 5 部分

1、起步

2、全局CSS样式

3、组件

4、JS插件

5、定制

二、Bootstrap 第一步 - 起步

基本模板：

1、<html lang="zh-cn">

指定当前文档的基础语言,zh-cn,zh-tw,jp,en

作用：

1、为浏览器的自动翻译功能指定语言基础

2、为读屏软件指定基础发音

2、<meta name="viewport"> 必须

3、<meta http-equiv="x-ua-compatible" content="IE=edge">

x-ua-compatible

Cross UserAgent Compatible

跨(IE)浏览器兼容性

作用:指定用哪个 IE的内核进行页面渲染

IE=6 : 指定用IE6内核渲染页面

IE=7 : 指定用IE7内核渲染页面

IE=8 :

IE=9

...

IE=edge : 采用IE最新版内核渲染页面

4、两个JS

1、html5shiv.min.js

第三方的JS，自调函数，用于让老IE(IE8及以下)支持HTML5新

标记,header,footer,aside

2、respond.min.js

第三方的JS，自调函数，用于让老IE(IE8及以下)支持CSS3媒体

查询技术 - 响应式必备

通过头部引用Hack 判断是否为 IE8以及以下的浏览器

<!--[if lt IE 9]>

<![endif]-->

5、两个JS

1、jQuery.js 引入到页面中(先)

2、bootstrap.js 引入到页面中(后)

建议：尽量将以上两个文件放在页面最底端引入

三、Bootstrap 第二步 - 全局CSS样式

bootstrap.css 内容分为两部分

1、CSS Reset

*{box-sizing:border-box;}

html{font-size:10px;}

body{margin:0;font:... ...;}

h1{}...h6{}

p{}

2、上千个 class

.btn .btn-default .btn-danger

.container

.container-fluid

... ...

四、Bootstrap 默认将屏幕分成四大类

1、大型PC屏幕(lg) : w >= 1200px

2、中型PC屏幕(md) : 992px <= w <= 1199px

3、小型PAD屏幕(sm): 768px <= w <= 991px

4、超小型PHONE屏幕(xs):w <= 767px

五、Bootstrap 提供的两种容器

1、定宽容器

在不同大小的设备上提供不同的width固定值

类：.container

lg : width:1170px

md : width:970px

sm : width:750px

xs : width:100%

2、变宽容器

在任何设备中，宽度都是 100%

类：.container-fluid

width:100%;

六、Bootstrap 第二步 - 全局css样式-按钮

.btn

.btn-default 白底深色字

.btn-danger/success/warning/info/primary

.btn-lg/sm/xs

.btn-block 块级按钮

七、Bootstrap 第二步 - 全局css样式-列表

.list-unstyled 不带标识的列表

.list-inline 行内列表

.dl-horizontal 定义列表

八、Bootstrap 第二步 - 全局css样式-图片

.img-rounded ?

.img-circle ?

.img-thumbnail ?

.img-responsive ?

九、Bootstrap 第二步 - 全局css样式-表格

.table

.table-bordered 带边框表格

.table-striped 隔行变色表格

.table-hover 待悬停效果的表格

.table-responsive 响应式表格（为表格父元素添加）

十、Bootstrap 第二步 - 全局css样式-文本 & 排版

1、文本颜色相关

.text-danger/success/warning/info/primary

.bg-danger/success/warning/info/primary

2、文本大小写

.text-uppercase/lowercase/capitalize

3、文本对齐方式

.text-left/center/right/justify

十一、Bootstra 第二步 - 全局css样式 - 栅格布局

页面中可以实现布局的技术

1、table 布局

好处：简单，容易控制

不足：效率低

2、div + css

好处：效率高

不足：灵活，不易控制

3、栅格布局

好处：效率高，容易控制，实现响应式

不足：没有

栅格布局实际上就是由div组成的table样式的响应式结构

使用方法：

1、栅格布局系统的最外层，必须是bootstrap提供的容器

.container 或 .container-fluid

2、允许在容器中放置若干行 div.row

每行中最多等分为12列

3、行中放置 div.col 即列，每列都需要指定宽度 1/12,2/12

语法：

</div>

4、列根据适用屏幕分成四中类型

.col-xs-*

.col-xs-1 : 在超小屏幕中，占一列的宽(8.33%)

.col-xs-2 : 在超小屏幕中，占两列的宽(16.66%)

... ...

.col-xs-12 : 在超小屏幕中，占12列的宽(100%)

.col-sm-*:

在小型屏幕中所占列宽数

.col-md-*

在中型屏幕中所占列宽数

.col-lg-*

在大型屏幕中所占列宽数

5、列偏移数量

每个列都可以指定向右偏移几列位置

.col-xs-offset-n : 在 xs 下，当前列向右偏移 n列的距离

.col-sm-offset-n : sm 下，向右偏移n列

.col-md-offset-n :

.col-lg-offset-n :

6、栅格布局系统可以嵌套

.container>.row>.col-*-*>.row>.col-*-*

</div>

7、适用于不同屏幕的列的class(xs/sm/md/lg)可以兼容更大屏幕

</div>

.col-xs-* : 适用于 xs/sm/md/lg

.col-sm-* : 适用于 sm/md/lg

.col-md-* : 适用于 md/lg

.col-lg-* : 适用于 lg

大屏幕class在小屏幕中，永远是垂直显示

8、可以在一个div中指定在不同屏幕下的宽度占比

在 xs 中占9列宽

在 sm 中占6列宽

在 md 中占3列宽

9、指定列在特定屏幕下不显示

.hidden-lg : 在lg下隐藏

.hidden-md : 在md下隐藏

一、全局样式 - 表单

遵循HTML5的规范,共三种

1、默认表单(垂直排列)

.form-group : 定义表单控件组

.form-control ：定义表单控件

.control-label ：定义控件对应的label

.help-block ：定义提示文本

2、行内表单

为 <form> 添加 class="form-inline"

其他同上

3、水平表单

水平表单 = 表单 + 栅格布局系统

栅格：

最外层：.container / .container-fluid

行：div.row

列：div.col-*-*

水平表单栅格系统

最外层：form.form-horizontal / .container

行：div.form-group / div.row

列：div.col-*-*

</div>

或

<label>

</div>

</div>

</div>

二、Bootstrap 第三部分 - 组件

1、下拉菜单

</select>

1、外层必须是 .dropdown/.dropup 或 position:relative;

2、内层：为 <button> 或 <a>

class="dropdown-toggle"

data-toggle="dropdown" ：切换内容的显示和隐藏

3、内层：

内容 <ul> 或 <div>

class="dropdown-menu"

li.divider : 分割线效果

li.disabled : 禁用菜单项

li.dropdown-header:标题

2、导航

1、标签页式导航

</li>

</ul>

li.active : 默认被激活

li.data-toggle="tab" ：允许切换并且指定切换方式

3、图标字体

在页面中，显示为图标，本质上是文字，可以设置字体，颜色，大小，阴影。。。。

Web程序中常用的图标字体：

1、Glyphicons 收费

2、FontAwesome 675个免费

由于客户端不具备 bootstrap 中的图标字体，所以使用自定义的图标字体，必须声明

在服务器端做以下操作：

***.css

/*声明字体*/

@font-face{

font-family:"名称";//自定义名称

src:url('地址 ');//图标字体文件所在路径

}

/*对使用字体图标的选择器进行声明*/

.glyphicon{

font-family:"名称";

}

使用方法：

必须保证是空元素

练习：

创建多个按钮，在每个按钮上显示一个小图标

首页(房子),配置(齿轮),刷新,定位，购物车，放大镜，发邮件，照相机，播放相关(播放，暂停，上一曲，下一曲)

4、按钮组

将多个按钮放在一个组中(btn-group)

1、基本按钮组

</div>

2、将一组 .btn-group 组合进一个 .btn-toolbar(按钮工具栏)

</div>

3、按钮组尺寸

为 .btn-group 增加 .btn-group-* 类设置尺寸

4、按钮组的嵌套

在一个 btn-group 中嵌套另一个 btn-group

5、两端对齐按钮组

.btn-group .btn-group-justified

6、垂直放置的按钮组

.btn-group-vertical

5、警告框

允许将任意字符与可选的关闭按钮组合在一起的结构

所有警告框依赖于 .alert

.alert

.alert-success

.alert-danger

...

1、允许关闭的警告框

.alert-dismissible

lorem

</div>

2、警告框中的链接

6、面包屑导航/路径导航

.breadcrumb

<li>

</li>

<li>

</li>

</ul>

7、分页条

.pagination

.active : 被激活的页码

<li>

</li>

<li>

</li>

</li>

<li>

</li>

<li>

</li>

</ul>

8、分页器

.pager

</ul>

9、标签

所有的标签都依赖于 .label

.label

.label-default

.label-danger

.label-success

...

10、徽章

.badge

11、巨幕

.jumbotron

12、页头

允许为标题元素增加适当的空间,与其他元素有一定的间隔

.page-header

13、Well (水井)

.well

14、进度条

外层：.progress

内层：

.progress-bar

.progress-bar-danger

.progress-bar-success

...

.progress-bar-striped

.active : 被激活的

通过给内层元素增加 style="width:50%" 增加宽度

15、缩略图

.thumbnail

.caption

<img>

</div>

16、媒体对象

<img>

</div>

形容的文本

</div>

<img>

</div>

17、列表组

ul : class="list-group"

li : class="list-group-item"

18、面版

呈现头部主体尾部结构的组件

</div>

主体内容

</div>

脚注内容

</div>

一、组件 - 导航条

1、基本导航条

1、向 nav 元素添加 class.navbar .navbar-default

有需要的话，允许添加 div.container

2、向 nav 元素中添加 div.navbar-header ，内部允许包含 class 带

有 .navbar-brand <a>元素

3、允许向导航条中添加链接列表，只需要添加 class.nav .navbar-nav 的

列表即可

2、导航条中的表单

导航中的表单不适用bootstrap中默认class

使用的时 .navbar-form (具备垂直对齐效果),配合 .navbar-left

/ .navbar-right

3、导航条中的按钮

class.navbar-btn 允许向不在form中的button(a)增加样式(垂直居中)

4、导航条中的文本

普通文本的话，需要增加 class .navbar-text 属性来保证格式

5、组件的对齐方式

允许通过 .navbar-left 实现左浮动

允许通过 .navbar-right 实现右浮动

6、导航栏的固定

不会随着滚动条发生滚动，一直在可视化区域中

固定在页面顶端：.navbar-fixed-top

固定在页面底端：.navbar-fixed-bottom

注意：最好为body设置内边距至少 50 px

二、JS Plugin

Bootstrap 基于 jQuery ，在jQuery 基础上提供了十几个插件函数，每个

都是一个独立的JS文件,可以一次性引入全部的JS操作 - bootstrap.js

每个插件函数都有两种调用方式：

1、data-* 方式调用

2、JS编程方式

手动编写JS代码完成行为的调用

$("选择器") : 在 Javascript(jQuery) 中获取页面指定选择器的元素

$("#id")

$(".class")

$("div p")

下拉列表：

$("选择器").dropdown();

</script>

三、警告框

父元素 class ="alert alert-danger alert-dismissible"

关闭：<button class="close" data-dismiss="alert"></button>

JS :

$("关闭选择器").click(function(){

$(this).alert("close");

});

四、按钮

1、设置按钮的操作文本

为按钮元素添加 data-loading-text="显示的文本"

<button class="btn btn-default" data-loading-text="请稍后....">文本

</button>

//点击按钮时，改变按钮的文字为 data-loading-text

$("按钮选择器").click(function(){

$(this).button("loading");

});

2、设置单选按钮 / 复选框

1、将若干单选按钮 / 复选框放到 btn-group中，为btn-group增加属性 data-toggle="buttons"

五、工具提示

1、为元素增加

data-toggle="tooltip"

data-palcement="top/right/bottom/left"

title="提示的文本"

2、配合 JS 代码

$("选择器").tooltip();

六、弹出框

1、为元素增加

data-toggle="popover" //指定为弹出框方式

data-placement="top/right/bottom/left"//方向

data-content="弹出框内容区域的文本"

title="弹出框的标题";

2、配合 JS 代码如下:

$("选择器").popover();

七、标签页

1、为导航组件里面 a 增加：

1、data-toggle = "tab"

2、href="#对应元素内容的ID"

2、创建内容组

1、class 为 tab-content

2、在内容组中增加对应显示的内容模块

1、增加id属性

2、增加 class="tab-pane active"

ex:

</li>

</ul>

....

</div>

八、模态对话框

模态对话框：父窗口中弹出一个子窗口，只要子窗口不关闭，父窗口就无法获得输入的焦点

模态对话框由两部分组成：

1、触发元素，通常 a / button 组成

2、模态框元素

// 提供了半透明的遮罩层

// 提供了宽度，高度，定位

//背景色，边框，倒角，阴影

</div>

显示主题内容

</div>

脚注信息

</div>

九、折叠效果

1、触发元素

2、被折叠元素

... ...

</div>

特殊效果：

1、手风琴(Accordion)

Accordion = 面板组(panel-group) + 折叠插件

一、组件 - 导航栏

1、基本导航栏

Text Or Img

</a>

</div>

</nav>

2、导航栏中的表单

3、导航栏中的按钮

4、导航栏中的独立文本

5、内容对齐方式

navbar-left / navbar-right

6、导航栏固定

顶部：.navbar-fixed-top(body给至少50px上内边距)

底部：.navbar-fixed-bottom

二、JS-插件(Plugin)

1、行为调用

1、data-*

2、$("选择器").dropdown();

2、警告框

</div>

3、按钮

1、点击按钮改变文本及状态

$("button").click(function(){

$(this).button("loading");

//业务逻辑处理

$(this).button("reset");

});

2、单选按钮和复选框

</button>

</div>

4、工具提示

1、为元素增加

data-toggle = "tooltip"

data-placement="top/right/bottom/left"

title="提示的文本"

2、配合 JS 代码:

$("[data-toggle='tooltip']").tooltip();

5、弹出框

1、伪元素增加

data-toggle="popover"

data-placement="top/..."

title="弹出框的标题"

data-content="内容"

2、配合 JS 代码

$("[data-toggle='popover']").popover();

6、标签页

1、为导航组件 a 标记增加

data-toggle="tab"

href="#对应的内容元素ID"

2、增加内容组元素 <div class="tab-content">

3、为内容增加

ID :

class ：.tab-pane .active

7、模态对话框

弹出一个子窗口，如果不处理的话无法进行其他操作

1、触发元素

属性：

data-toggle="modal"

href="#对应打开的元素ID"

2、模态框元素

</div>

8、折叠(Collapse)

1、触发元素

<button data-target="#折叠元素的ID"

data-toggle="collaps"></button>

2、折叠元素

内容

</div>

折叠组件的扩展应用：

1、Accordion

面版组(panel-group) + 折叠插件

<div>

<a href="#展开元素的ID" data-parent="panel-group的

ID"></a>

</div>

*********************************************************************

一、折叠

1、响应式导航条

当屏幕尺寸大于 768px 时候，可以正常显示出所有的内容，当屏幕尺寸小于 768px 的时候，一部分内容就会隐藏，通过点击弹出

响应式导航条由两部分组成

1、class .navbar-header

用于显示 navbar-brand 和折叠点击按钮

.navbar-brand : 定义brand内容

折叠按钮：

屏幕大于 768px 时不显示

屏幕小于 768px 时显示

class .navbar-toggle 完成以上操作

2、class .navbar-collapse

被折叠的内容，当屏幕大于 768px 正常显示

屏幕尺寸小于768px，隐藏通过按钮点击完成展开显示

二、广告轮播（Carousel）

1、基本

<img>

</div>

2、指定轮播时间

<img>

</div>

3、带说明文本的轮播

<img>

</div>

4、带方向按钮的轮播

</a>

</a>

5、带圆点导航的轮播

<li class="active"

data-target="#Carousel的ID"

data-slide-to="0"></li>

</ul>

=====================================================================

Less 和 Bootstrap 定制

一、样式语言的分类

1、静态样式语言：CSS

可以被浏览器直接解析处理；但CSS并不是合格的语言，缺少了基本编程的要素，如：变量，运算符，函数。。。。由于不是动态的，所以导致了CSS的可维护性差

2、动态样式语言 :

如：Less , Sass/SCSS , Stylus ...

不可以被浏览器直接解析处理；必须经过编译(Compile)得到CSS文件后，才能使用。会具备语言的基本要素：变量。。。极大的提高的CSS代码的可维护性

二、Less语言

官网：http://lesscss.org

中文网：http://less.bootcss.com

Less是一本 CSS预处理语言，它扩充了CSS，在纯静态的CSS基础上增加了一部分内容如：变量，混合(Mixin) ... 对静态CSS完全支持100%兼容

在Web项目中使用Less的两种方式：

1、在客户端浏览器中编译Less - 不推荐使用

1、编写 xx.less文件

2、编写 xx.html，引入 xx.less;再引入less.js

3、浏览器访问 xx.html 会自行下载 xx.less,less.js文件，并且在客户端进行编译转换成 xx.css

2、在服务器端编译less - 推荐使用

1、编写 xx.less

2、在服务器端搭建Less编译器，把xx.less 转换为 xx.css

3、再编写 xx.html 直接引入 xx.css 文件即可

三、搭建 Less 服务器端编译环境 - 重点&乱点

Less 编译器实际上是由 Javascript 编写的

1、安装独立的JS解释器 - node.exe

命令行中：执行 node -v 显示：0.12.4 / 4.4.7

2、安装 Less 编译器程序 - less.js

确保： lessc.cmd 文件存在即可

3、在控制台中测试 less 转换为 css

在 lessc.cmd 文件位置处打开控制台

输入：lessc.cmd D:\1.less > D:\1.css

4、在WebStrorm中配置 FileWatchers(文件监视器)

由 WS 自动检测 less 文件的编写与更改，自动进行编译得到 css 文件

配置 FileWatchers

WS --> File --> Settings --> Toos --> FileWatchers --> 添加选择 Less --> 指定 lessc.cmd 文件地址即可

四、Less语法

1、Less 完全支持 CSS 语法

2、Less 支持多行注释和单行注释，只有多行注释能编译到css中

多行:/* */

单行：// 注释内容

3、Less 支持变量(Variable)

变量：在 less 中可以变化的数据

语法：@变量名:值;

ex:

1、@jd_color:#e4393c; //颜色值

2、@border_width:5px; //数值

3、@base_font:"微软雅黑";//字符串

4、@border:1px solid #ddd;

使用变量：

变量是作为值，出现在css属性名称后的

@变量名;

ex:

#top{

color:@jd_color;

border-color:@jd_color;}

4、Less 变量可以使用运算符

+,-,*,/,%

% : 取余数

5%2 结果：1

2%5 结果：2

5、Less 中支持在一组样式中混入另一种样式(Mixin)

选择器1{ ... }

选择器2{ ... ;选择器1;...;}

最终：选择器2 中会包含该选择器1定义好的样式

1、带参数的混合：

声明选择器的时候，允许使用参数来表示暂时不确定的数据，最

终在调用时，要将具体的数值传递进来

语法：

选择器1(@参数名1,@参数名2){

widht:@参数名1;

height:@参数名2;

}

2、使用带参的混合写法:

选择器2{

background:#fff;

选择器1(值1,值2);

}

6、嵌套规则

#top{}

#top p{}

#top p span{}

在less中，允许在一个选择器内再声明另一个选择器，以便完成父子结

构或后代结构

语法：

选择器1{

...;

选择器2{

...;

}

最终编译成CSS的结果为：

选择器1{

...

}

选择器1 选择器2{

...

}

声明子代嵌套:

选择器1{

...

>选择器2{

....

}

7、Less中提供的功能函数

1、lighten(@color,20%) 返回一个变亮的颜色值(颜色减淡)

ex:

color:lighten(#e4393c,20%);

2、darken(@color,30%) 返回一个变暗的颜色(颜色加深)

3、image-width("xx.jpg") 返回指定图片的宽度

4、image-height("xx.jpg")返回指定图片的高度

5、ceil(@num) 对数字向上取整

ceil(55.787865235) --> 结果为：56

6、floor(@num)对数字向下取整

floor(55.787865235) --> 结果为： 55

7、percentage(@num) 把小数转换为%数字

8、@import 功能

在 Less 中的@import ，在服务器端将多个less文件的内容整合到一个 less 文件中

语法：

xx.less

@import "xxx.less";

五、Bootstrap 定制

【温故知新】——Bootstrap响应式知识点复习的更多相关文章

模拟Bootstrap响应式网格系统
Bootstrap响应式(适应于不同的终端设备).Bootstrap栅格系统是利用百分比把视口等分为12个,然后利用媒体查询,设置float属性使之并列显示一.媒体查询媒体查询包含一个可选的媒体类 ...
Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
bootstrap响应式网页设计的9条基本原则！
bootstrap响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难.没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手. 为了desktop和mobile单 ...
bootstrap响应式前端页面
技术:HTML+CSS+JS+bootstrap 概述这套代码响应式前端页面基本写完了,适合初学前端的同学,里面主要运用了HTML+CSS布局和动画,js逻辑较少,页面都是静态,未接入接口.响应 ...
Bootstrap响应式布局
Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...
关于禁用bootstrap响应式解决方法
前几天接到一个任务,用bootstrap框架写几个静态页面,由于长时间专注于后台开发,所以,花费了3天时间,才终于写完了页面,其中,来回的修改,把遇到的问题说一下. 用bootstarp做完页面后,组 ...
Bootstrap 响应式表格
响应式表格通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px).当在大于 768px 宽的大型设备上查看时,您 ...
【温故知新】——HTML5重要知识点复习
前言:本文是自己在学习课程中的课程笔记,这里用来温故知新的,并非本人原创. 一.HTML5新特性 —— 十个新特性:凌乱 (1)新的语义标签 (2)增强型表单(表单2.0) (3)音频和视频 (4)C ...
Bootstrap响应式栅格系统的设计原理
1.历史背景 Bootstrap是Twitter的工程师Mark Otto和Jacob Thornton开发的一套供内部使用的UI框架,于2011年开源.2012年发布的第二版中新增了12列栅格系统和 ...

随机推荐

Leetcode 522.最长特殊序列II
最长特殊序列II 给定字符串列表,你需要从它们中找出最长的特殊序列.最长特殊序列定义如下:该序列为某字符串独有的最长子序列(即不能是其他字符串的子序列). 子序列可以通过删去字符串中的某些字符实现,但 ...
利用python爬取58同城简历数据
利用python爬取58同城简历数据利用python爬取58同城简历数据最近接到一个工作,需要获取58同城上面的简历信息(http://gz.58.com/qzyewu/).最开始想到是用pyth ...
201621123034 《Java程序设计》第3周学习总结
1. 本周学习总结初学面向对象,会学习到很多碎片化的概念与知识.尝试学会使用思维导图将这些碎片化的概念.知识点组织起来.请使用工具画出本周学习到的知识点及知识点之间的联系.步骤如下: 1.1 写出你 ...
【bzoj4127】Abs 树链剖分+线段树
题目描述给定一棵树,设计数据结构支持以下操作 1 u v d 表示将路径 (u,v) 加d 2 u v 表示询问路径 (u,v) 上点权绝对值的和输入第一行两个整数n和m,表示结点个数和操作数 ...
box-sizing重置
html { /*-webkit-box-sizing: border-box; -moz-box-sizing: border-box;*/ box-sizing: border-box; } *, ...
重绘(repaints)与重排(reflows)
当页面布局和几何属性改变时就需要＂重排＂避免在修改样式的过程中使用 offsetTop, scrollTop, clientTop, getComputedStyle() 这些属性, 它们都会刷新渲 ...
荔枝丹(litchi)
荔枝丹(litchi) 题目描述绛雪艳浮红锦烂,玉壶光莹水晶寒. 高名已许传新曲,芳味曾经荐大官. 乌府日长霜署静,几株斜覆石栏杆. --明·陈辉<荔枝> 荔枝(丹),拼音为lizhid ...
java根据开始时间结束时间计算中间间隔日期
public static void main(String[] args) throws Exception { String beginDate = "2016-07-16"; ...
leetcode 21 list merge
/** * Definition for singly-linked list. * struct ListNode { * int val; * ListNode *next; * ListNode ...
css 样式冲突问题
CSS 样式冲突问题问题: 当文件中样式名称相同时,易出现样式冲突问题,解决办法如下: 解决: 以 layer.js 中弹出层 .layui-layer-page .layui-layer-con ...

【温故知新】——Bootstrap响应式知识点复习

前言：本文是自己在学习课程中的课程笔记，这里用来温故知新的，并非本人原创。

Less 和 Bootstrap 定制

【温故知新】——Bootstrap响应式知识点复习的更多相关文章

随机推荐

热门专题