Bootstrap自学笔记

  • 格式:pdf
  • 大小:385.33 KB
  • 文档页数:11

Bootstrap⾃学笔记

day01

学习计划——框架(1)Bootstrap 5

(2)AngularJS 12

(3)WebApp 6

(4)JSFramework 6

(5)微信开发 5

⽬标:topspeeder: 350+

WebStorm

1.什么是响应式⽹页——概念

Responsive Web Page:⼀个⽹页,可以根据浏览设备的不同(phone、pad、pc)和特性⽽呈现出不同的布局⽅式——⽬标:都有不错的⽤户浏览体验。

⾯试题:响应式⽹页的构成:(1)流式(Fluid)页⾯布局

(2)可伸缩的图⽚和⽂字

(3)使⽤CSS3 Media Query技术

2.如何测试⼀个响应式⽹页——了解

⽅式1:使⽤真实的物理设备来测试

优势:测试结果真实可靠!

不⾜:需要⼤量购置设备,测试⼯作量太⼤!

⽅式2:使⽤第三⽅的虚拟软件来测试

优势:⽆需购买设备

不⾜:运⾏速度慢,部分不能不易测试,测试结果有待进⼀步的验证。

⽅式3:使⽤Chrome⾃带的设备模拟器来测试

优势:⽅便快捷!!

不⾜:测试结果有待进⼀步的验证!Viewport:视⼝,最早由苹果公司在iOS系统中提出此概念,后来Android系统也引⼊了该概念——这是⼀个移动设备浏览器中专有的概念,PC浏览器不⽀持,会忽略此概念。

没有viewport概念的⼿机浏览器:

视⼝是⼀个虚拟的概念,⽤于显⽰⽹页内容的⼀个窗⼝,其宽和⾼都

可以任意指定。

有了视⼝之后,浏览的效果:

可以实现在较⼩的物理屏幕下,浏览较⼤的⽹页内容——需要⽤户左右滑动3.如何编写⼀个响应式⽹页——重点

(1)在HEAD中声明viewport元标签,并进⾏特殊的设定:

使得Web页⾯在呈现上类似于原⽣的iOS/Android应⽤。

提⽰:移动开发中建议meta必须放在HEAD的最前端。(2)所有的尺⼨和字体⼤⼩都避免使⽤绝对单位(如px),⽤相对单位代替(如:%、auto、em)

(3)使⽤浮动定位(float)

(4)图⽚要实现⾃适应

img {

max-width: xx%; /*指定在⽗容器中的占⽐,同时必须保证不能超过图⽚的原始⼤⼩*/

}

(5)有选择性的执⾏某些CSS,忽略另⼀些——CSS3媒体查询技术!

注意:使⽤了媒体查询技术后,页⾯中允许使⽤px等绝对单位了。4.CSS3 Media Query技术——重点

Media:媒体,指浏览⽹页的设备,如screen(包括PC/PAD/PHONE),print,projection、tv、tty(字符终端)、braille(盲⽂设备)...... Query:查询,查询出当前浏览设备的物理特性,如width、height、resolution、orientation( landscape / portait )CSS3 Media Query技术:根据当前浏览设备类型、以及物理特性⽅⾯的不同,⽽执⾏不同的CSS代码。

CSS3媒体查询具体有两种⽤法:

(1)根据媒体特性执⾏不同的外部CSS⽂件

只有媒体查询结果为真时,指定的外部样式⽂件才会被执⾏!

此⽅法有个缺陷:即使媒体查询失败的外部样式⽂件,也会被浏览器加载。(2)在某段CSS样式声明中,只针对部分样式使⽤媒体查询

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

选择器 {

样式设定....}

}

练习:使⽤媒体查询技术实现⼀个响应式⽹页PC中的布局效果:

PAD中的布局效果:

PHONE中的布局效果:

5.前端开发专⽤的IDE软件——WebStorm

常见的前端开发软件:(1)轻量级(不超过5MB):notepad++、editplus、vi/vim

(2)中量级(xxMB):SublimeText

(3)重量级(xxxMB):AptanaStudio(基于Eclipse)、JetBrains WebStorm(收费软件)

IDE = 编辑器(代码提⽰/补全) + 调试器+ 项⽬管理+ FileWatcher + 服务器管理

WebStorm/Eclipse的常⽤快捷键:

(1)Ctrl+Alt+↓快速复制当前⾏

(2)Ctrl+D 快速删除当前⾏

(3)Alt+↑/↓向上/下移动当前⾏

(4)Ctrl+Alt+L 重新格式化当前⽂件

(5)Ctrl+/ 注释/取消注释当前⾏

WebStorm中的代码补全功能:

ZenCoding(代码补全):

(1)标签+TAB

(2)标签.class名+TAB

(3)标签#ID名+TAB

(4)标签*数字+TAB

(5)标签>标签

随机假⽂⽣成功能:lorem+TAB

多⾏编辑功能:

进⼊多⾏编辑: Alt+⿏标左键

退出多⾏编辑: ESC6.Bootstrap框架

Twitter Bootstrap是由Twitter的两个前端⼯程师最初开发后由很多⼈补充代码共同完成的⼀个HTML / CSS / JS框架。极⼤的简化了响应式⽹页的开发。中⽂官⽹: http://www.doczj.com/doc/be4c2c887e21af45b307a8ee.htmlBootstrapV2:PC浏览设备优先的响应式⽹页开发

BootstrapV3:移动设备优先的响应式⽹页开发

内容分为5部分:(1)起步(Startup)

(2)全局CSS样式(Global CSS)

(3)组件(Component)

(4)JS插件(Plugin)

(5)定制(Customize)

Bootstrap学习特点:概念很简单,易上⼿;但涉及到很多的英⽂词汇。

7.Boostrap第⼀部分——起步

(1)下载

(2)⽂件模板

html标签的lang属性

zh-CN的两个⽬的:

(1)为浏览器翻译应⽤指明⽹站原始的语⾔

(2)为屏幕阅读软件指定⽹页的基础发⾳

X-UA-Compatible元标签的含义:

X: Cross 跨越UA: UserAgent ⽤户代理,即浏览器Compitable:兼容性

此元标签是IE浏览器专⽤的元标签,其它浏览器会直接忽略。IE6:

IE7:同时兼容IE6

IE8:同时兼容IE6、IE7

IE9:同时兼容IE6、IE7、IE8

IE10:同时兼容IE6、IE7、IE8、IE9

IE11:同时兼容IE6、IE7、IE8、IE9、IE10

在新版本的IE中如何启⽤⽼IE的内核:EDGE: 边沿、最前端

html5shiv.js:由第三⽅开发的⼀个JS⾃调函数,⽤于让⽼版本的

IE(<9)⽀持HTML5新标签

respond.js:由第三⽅开发的⼀个JS⾃调函数,⽤于让⽼版本的IE(<9)⽀持响应式⽹页开发的必备技术——CSS3MediaQuery

作业:(1)完成第⼀个响应式⽹页⽰例!

(2)找出Bootstrap框架对下列HTML元素默认样式进⾏了哪些修改——CSS Reset

html { }body { }

h1~h6 { }

a

img

p

table

ul/li

div/span

day02

复习:Twitter Bootstrap是⼀个HTML/CSS/JS框架,适⽤于移动设备优先的响应式Web项⽬,涉及到:

HTML:为H5已有的标签扩展了若⼲个⾃定义属性 data-*

CSS: (1)CSS Reset + (2)近千个class

JS:基于jQuery添加了⼗⼏个插件函数

主要分为五部分:(1)起步:下载模板⽰例禁⽤响应式布局

(2)全局CSS样式

(3)组件

(4)插件

(5)定制

CSS盒⼦模型的计算⽅法:

box-sizing:

content-box; 默认值总宽=margin+border+padding+width

border-box; 推荐值总宽=margin+width(border和padding 算在width之内)

1.全局CSS样式——CSSReset——重点

* {

box-sizing: border-box; 极⼤的简化盒⼦模型的宽度计算 }

html {

font-size: 10px;

}

body {

margin: 0;

font-family: 'Helvatica Neue';

color: #333;

...}

h1 {

font-size: 36px;

margin-top:20px;

margin-bottom:10px;

}

h2 {

font-size: 30px;

margin-top:20px;

margin-bottom:10px;

}

h3 {

font-size: 24px;

margin-top:20px;

margin-bottom:10px; }

h4 {

font-size: 18px;

margin-top:10px;

margin-bottom:10px; }

h5 {

font-size: 14px;

margin-top:10px;

margin-bottom:10px; }

h6 {

font-size: 12px;

margin-top:10px;

margin-bottom:10px; }

p {

margin-bottom: 10px; }

a {

color: #337ab7;

text-decoration: none;

}

a:hover {

color: #23527c;