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;