达内2016前端开发知识点总结--bootStrap--4天

最新推荐文章于 2019-10-18 14:07:45 发布

a36267862

最新推荐文章于 2019-10-18 14:07:45 发布

阅读量490

点赞数

分类专栏： bootstrap

本文链接：https://blog.csdn.net/a36267862/article/details/79774129

版权

bootstrap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

bootStrap day01

第三阶段课程

(1)AJAX：数据库、服务器、HTTP、原生AJAX、jQuery-AJAX

(2)HTML5新特性

(3)Bootstrap

Bootstrap学习特点：

(1)理解难度低，甚至低于CSS

(2)难在1000+class/4天 = 250单词/天 —— 单词记忆！

今日目标：

(1)如何编写响应式网页 —— 重点

(2)Bootstrap入门 —— 重点

1.什么是响应式网页？

1G：模拟信号，手机只能打电话

2G：数字信号，手机可以发短信

2.5G：GPRS，手机可以浏览网页，WAP/WML

3G：智能手机，iOS/Android——Linux操作系统，具备真正的浏览器，可以浏览HTML网页

早期的HTML网页都是为PC浏览器准备的，宽度设定都很大，手机屏幕，浏览体验不佳！

2010年5月提出的“Responsive Web Page”，响应式网页、自适应式网页，一个页面，可以根据浏览设备的不同、或使用环境的不同，自动的修改布局、图片尺寸、文字大小，从而可以保证所有的设备下都正常的浏览体验。

好处：各种设备下都正常浏览

不足：页面代码结构需要考虑到多种设备，编写难度更大，一般只适用于内容量不太多的页面。

2.如何测试响应式网页？

(1)使用真实物理设备测试——测试效果最好但最麻烦

(2)使用第三方模拟器软件测试——测试效果有待进一步验证

(3)使用浏览器提供的设备模拟器测试——最简单但有时测试效果与真实物理设备有所不同，需要进一步验证

行业小知识：Viewport，视口，屏幕中浏览网页的窗口

早期的手机浏览PC网页时只能把页面进行缩小，影响浏览体验：

iOS系统提出了viewport的概念——承载网页的窗口，可以随意指定宽和高，但不能小于手机物理屏幕，可以让任意大小的网页不经缩放，直接显示：

Android后来也引入了该概念 —— 只有移动浏览器才有该概念

3.面试题：如何编写响应式网页？ —— 整个阶段的最重点！！

(1)必须声明viewport元标签

(2)容器尽量使用相对尺寸

尽量避免绝对尺寸： div.container { width: 500px; }

使用相对尺寸代替： div.container { width: 80%; }

(3)文字大小尽量使用相对尺寸

尽量避免绝对尺寸： .text { font-size: 12px; }

使用相对尺寸代替： .text { font-size: 0.8rem; }

(4)图片尽量使用相对尺寸

尽量避免绝对尺寸： img { width: 200px; }

使用相对尺寸代替： img { width: 50%; } 指定在父容器中的宽度占比，可以随着父容器无限变大

img { max-width: 50%; } 指定在父容器中的宽度占比，同时还不能超过自己的原始大小

(5)页面布局尽量采用流式布局(Fluid)

float:left; 或 display:inline-block;

(6)响应式网页必须CSS3 Media Query技术！

4.CSS3 Media Query

Media：指浏览网页的设备，如screen(phone/pc/pad)、tv、projection、print、tty、braille

Query：使用CSS自动查询出浏览设备的特性，如位深、解析度、宽高、水平/竖直方向....

CSS3 Media Query：根据浏览网页的设备类型不同，或者特性不同，而有选择的执行某些CSS，放弃执行另外的。

媒体查询具体有两种使用方法：

(1)有选择性的执行符合条件的外部CSS文件

缺陷：即使不满足当前浏览器条件的CSS文件，也会被浏览器请求。

(2)有选择性的执行CSS片段中的部分内容

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

h3 {

display：none

}

重点练习：响应式网页示例：

主体布局：1:3:1 1:3:0 100%：100%：0

bootstrap：起步，引导程序，入口程序

5.Twitter Bootstrap概述

官网：http://getbootstrap.com/

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

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

内容分为五部分：

(1)起步

(2)全局CSS样式

(3)组件

(4)JS插件

(5)定制

6.Bootstrap第一部分：起步

下载

基本模板

HTML标签的lang属性(language)指定当前页面所使用的自然语言，如zh、zh-cn、zh-tw、zh-hk、en、en-uk、ja、de、fr....

作用1：指定当前页面的基础语言，为浏览器的翻译做准备

作用2：为盲人的屏幕阅读器指明基础发音

Cross-UserAgent-Compatible，跨（IE）浏览器兼容性

IE 6：非常多的专有对象

IE 7： 6/7

IE 8 : 6/7/8

IE 9 : 6/7/8/9

IE 10 : 6/7/8/9/10

IE 11 : 6/7/8/9/10/11

edge：使用可用的最新版本的IE内核

html5shiv.js：第三方的JS文件，自调函数，让老IE支持HTML5语义标签。

respond.js：第三方的JS文件，自调函数，让老IE支持响应式网页——CSS3媒体查询技术

练习：找出Bootstrap.css对HTML标签的默认样式进行了哪些重置：

* { box-sizing:border-box; }

html { font-size:10px; font-family:'sans-serif'}

body { font-size:14px; font-family:'Helvatic Neue'; color:#333; background:#fff; }

h1 { font-size:36px; margin: 20px 0 10px 0;}

h2 { font-size:30px; margin: 20px 0 10px 0;}

h3 { font-size:24px; margin: 20px 0 10px 0;}

h4 { font-size:18px; margin: 10px 0 10px 0;}

h5 { font-size:14px; margin: 10px 0 10px 0;}

h6 { font-size:12px; margin: 10px 0 10px 0;}

p { margin-bottom: 10px; }

a { color: #337ab7; text-decoration: none; }

ul { margin-bottom: 10px; margin-top:0}

img { vertical-align:middle; border:0; }

table { background:transparent; border-collapse:collapsed; }

div { }

span { }

上述样式重置很多依赖于normalize.css第三方样式文件。

7.Bootstrap第二部分——全局CSS样式

与按钮相关样式：

.btn

.btn-default 白底黑字按钮

.btn-danger 红色

.btn-warning 黄色

.btn-success 绿色

.btn-info 浅蓝色

.btn-primary 深蓝色

.btn-lg 大号

.btn-sm 小号

.btn-xs 超小号

.btn-block 块级按钮

与图片相关的样式：

.img-rounded 圆角图片

.img-circle 圆形图片

.img-thumbnail 缩略图片

.img-responsive 响应式图片

与列表相关的样式：

.list-unstyled 没有提示符的列表

.list-inline 行内列表

与文本相关的样式：

.text-danger

.text-success

.text-warning

.text-info

.text-primary

.bg-danger

.bg-success

.bg-warning

.bg-info

.bg-primary

.text-left

.text-right

.text-center

.text-justify

.text-uppercase

.text-lowercase

.text-capitalize

课后作业：

(1)em和rem的区别

(2)自学“全局CSS样式”：辅助类、排版、代码

(3)使用媒体查询编写如下的响应式网页：

bootStrap day02

复习：

响应式页面：

(1)声明viewport元标签

(2)容器尽量使用相对尺寸

(3)文字尽量使用相对大小

(4)图片尽量使用相对尺寸

(5)布局使用流式布局

(6)使用CSS3 Media Query

Bootstrap是一个HTML/CSS/JS框架，适用于响应式Web页面开发。内容分为五部分：

(1)起步

下载、基本模板、实例、Bootlint、兼容性

(2)全局CSS样式

(3)组件

(4)JS插件

(5)定制

全局CSS样式：

按钮：

.btn .btn-default

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

.btn-lg/默认/sm/xs

.btn-block

图片：

.img-rounded

.img-circle

.img-thumbnail

.img-responsive

列表：

.list-unstyled

.list-inline

文本：

.text-五种颜色

.bg-五种颜色

.text-left/right/center/justify

.text-uppercase/lowercase/capitalize

今日目标：

(1)全局CSS样式——表格、栅格布局、表单

(2)组件——简单的组件

1.Boostrap第二部分：全局CSS样式——辅助类

.pull-left

.pull-right

.caret

.close

.center-block

2.Boostrap第二部分：全局CSS样式——排版&代码

3.Boostrap第二部分：全局CSS样式——表格

.table

.table-bordered 带边框的表格

.table-striped 隔行变色的表格

.table-hover 鼠标悬停变色的表格

.table-responsive 响应式表格，用于TABEL父元素DIV

Bootlint：官方提供的一个用于检查HTML/CSS使用方面错误的工具。

练习：如何为tr和td修改背景颜色 —— 自己查看手册

4.Boostrap第二部分：全局CSS样式——栅格布局系统——重点

页面内容布局的三种方式：

(1)TABLE布局

好处：简单容易控制

问题：语义错误，渲染效率低

(2)DIV+CSS布局

好处：语义正确，渲染效率高

问题：不容易控制

(3)Bootstrap栅格布局系统

好处：语义正确，渲染效率高，简单容易控制，实现了响应式

不足：没有！

栅格布局系统的使用方法：

(1)栅格系统的父元素必须是：

div.container - 定宽容器

LG:1170px MD:970px SM: 750px XS:100%

div.container-fluid - 变宽容器

width:100%

(2)在容器中声明“行”

div.container > div.row

(3)在“行”中声明“列”

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

(4)列根据不同的屏幕尺寸分为四组：

.col-lg-*

.col-md-*

.col-sm-*

.col-xs-*

(5)一行均分为12等份，每个列必须指定自己的占比：

.col-lg-1

.col-lg-2

.col-lg-3

.col-lg-...

.col-lg-12

(6)列可以向后“偏移”指定的宽度

.col-lg-offset-1

.col-lg-offset-2

.col-lg-offset-....

.col-lg-offset-12

(7)不同屏幕宽度下的列宽度占比适用于指定屏幕以及更大屏幕

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

.col-sm-* 适用于sm/md/lg屏幕

.col-md-* 适用于md/lg屏幕

.col-lg-* 适用于lg屏幕

(8)一个列可以指定不同屏幕下的不同宽度占比

(9)可以指定列在特定的屏幕下实现隐藏

.hidden-lg

.hidden-md

.hidden-sm

.hidden-xs

.hidden

注意：隐藏只对指定屏幕有效！

(10)栅格系统可以嵌套使用

</div>

(11)列的排序问题——待续

午间练习：使用栅格系统实现如下页面布局：

重点练习：响应式网页示例：

5.Boostrap第二部分：全局CSS样式——表单——难点

难点：(1)相关class较多 (2)HTML结构复杂——HTML5规范

Bootstrap提供了三种形式的表单：

(1)默认表单

<form>

</div>

</form>

(2)行内表单

</div>

</form>

(3)水平表单

提示：水平表单指在一行中放置label、input、span，需要整合栅格布局系统(变种) 和表单相关内容。

	标准栅格系统	水平表单中栅格
外层容器	div.container 或 div.container-fluid	form.form-horizontal
行	div.row	div.form-group
列	div.col--	div.col--

</div>

</div>

</form>

练习：如何在输入框中放置一个对勾、叉号、放大镜？

8.Bootstrap第三部分：组件 —— 下拉菜单

下拉菜单必需的三级结构：

<ul class="dropdown-menu">隐藏的菜单</ul>

</div>

提示：后面必需引入bootstrap.js，其中会查找data-toggle="dropdown"元素，为其绑定事件监听函数。

9. Bootstrap第三部分：组件 —— 警告框

任意文本内容

</div>

课后练习：

(1)面试题：Bootstrap为什么把一行等分为12份？

(2)完成“英特尔中国官网首页”的内容和布局

提示：不用处理字体和颜色相关样式

bootStrap day03

复习：

Bootstrap是一个HTML/CSS/JS框架，适用于响应式Web项目，内容涉及到：

HTML: 基于H5已有标签添加了data-*属性

CSS: (1)CSSReset (2)千个class

JS: 基于jQuery提供了十几个插件函数

分为五部分：

(1)起步

下载、模板、实例、Bootlint、兼容性

(2)全局CSS样式

按钮、图片、列表、文本、辅助类、表格、栅格系统、表单(默认、行内、水平)

(3)组件

下拉菜单、警告框

(4)JS插件

(5)定制

</div>

任意文字

</div>

今日目标

(1)组件 —— 难点在响应式导航条

(2)插件 ——

1.补充知识点：Bootstrap全局CSS样式——栅格系统

列偏移(offset)：

控制某列向右错位，并影响后续所有的列

.col-lg/md/sm/xs-offset-*

作用：列左右留白、列右对齐、列居中

列排序：

控制某列向右/左移动，并不影响其他列

.col-lg-push-1/2/.../12

.col-lg-pull-1/2/.../12

作用：在特定屏幕下临时调整列的出现位置

2.Bootstrap第三部分：组件——下拉菜单

3.Bootstrap第三部分：组件——警告框

4.Bootstrap第三部分：组件——图标字体

图标字体：本质是文字，不是图片，可以随意变大、添加下划线、变斜体、改颜色。

Web应用中常用图标字体： FontAwesome、Glyphicons

因为客户端都没有上述字体文件，必须应用服务器端字体：

@font-face {

font-family: 'Glyphicon'; /*声明服务器端字体*/

src: url(../fonts/glyphicons....ttf) /*服务器端字体下载位置*/

}

.glyphicon {

font-family: 'Glyphicon'; /*使用服务器端字体*/

}

.glyphicon-alert:before {

content: '\9fc3';

}

Bootstrap提供了200+个Glyphicons图标，使用方法：

提示：使用图标字体的HTML标签中不能有任何子元素或内容！

练习：使用如下的常用图标：

首页、配置、用户、定位、刷新、搜索、邮件、星星、心形、加号、减号、对勾、叉号、上一张、下一张、前进、后退、播放、暂停、快进、快退

5.Bootstrap第三部分：组件——按钮组

把多个按钮放在一起组成小组

.btn-group > .btn*n

.btn-group.btn-group-justified > .btn*n

.btn-group-vertical > .btn*n

6.Bootstrap第三部分：组件——导航(nav)

Boostrap提供了三种形式的导航组件：

(1)标签页式导航（页签组件）

</ul>

(2)胶囊式导航

</ul>

(3)导航条专用导航

午间自学——非常简单：

面包屑(路径导航) breadbrumb、

分页条 pagination、

分页器 pager、

标签 label、label-颜色

徽章 badge、

巨幕 jumbotron、

水井 well、

页头 page-header、

进度条 progress > progress-bar

7.Bootstrap第三部分：组件——缩略图

可以用于A元素或者DIV元素，用于展示一系列条目中的一个。

练习：使用栅格系统+缩略图实现“商城中的商品列表”

8.Bootstrap第三部分：组件——媒体对象

媒体对象常用于商品列表：

</div>

9.Bootstrap第三部分：组件——列表组

用法1：无鼠标悬停效果

</ul>

用法2：有鼠标悬停效果

</div>

10.Bootstrap第三部分：组件 —— 面板组件 —— 小难点

面板：在Bootstrap中是一种呈现“头部-主体-尾部”三层结构的组件。

</div>

提示：面板组件中尤其适合放置 <table class="table">

11.Bootstrap第四部分：JS插件 —— Collapse

折叠效果，本身使用很简单：

内容

</div>

折叠效果有两个使用场景：

(1)手风琴： 折叠效果插件 + 面板组

(2)响应式导航条：

12.Bootstrap第三部分：组件 —— 响应式导航条 —— 最难点

注意：响应式导航条的结构——只有从手机屏幕才能看出来！

代码结构：

<div class="navbar-header">

商标和汉堡包按钮

</div>

<div class="navbar-collapse collapse">

能够折叠隐藏的内容，如导航、表单、链接...

</div>

</div>

导航条的种类：按颜色：

浅色底深色字：.navbar.navbar-default

深色底浅色字：.navbar.navbar-inverse

导航条的种类：按定位：

相对定位(占空间)：.navbar

固定定位(不占空间)：.navbar.navbar-fixed-*

导航条的种类：按位置：

固定在顶部：.navbar.navbar-fixed-top

固定在底部：.navbar.navbar-fixed-bottom

前端实现动画可用的技术：

(1)CSS3 Transition技术

(2)CSS3 Keyframes技术

(3)JS定时器 —— jQuery1/2动画函数都是定时器动画

(4)requestAnimationFrame技术 —— jQuery3

课下任务：

(1)面试题：如何实现斜纹状背景色？菱形背景色？菱形的图片显示？

(2)百度百科：网页无障碍阅读-网页可访问性(Accessible)

(3)为英特尔官网首页添加导航条，添加“大小小”中的内容

提示：需要编写不少的媒体查询样式和JS

bootStrap day04

复习：

见思维导图

今日目标：

(1)Bootstrap第四部分：插件 —— 掌握

(2)Less语言 —— 重点

(3)Bootstrap第五部分：定制 —— 难点

1.Bootstrap插件概述

Bootstrap一共提供了十几个插件函数，可以单个引入，也可以一次性全部引入(bootstrap.js)

使用方法有两种：

(1)使用JS方式调用

$('div').modal( );

(2)使用data-*方式调用 —— 推荐写法

2.Bootstrap第四部分：插件 —— 下拉插件

1)JS方式调用：

$('.dropdown a').dropdown( );

2)data-*方式调用：

3.Bootstrap第四部分：插件 —— 警告框

2)data-*方式调用：

文字内容

</div>

3.Bootstrap第四部分：插件 ——折叠效果

2)data-*方式调用：

Model：数据模型

Modal：模态对话框

Module：模块

4.Bootstrap第四部分：插件 —— 模态框

modal：模态对话框，在父窗口中打开了一个子窗口，只要子窗口不关闭，则父窗口无法获得输入焦点——该子窗口就称为“模态子窗口”。浏览器中默认： window.alert()/confirm()/prompt() 都是模态子窗口，但无法定制。

一般项目中，使用DIV模拟出模态子窗口的效果：

<a data-toggle="modal" href="#modal-login">弹出模态对话框</a>

头部

</div>

</div>

午间练习：修改intel项目首页，点击“登录”后弹出模态对话框：

5.Bootstrap第四部分：插件 —— 工具提示(tooltip)

提示：不单要用data-*，还要调用js

6.Bootstrap第四部分：插件 —— 弹出框(popover)

提示：不单要用data-*，还要调用js

7.Bootstrap第四部分：插件 —— 轮播广告(Carousel)

Carousel：旋转木马、轮播广告

提示：Bootstrap提供的轮播广告结构复杂，只需要记住最外层容器div.carousel，其余内容全部靠Bootlint提示即可。

练习：

为轮播广告添加“上一张/下一张”轮播控件；

为轮播广告添加“1/2/3/4”序号指示器；

8.自学：Bootstrap第四部分：插件 —— 附加导航(Affix)

9.自学：Bootstrap第四部分：插件 —— 滚动监听(ScrollSpy)

10.样式语言的分类

(1)静态样式语言

即CSS，可以直接被浏览器解释执行。作为一门语言，CSS有缺陷的，如缺少：类型、变量、运算、函数、对象和继承等等语言必需的基本概念，导致了CSS样式代码可维护性差。

(2)动态样式语言

在CSS基础上添加了动态语言必需的因素，如类型、变量、运算、函数、对象和继承等，极大了提高了样式代码的可维护性。常见的动态样式语言：

1)Sass / SCSS

2)Stylus

3)Less

注意：浏览器只能解析CSS，所以所有的动态样式语言的代码都必须转换为CSS才能执行——此过程称为动态样式代码的“编译(Compile)”

11.动态样式语言——Less概述

官网：http://lesscss.org/

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

一个更简单的网站: http://www.1024i.com/demo/less/

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

Less文件有两种使用方法：

(1)在客户端使用Less —— 仅作了解

创建x.less;

创建x.html，引入x.less，引入less.js（Less编译器）

客户端请求x.html，下载.less和.js两个文件，在浏览器中运行less.js把x.less文件编译为css代码。

(2)在服务器端使用Less —— 推荐方法

创建x.less；

程序员在自己的电脑上安装less编译器；

程序员执行less编译器，把x.less 编译为 x.css；

创建x.html，引入x.css；

客户端请求html，下载css，直接运行即可

很容易出错的地方：—— 如何在服务器端搭建Less编译环境

(1)下载并安装一款独立于浏览器的JS解释器——Node.js

成功的标志：

node -v 能够显示出版本号

(2)下载并安装Less编译器程序：lessc.js

成功的标志：能够找到

C:\npm\node_modules\less\bin\lessc —— JS文件

(3)运行JS解释器，执行lessc.js，编译.less文件得到.css文件

node C:\npm\node_modules\less\bin\lessc e:\5.less > e:\5.css

成功的标志：在e盘多出一个5.css文件

此步也可以用WebStorm中的FileWatcher功能来实现

(3.1)配置WebStorm中的FileWatcher，指定lessc位置

(3.2)只要用户新建/修改.less文件，WS会自动调用lessc程序把.less编译为.css

12.Less语法学习

(1)Less支持CSS所有的语法

(2)Less支持多行/单行注释，但CSS只支持多行注释，所以Less中的单行注释不会被编译到CSS文件

(3)Less有变量(Variable)的概念

声明变量： @变量名: 值;

使用变量：选择器 { 样式: @变量名; } .@{变量名} { }

变量值可以是任意合法的样式值。

(4)Less可以执行样式/变量的计算

加、减、乘、除、取余

(5)Less支持样式的混入(Mixin)

选择器1 { 样式; }

选择器2 {

选择器1;

样式;

}

(6)Less在样式混入时可以指定参数

选择器1(@变量, @变量...) { 样式; }

选择器2 {

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

样式;

}

(7)Less支持样式嵌套

选择器1 {

样式1;

选择器2 {

样式2;

}

会被编译为：

选择器1 { 样式1; }

选择器1 选择器2 { 样式2; }

(8)Less为样式提供了几十个可用的函数

ceil( )

floor( )

percentage( 5/10 ) // 50%

round( )

lighten(@c, 20%) 颜色变淡指定的百分比

darken(@c, 30%) 颜色变暗指定的百分比

....

(9)Less支持文件包含指令

CSS提供了@import指令，可用于包含其它的CSS文件，但由于会增加请求次数，不推荐使用；

Less也提供了@import指令，可用于包含其它的Less文件，推荐使用！—— Less的文件包含是在服务器端执行的文件拼合，客户端的一次请求就可以获得所有样式！

@import "xx.less";

练习：观察Bootstrap真正的Less源代码文件的结构

13.通过修改Bootstrap的Less源文件实现定制

定制目标：

(1)Bootstrap瘦身，删除不必要的样式

注释掉bootstrap.less中不需要的@import即可

(2)修改Boostrap默认的样式值，实现粗粒度定制

修改variables.less中变量的值即可

(3)修改Boostrap组件的细节样式，实现细粒度定制

修改特定的组件对应的.less文件，如dropdown.less

课后任务：

(1)仿写Bootstrap起步中的“示例”

(2)实现“我的大项目”响应式版本中样式的定制

a36267862

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
达内2016前端开发知识点总结--bootStrap--4天

bootStrap day01第三阶段课程(1)AJAX：数据库、服务器、HTTP、原生AJAX、jQuery-AJAX(2)HTML5新特性(3)BootstrapBootstrap学习特点：(1)理解难度低，甚至低于CSS(2)难在1000+class/4天 = 250单词/天 —— 单词记忆！今日目标：(1)如何编写响应式网页...
复制链接

扫一扫

专栏目录