响应式
Day 01
复习:
(1)AJAX
数据库、Web服务器、HTTP、原生AJAX、jQuery中的AJAX
(2)HTML5
表单、视音频、Canvas、SVG、地理定位、拖放、WebWorker、WebStorage、WebSocket
(3)Bootstrap
今日目标:
(1)响应式网页 —— 重点
(2)Bootstrap起步 —— 掌握
2G——不能上网
2.5G——GRPS——只能浏览WML网页
3G——智能操作系统——浏览HTML网页
1.什么是响应式网页?
Responsive Web Page,一个网页,可以根据浏览设备的不同,而自动更改布局、图片、文字效果,不会影响用户的浏览体验。
响应式网页的构成:
(1)布局:不能固定宽度,必须是流式
(2)文字和图片大小随着容器大小而改变
(3)CSS3 Media Query
2.如何测试响应式网页?
(1)使用真实的物理设备来测试
优势:测试效果真实可靠
不足:测试任务量太大
(2)使用设备模拟软件来测试
优势:快速,不需要准备大量的物理设备
不足:测试结果有待进一步验证
(3)使用Chrome自带的设备模拟器
优势:简单直观,功能比较丰富
不足:测试结果有待进一步验证
viewport:iOS诞生时网页都是为PC编写,只能进行强制缩放后才能在手机中显示——后果是所有的图片、文字都小到无法看清。苹果公司提出了Viewport(视口)的概念——可以在远比物理屏幕更宽的范围内浏览网页,不经缩放。后果是用户不得不左右滑动屏幕。后来的Android也借鉴了视口的概念。
|
3.如何编写响应式网页?——重点
手写响应式网页必须注意的六点:
(1)必须声明viewport元标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
避免用户左右滑动屏幕,禁止浏览器初始时缩放显示
(2)容器的宽度尽量不使用固定值(px),使用相对宽度(%或auto)
(3)文字尽量不使用绝对尺寸(px),使用相对尺寸(em或rem)
(4)图片要指定大小,如下方式:
img {
/*width: 400px;*/
/*width: 100%; 可随容器无限缩放*/
max-width: 100%; 可随容器缩小,但最大不会超过图片的原始大小——防止马赛克
}
(5)页面布局时不能固定,而要用流式布局,如浮动、inline-block
(6)灵活的使用CSS3 Media Query技术——响应式网页必备元素!
4.使用CSS3 Media Query技术——重中之重
Media:指浏览网页的设备,如screen、tv、projection、tty(字符终端)、print、braille、speech等
Query:指自动获取当前浏览设备物理特性,如色彩深度、orientation、width、height等
CSS3媒体查询技术:可以自动根据浏览设备的类型及特性,执行不同的CSS代码。
CSS3MediaQuery有两种具体用法:
(1)根据媒体查询的结果,执行不同的外部CSS文件
<link media="screen and (max-width:991px) and (min-width:768px)" rel="stylesheet" href="css/pad.css"/>
不足:即使当前设备不执行的CSS文件,也会被浏览器加载;每个CSS文件中可能存在很多重复代码
(2)在一个CSS片段中,有选择的执行某些选择器
@media screen and (min-width: 768px) and (max-width:991px) {
选择器 { 名: 值; }
}
午间练习:使用媒体查询的第二种用法,实现下面的响应式网页
PC下的布局效果 PAD下的布局效果 PHONE
5.Twitter Bootstrap框架
Bootstrap:起步
Twitter Bootstrap,是一个HTML/CSS/JS框架,用于简化响应式网页的编写。
官网:http://getbootstrap.com/
中文镜像:http://www.bootcss.com/
主要内容分为5部分:
(1)起步
(2)全局CSS样式
(3)组件
(4)jQuery插件
(5)定制
提示:Bootstrap学习没有难以理解的知识点,但难点在1)词汇量偏大,记忆方面有难度 2)常用的class特别的使用要求,需要熟练应用。
6.Bootstrap第一部分:起步
下载
基本模板
<html lang="zh-cn"> <html lang="en"> <html lang="en-us"> <html lang="ja"> HTML标签的lang属性(language),用于指定当前网页的自然语言。作用:1)为浏览器翻译功能指名原始语言 2)为屏幕阅读软件指明应该使用的发音 |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> HTTP响应消息头部:X-UA-Compatible Cross-UserAgent-Compatible:IE浏览器专用头部,告诉新版本的IE兼容其中的哪个版本的内核,edge表示启用能够使用的最新的版本内核 IE6: 内核6 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 |
html5shiv.js:由第三方提供的通用JS,让老IE识别HTML5新的语义标签。 |
respond.js:由第三方提供的通用JS,让老IE支持响应式网页——CSS3 Media Query |
练习:查找bootstrap.css对HTML基本标签做了哪些样式重置:
* { box-sizing: border-box; }
html { font-size: 10px;}
body { font-size: 14px; margin:0; background:#fff; color:#333;}
h1 { font-size: 36px; margin-top:20px; margin-bottom:10px;}
...
h6 { font-size: 12px; margin-top:10px; margin-bottom:10px; }
p { margin: 0 0 10px; }
a { color: #337ab7; text-decoration: none; }
img { border: 0; }
table { border-spacing:0; border-collapse: collapse; }
div { ... }
span { ... }
7.Bootstrap第二部分——全局CSS样式
按钮相关class: 17:13
.btn 按钮基础样式
.btn-default 白底黑字的按钮
.btn-danger 红色按钮
.btn-warning 黄色按钮
.btn-success 绿色按钮
.btn-info 浅蓝色按钮
.btn-primary 深蓝色按钮
.btn-lg
.btn-sm
.btn-xs
.btn-block 块级按钮
图片相关class:
.img-circle 圆形图片
.img-rounded 圆角图片
.img-thumbnail 缩略图片
.img-responsive 响应式图片
文本相关class:
.text-五种颜色 文本颜色
.bg-五种颜色 文本背景颜色
.text-uppercase 文本转换为大写形式
.text-lowercase 文本转换为小写形式
.text-capitalize 文本转换为首字母与大写形式
.text-left 文本左对齐
.text-center 文本居中对齐
.text-right 文本右对齐
.text-justify 文本两端调整对齐
课下任务:
(1)自学“全局样式”—— 辅助类、排版、代码
(2)仿写如下的响应式网页 ——手写媒体查询,不直接使用bootstrap.css,但可以借鉴其中的class
PC下的布局效果:
PAD下的布局效果:
PHONE下的布局效果:
*****************************************************************************************************Day 02
复习:
响应式网页:
概念:
如何编写: 六条原则
如何测试: 三种方法
Bootstrap框架:
是一个HTML/CSS/JS框架,适用于创建响应式Web页面。主要内容分为五部分:
(1)起步
下载、模板、实例、Bootlint、兼容性
(2)全局CSS样式
按钮、图片、文本、辅助类
(3)组件
(4)JS插件
(5)定制
今日目标:
(1)全局CSS样式
表格
栅格系统——重点
表单——难点
(2)组件
Boostrap指定的四种屏幕尺寸: (1)超大PC屏幕——lg(large): w>=1200px (2)中等PC屏幕——md(medium): 1200px>w>=992px (3)PAD屏幕——sm(small) 992px>w>=768px (4)PHONE屏幕——xs(extra small) 768px>w |
1.Boostrap中的两种容器
定宽容器:
.container:
1170px //lg
970px //md
750px //sm
100% //xs
变宽容器:
.container-fluid
100%
此外,两种容器都有:before和:after,可以清除子元素margin和float造成的影响。
2.全局CSS样式——表格 —— 小重点
.table 基础表格
.table-bordered 带边框的表格
.table-striped 隔行变色的表格
.table-hover 带鼠标悬停效果的表格
.table-responsive 响应式表格,必须使用在TABLE的父元素DIV上!
练习:如何给某个td或者tr变为红色/绿色...背景? .table-responsive的正确使用方法?
3.Bootlint
Bootlint 是 Bootstrap 官方所提供的 HTML/CS 检测工具。在使用了 Bootstrap 的页面上,它能自动检查某些常见的 HTML和class的使用错误——浏览器本身不具备这样的检查功能。
4.全局CSS样式——栅格布局系统——重点
前端页面可用的布局方法:
(1)使用TABLE实现页面布局
优势:简单,容易控制
问题:语义表达错误,渲染呈现的效果不友好
(2)使用DIV+CSS实现页面布局
优势:语义正确,渲染效果好
问题:不容易控制,尤其是响应式页面中
(3)使用Bootstrap提供栅格布局系统(Grid Layout)
优势:简单,容易控制,语义正确,支持响应式
问题:没有!
特点:类似于表格,有行(.row)和列(.col)的概念,底层实现却是DIV+CSS。
栅格布局系统使用方法:
(1)最外层必须是容器类: .container或.container-fluid
(2)容器中放置行: .row
(3)行中放置列: .col
(4)针对不同的屏幕有不同的列:
.col-lg-* 适用于超大PC屏幕
.col-md-* 适用于中等PC屏幕
.col-sm-* 适用于PAD屏幕
.col-xs-* 适用于PHONE屏幕
一个div可以同时声明多个不同屏幕下的列宽
<div class="col-lg-* col-md-* col-sm-*">
(5)一行均分为12份,每个列都需要指定自己所占的份数
<div class="col-lg-2 col-md-6 col-xs-8">
(6)每个列都可以指定向右的偏移量,可以实现右错位的效果
.col-lg/md/sm/xs-offset-1/2/3...
(7)不同的列在不同的屏幕下有不同的适用性
col-lg-* 只适用于LG屏幕
col-md-* 适用于MD/LG屏幕
col-sm-* 适用于SM/MD/LG屏幕
col-xs-* 适用于XS/SM/MD/LG屏幕
列的偏移适用同样的规则,对当前屏幕以及更大的屏幕有效;
(8)可以指定某列在特定尺寸的屏幕下隐藏
.hidden-lg
.hidden-md
.hidden-sm
.hidden-xs
隐藏只对当前指定的屏幕有效!
(9)栅格系统可以嵌套,如:
<div class="container">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-6"></div>
</div>
</div>
</div>
</div>
午间练习:
(1)一行中如何分出1:3:1(2:6:2)的三列?
(2)使用栅格布局系统实现如下布局:
input class="form-control"
练习:适用栅格布局系统实现:
PC下的布局效果 PAD下的布局效果 PHONE
导航条: 4/12 4/12 6/12 6/12 12/12 12/12
主体: 1:2:1 1:2:0 100%:100%:0
5.全局CSS样式——表单——难点
HTML5标准有几个表单相关的推荐写法:
1)button必须指定type
2)输入组件都必须有对应的label——为无障碍阅读准备
<label for="xx">用户名</label><input id="xx">
<label>
<input type="radio/checkbox">男
</label>
Bootstrap提供了几种形式的表单?
(1)默认表单
<form>
<div class="form-group">
<label></label>
<input class="form-control">
<span class="help-block"></span>
</div>
</form>
(2)行内表单
<form class="form-inline">
<div class="form-group">
<label class="sr-only"></label>
<input class="form-control">
</div>
</form>
(3)水平表单 —— 最难点
提示:水平表单 = 栅格布局(变种) + 表单
| 标准栅格系统 | 表单中的栅格系统 |
容器 | div.container | form.form-horizontal |
行 | div.row | div.form-group |
列 | div.col-*-* | div.col-*-* |
<form class="form-horizontal">
<div class="form-group">
<div class="col-*-*">
<label class="control-label"></label>
</div>
<div class="col-*-*">
<input class="form-control">
</div>
</div>
</form>
6.Bootstrap第三部分:组件 —— 图标字体
图标字体是字体,可以无限缩放、修改文本颜色、背景颜色、阴影...,显示的内容却是图形图标。
前端领域常用的图标字体:
(1)FontAwesome —— 免费的
(2)Glyphicons Halfling —— 收费的
图标字体在Web项目中都是作为服务器端字体来使用——当客户端在访问网页时,即时从服务器上下载必需的字体文件:
@font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
}
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
}
===================================
具体使用方法:
<span class="glyphicon glyphicon-*"></span>
注意:span中不能有任何文本或子标签!
课后练习:
(1)创建按钮,上面有如下的常用图标:
主页、配置、汉堡包、定位、后退、前进、加号、减号、对勾、叉号、上一张、下一张、发邮件、星星、心形、播放、暂停、停止、上一首、下一首、放大镜
(2)自己参考手册,实现如下效果:
还有搜索框——在输入框中有个放大镜
(3)实现下面所示的响应式版权声明条
PC下的布局效果:
PAD下的布局效果:
PHONE下的布局效果:
*****************************************************************************************************
Day 03
复习:
见思维导图
练习:为音乐播放器创建一系列的按钮:
上一首 快退 播放/暂停 停止 快进 下一首
1.Bootstrap第三部分:组件——图标字体
2.Bootstrap第三部分:组件——按钮组
.btn-group > .btn * 5
.btn-group-justified
.btn-group-lg/sm/xs
.btn-group-vertical 竖直按钮组
3.Bootstrap第三部分:组件——下拉菜单
下拉菜单必需的三级结构:
<div class="dropdown">
<a data-toggle="dropdown">触发元素</a>
<ul class="dropdown-menu">
</ul>
</div>
4.Bootstrap第三部分:组件——导航
Bootstrap提供了三种形式的导航(nav):
(1)标签页式导航
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab"></a>
</li>
</ul>
(2)胶囊式导航
<ul class="nav nav-pills [nav-justified nav-stacked]">
<li class="active">
<a data-toggle="tab"></a>
</li>
</ul>
(3)导航条中的导航
<ul class="nav navbar-nav">
<li class="active">
<a data-toggle="tab"></a>
</li>
</ul>
5.Bootstrap第三部分:组件——警告框
<div class="alert alert-四种颜色 alert-dismissible">
<span class="close" data-dismiss="alert">×</span>
<p></p>
</div>
6.Bootstrap第三部分:组件——进度条
<div class="progress">
<div class="progress-bar" style="width: 30%"></div>
</div>
练习:使用定时器修改进度条宽度,让它真正的动起来
午间任务:
自学手册中的组件:路径导航(面包屑)-breadcrumb、分页条-pagination、分页器-pager、徽章-badge、标签-label、巨幕-jumbotron、页头-pager-header、水井(well)
7.Bootstrap第三部分:组件——列表组
使用ul>li实现的列表组
<ul class="list-group">
<li class="list-group-item"></li>
</ul>
使用div>a实现的列表组
<div class="list-group">
<a class="list-group-item"></a>
</div>
8.Bootstrap第三部分:组件——缩略图
缩略图一般配合栅格系统使用,实现批量的商品展示
<a class="thumbnail">
<img src="">
</a>
<div class="thumbnail">
<img>
<div class="caption"></div>
</div>
练习:商品展示,PC中一行四列,PAD中两行两列,PHONE中四行一列
9.Bootstrap第三部分:组件——媒体对象
左中右结构的商品/帖子展示:左边/右边有一幅图像,中央是说明文本
10.Bootstrap第三部分:组件——面板和面板组
面板组件把内容分为三部分:头、主体、尾部;
多个面板组合(称为面板组)可以实现“手风琴”组件。
<div class="panel panel-五种颜色/default">
<div class="panel-heading"></div>
<div class="panel-body"></div>
<div class="panel-footer"></div>
</div>
11.Bootstrap第四部分:JS插件 —— 折叠效果
折叠效果(collpase)本身很简单,
<button data-toggle="collapse" data-target="#b"></button>
<a data-toggle="collapse" href="#b"></a>
--------------------------------------------------------
<div id="b" class="collapse in"></div>
折叠效果有两个重要的扩展应用:
(1)手风琴 —— 重点
面板组 + 折叠效果插件
(2)响应式导航条 —— 重点&难点
12.Bootstrap第三部分:组件——响应式导航条
“响应式导航条”必须配合折叠效果插件使用。
响应式导航条在PHONE中只显示一个LOGO + 一个汉堡包按钮,其他菜单项全在折叠下拉菜单中;PAD和PC中,下拉菜单要实现绝对对位,定位到LOGO后面去。
Bootstrap中导航条分类:
(1)按颜色分:
白底黑字: .navbar-default
黑底白字: .navbar-inverse
(2)按定位方式分:
相对定位: 默认
固定定位: .navbar-fixed-*
(3)按所在位置分:
固定在顶部: .navbar-fixed-top
固定在底部: .navbar-fixed-bottom
<div class="navbar navbar-default">
<div class="container">
<!--导航条头部 = brand + toggle-->
<div class="navbar-header">
</div>
<!--导航条折叠部分 = 导航 + 链接 + 表单 + 按钮 ...-->
<div id="my-menu" class="collapse navbar-collapse">
</div>
</div>
</div>
晚间练习:英特尔中文官网首页
注意:只完成页面布局和内容,不做自定义样式设置!!
难点提示:
(1)响应式导航条 —— 尤其是导航菜单中的下拉菜单。
(2)主体中的“大小小”的第二行如何实现——参考手册“栅格系统”中“列排序”相关知识。
(3)响应式版权声明栏。
*****************************************************************************************************
Day 04
复习:
见思维导图
今日目标:
(1)Boostrap插件函数 —— 掌握
(2)Less语言 —— 重点
(3)Bootstrap定制 —— 比较乱
1.补充:列偏移 vs 列排序
列偏移:控制一列出现的位置,某列偏移后,后续的列都会随之偏移——只能往右偏移
col-lg/md/sm/xs-offset-*
列排序:控制一列出现的位置,某列可以往左拉或往右推——可以往右往左调整——某列排序后,其他列没有任何影响!
col-lg/md/sm/xs-push-*
col-lg/md/sm/xs-pull-*
定义jquery对象插件: jQuery.fn.函数名 = function(){ } 调用jquery对象插件: $('选择器').函数名( ); |
2.Boostrap第四部分:jQuery插件
Bootstrap基于jQuery提供了十几个插件函数,可以有两种调用方法:
(1)JS调用方式: $('a').dropdown( );
(2)data-*调用方式: <a data-toggle="dropdown"></a>
提示:官方推荐使用方式2!但有两个插件提交特别:需要方式1和2同时使用才能奏效。
3. Boostrap第四部分:jQuery插件——下拉菜单
<div class="dropdown">
<a data-toggle="dropdown">触发元素</a>
<ul class="dropdown-menu">
</div>
4. Boostrap第四部分:jQuery插件——导航
<ul class="nav nav-tabs">
<li class="active"><a href="#">二十元套餐</a></li>
<li><a data-toggle="tab" href="#">二十元套餐</a></li>
</ul>
5. Boostrap第四部分:jQuery插件——警告框
<div class="alert">
<span class="close" data-dimiss="alert">×</span>
</div>
6. Boostrap第四部分:jQuery插件——折叠
<a data-toggle="collapse" href="#box">展开收起</a>
<div id="box" class="collapse"></div>
7. Boostrap第四部分:jQuery插件——工具提示
对HTML元素的title属性的呈现效果加以改观。
<ANY title="工具提示的内容" data-toggle="tooltip">
<script>
$('[data-toggle="tooltip"]').tooltip();
</script>
注意:此插件必须同时声明data-*和js调用!还有一些可选参数,参考手册即可。
8. Boostrap第四部分:jQuery插件——弹出框
<ANY title="弹出框的标题" data-content="弹出框的内容" data-toggle="popover">
<script>
$('[data-toggle="popover"]').popover();
</script>
注意:此插件必须同时声明data-*和js调用!还有一些可选参数,参考手册即可。
Module:模块 Model:模型 Modal:模态对话框 |
9. Boostrap第四部分:jQuery插件—— 模态框 —— 重点
Modal:模态对话框——在父窗口中弹出的子窗口,只要不关闭,则父窗口无法再获得输入焦点。
<a data-toggle="modal" href="#mid">打开模态框</a>
<button data-toggle="modal" data-target="#mid">打开模态框</button>
模态框必需的HTML结构:
<div id="mid" class="modal"> 半透明遮罩层
<div class="modal-dialog"> 尺寸位置
<div class="modal-content"> 背景/边框/倒角/阴影
<div class="modal-header">
<span data-dismiss="modal" class="close">×</span>
</div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
午间练习:
(1)如何一刷新页面立即显示模态框——使用已经学过的技术
$('a').click(); $('a').trigger('click');
(2)完成一个完整的登录摸态框——包含表单和按钮
10. Boostrap第四部分:jQuery插件——轮播广告 —— 重点
提示:轮播广告的结构比较复杂!只要记得根元素 div.carousel(旋转木马),剩余的全靠Bootlint的错误提示。
<div class="carousel" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img>
</div.
</div>
</div>
练习:
(1)为每个广告添加说明文字
(2)添加“上一条”、“下一条”按钮
(3)添加序号指示器
11.样式语言的分类
静态样式语言:CSS,可以直接被浏览器所理解;但是作为一门语言,CSS不称职,缺少语言必需的基本要素:数据类型、变量、运算、逻辑结构、函数、继承等。导致CSS可维护性低。
动态样式语言/样式预处理语言:在CSS基础之上添加了动态语言必需的要素,如:数据类型、变量、运算、逻辑结构、函数、继承等,从而极大的提高了样式的可维护性和可修改性。常见动态样式语言有三种:
(1)Sass / SCSS
(2)Stylus
(3)Less
注意:浏览器只能理解CSS!所有的动态样式代码必需转换为CSS才能被浏览器所解析! x.less => x.css 必需有相应的转换程序——动态样式预处理器/编译器。
12.Less语言概述
官网:http://lesscss.org/
中文教程:http://www.bootcss.com/p/lesscss/
浏览器不能直接理解Less样式!
必需使用编译程序(Compiler),把Less内容转换为CSS内容!
具体有两种使用形式:
(1)在客户端使用Less —— 效率低,仅做了解
1)编写.less文件
2)编写.html文件,引入.less文件
3).html中继续引入lessc.js文件
4)当浏览器下载html文件时,同时下载.less和lessc.js,自动执行lessc.js,把.less编译为CSS内容
(2)在服务器端使用Less —— 重点掌握
1)编写.less文件
2)程序员在自己的电脑上安装一款less编译器,把.less文件编译得到.css文件
3)编写.html文件,引入.css文件
4)客户端浏览html下载css即可
========================================
在自己的电脑上安装Less编译环境的步骤:
(1)下载并安装独立的JS解释器: Node.js
确保命令中 node -v 有正确的版本提示
(2)下载并解压缩less编译器: lessc.js
比如保存在 e:/npm/node_modules/less/bin/lessc
(3)运行JS解释器,执行lessc.js文件,把.less转换为.css
可以在命令中直接运行;
node e:/npm/node_modules/less/bin/lessc e:/x.less e:/x.css
也可以在WebStorm中配置“文件监视器”自动运行;
配置好后,新建的或者修改后的.less文件都会自动被编译为.css文件
使用WebStorm“文件监视器”需要注意: 项目路径中不允许有中文和空格!项目文件编码必须为UTF-8!Less必须新建或修改后才能自动编译!
13.Less语法学习
(1)Less支持所有的CSS语法,即可以把.css重名为.less都是可以的!
(2)Less支持单行/多行注释,只有多行注释会被编译到.css中——推荐多多使用单行注释。
(3)Less中支持变量(variable)的概念:
定义变量: @变量名: 变量值;
使用变量: 选择器 { color: @变量名; }
变量的值可以是任意合法的CSS属性值。
(4)变量和常量可以进行算术运算:加、减、乘、除、取余;
以及比较运算: > < >= <= !=
(5)Less中支持样式混入(mixin)的概念:
选择器1 { 样式; }
选择器2 { 选择器1; 样式; }
(6)混入其它样式时可以带参
选择器1(@参1 , @参2) { 样式; }
选择器2 { 选择器1(值1, 值2); }
(7)Less支持选择器的嵌套
选择器1 {
样式1;
选择器2 {
样式2;
}
}
编译后的结果为:
选择器1 { 样式1; }
选择器1 选择器2 { 样式2; }
(8)Less内置了几十个样式操作函数:
image-width() 返回图片的宽
image-height() 返回图片的高
ceil() 上取整
floor() 下取整
lighten() 颜色变亮
darken() 颜色变暗
(9)Less支持文件导入,
CSS中也支持文件导入的概念,由于会增加文件请求次数,不推荐使用;Less中的文件导入,则强烈推荐使用——被包含的.less会与当前文件进行拼接!
@import "xx.less";
@import "xx"; //可以省略.less后缀名
14.Bootstrap第五部分:定制
定制Bootstrap有三个目标:
(1)减肥瘦身:删除不需要的组件相关样式 —— 删除bootstrap.less不必要的@import即可;
(2)全局定制:定制大体的样式 —— 修改variables.less中变量的值,400+变量;
(3)细节定制:修改某个组件细节样式 —— 修改组件对应的.less的样式。
课下任务:
(1)自学插件——Affix(附加导航)
(2)自学插件——ScrollSpy(滚动监听)
(3)按照最新的Intel官网的效果,定制导航条组件、摸态框组件
(4)“我的大项目”中必须有一个响应式项目