前情回顾

本地存储 cookie

localStorage 与 sessionStorage

移动端的事件和库

bootstrap框架

应聘要求，会用这个

前端应用多

框架大于库，内容更多

一些写好的特效直接用，加快开发进度

可以做响应式布局，做一个页面，支持多个终端（不同终端显示不同内容）

官网

下载

起步 · Bootstrap v3 中文文档
https://v3.bootcss.com/getting-started/#download

下载后

新建一个文件

注，bootstrap是依赖jquery的

文档中的加载位置

实际开发的加载位置

双方的好处与坏处

文档的加载，放在底部，因为，加载js是阻塞式加载的，会影响性能

实际开发时会把这些都放在头部，因为头部未来会被共享出去被其它页面共同使用

所以不太好放在底部

容器

流动容器，窗度百分百

响式容器，按照查询区间变化

流体布局

左右15填充

响应式容器h

练一练，实现流式布局与响应式布局

bootstrap-入门学习-流体容器与响应式布局容器相关推荐

2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板
本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...
css响应式布局_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
window safari 怎么进入响应式_Web前端新手怎么入门如何用CSS做响应式布局
Web前端新手怎么入门?如何用CSS做响应式布局?很多Web前端新手对响应式布局和自适应布局的概念以及制作方法分不清,简单来说响应式布局相当于流动网格布局,而自适应布局等于使用固定分割点来进行布局.接 ...
前端学习笔记7：响应式布局和简单动画效果
一.响应式布局当我们在利用浏览器的放大缩小的时候,经常会面临一些问题就是如何将浏览器中的内容缩放到我们适合观看的程度,这时候我们就引入一个概念叫做响应式布局(Responsive layout).它 ...
【HTML+CSS】移动端布局之响应式布局+Bootstrap框架
学习视频及笔记参考来源: 黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili 一.响应式开发 1.响应式开发原理原理:就是使 ...
移动端WEB开发之响应式布局(响应式开发原理、bootstrap、阿里百秀案例)
移动端WEB开发之响应式布局 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: <!DOCTYPE html> & ...
响应式布局——Bootstrap
二.BootStrap 1.1 BootStrap简介目标:使用BootStrap框架快速开发响应式网页 Bootstrap是由Twitter公司开发维护的前端UI框架,它提供了大量编写好的CSS样 ...
移动web开发 17-1 响应式布局 bootstrap首页框架阿里百秀项目
1 响应式开发原理 1.1 响应式开发原理核心:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 1.20媒体查询(重点) 媒体查询区间的写法当屏幕宽度<=768 ...
BootStrap之前奏响应式布局
BootStrap 简介概念: 课程目标: 响应式布局技术了解BootStrap前端框架一.响应式布局 1.1 历史问题回顾之前HTML+CSS的布局方式,都是使用像素(px)来布局网页的,可 ...
响应式布局 bootstrap栅格系统
阿里百秀案例制作 1.1 技术选型方案:我们采取响应式页面开发方案技术:bootstrap框架设计图: 本设计图采用 1280px 设计尺寸项目结构搭建 Bootstrap 使用四步曲: 创建 ...

bootstrap-入门学习-流体容器与响应式布局容器

前情回顾

bootstrap框架

bootstrap-入门学习-流体容器与响应式布局容器相关推荐

最新文章

热门文章