web响应式布局与BootStrap框架
目录
- 什么是响应式网页布局
- 媒体查询
- 什么是媒体查询?
- 媒体类型(mediatype)
- 关键字
- 媒体特性(media feature)
- 引入方式
- BootStrap
- 简介
- 使用步骤
- 栅格系统
- 组件
- JavaScript插件
- 定制
- 案例
- 腾讯前端web首页
什么是响应式网页布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,可以根据不同的移动设备布局出不同的界面效果。而不同的移动设备的屏幕尺寸是不一样的,可以通过媒体查询来设计。
媒体查询
什么是媒体查询?
媒体查询英文名为“Media Query
”是指针对不同的媒体类型设置不同的样式规则,针对不同的屏幕尺寸设置不同的样式。
语法:
@media 媒体类型 关键字 (媒体特性){CSS
}
媒体类型(mediatype)
作用:用来区分设备类型的,如屏幕设备、打印设备等,其中手机、电脑、平板都属于屏幕设备。
屏幕 | screen | 带屏幕的设备 |
---|---|---|
打印预览 | 打印预览模式 | |
阅读器 | speech | 屏幕阅读模式 |
不区分类型 | all | 默认值,包括以上3种情形 |
关键字
作用:逻辑操作符,将媒体类型或多个特性连接到一起做为媒体查询的条件。
- and:可以将多个媒体特性连接到一起
- not:对某个媒体类型取反结果
- only:仅表示某个特定的媒体类型
媒体特性(media feature)
作用:用来描述媒体类型的具体特征,如当前屏幕的宽高、分辨率、横屏或竖屏等。 根据不同媒体类型特性设置不同的样式。
特性名称 | 属性 | 值 |
---|---|---|
视口宽和高 | width、height | 数值 |
视口最小宽和高 | min-width、min-height | 数值 |
视口最大宽和高 | max-width、max-height | 数值 |
屏幕方向 | orientation | portrait:竖屏、landscape:横屏 |
引入方式
外联式引入:
<link rel="stylesheet" href="css文件" media="媒体类型 关键字 (媒体特性)">
style中直接引入:
@media 媒体类型 关键字 (媒体特性){CSS
}
媒体类型一般使用的是默认值,其他属性特定场景才用到,关键字也是所以一般使用的写法为:
@media 媒体类型(媒体特性){CSS
}
案例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/*视口宽度 >= 768px,网页背景色是 粉色视口宽度 >= 992px,网页背景色是 绿色视口宽度 >= 1200px,网页背景色是 skyblue*//* 不能设置在这,css属性的层叠性会覆盖 *//* @media (min-width: 1200px) {body {background-color: skyblue;}} */@media (min-width: 768px) {body {background-color: pink;}}@media (min-width: 992px) {body {background-color: green;}}@media (min-width: 1200px) {body {background-color: skyblue;}}</style>
</head>
<body></body>
</html>
BootStrap
简介
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架,它提供了大量编写好的 CSS 样式,允许开发者结合一定HTML
结构及JavaScript
,快速编写功能完善的网页及常见交互效果。
作用:用于开发响应式布局、移动设备优先的 WEB 项目,让开发更快速简单、更稳定。
中文官网:https://www.bootcss.com/
使用步骤
- 下载bootstrap
- 引入bootstrap提供的css代码
min.css是压缩后的css代码,能让网页更流畅。
<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
- 调用bootstrap提供的样式
在全局 CSS 样式中有很多各种样式,可以直接调用它的类,使用container类可以让版心居中。
如使用按钮,直接复制即可生成:
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport
)尺寸的增加,系统会自动分为最多12列。
栅格系统用于通过一系列的行(row
)与列(column
)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
栅格参数:
超小屏幕 手机(<768px) | 小屏幕 平板 (≥768px) | 中等屏幕 桌面显示器 (≥992px) | 大屏幕 大桌面显示器 (≥1200px) | |
---|---|---|---|---|
栅格系统行为 | 水平排列 | 开始是堆叠在一起的,当大于这些阈值时将变为水平排列 | ||
.container 最大宽度 | None (自动) | 750px | 970px | 1170px |
类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
前缀英文 | extremely small | samll | middle | large |
槽宽(列间隙) | 30px (每列左右均有 15px) |
使用预定义的类,可以用来快速创建栅格布局:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>栅格布局</title><link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"><style>.container div {height: 50px;background-color: pink;}</style>
</head>
<body><!--大屏: 一行排列4个内容; 中屏:一行排列2个内容 --><div class="container"><div class="col-lg-3 col-md-6 col-xs-12">1</div><div class="col-lg-3 col-md-6 col-xs-12">2</div><div class="col-lg-3 col-md-6 col-xs-12">3</div><div class="col-lg-3 col-md-6 col-xs-12">4</div></div></body>
</html>
container类:
.container
是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,默认已被指定宽度且居中。
.container-fluid
也是 Bootstrap 中专门提供的类名,所有应用该类名的盒子,宽度均为 100%
组件
Bootstrap 自带了大量可复用的组件,包括字体图标、下拉菜单、导航、警告框、弹出框等更多功能。
使用方法也是只需调用其类名(当然还需要引入css样式)
JavaScript插件
引入JavaScript插件可以让网页具有交互功能,如模拟框、下拉菜单、轮播图等。
引入方法:
可以单个引入(使用 Bootstrap
提供的单个 *.js 文件),或者一次性全部引入(使用 bootstrap.js
或压缩版的bootstrap.min.js
)。建议使用压缩版的 JavaScript
文件,里面包含了所有的插件。
因为插件的依赖关系,所有插件都依赖 jQuery
,所以jQuery
必须在所有插件之前引入:
<script src="./lib/js/jquery.js"></script><script src="./lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
定制
bootstrap可以通过自定义 Bootstrap 组件、Less
变量和 jQuery 插件,定制一份属于你自己的 Bootstrap 。
案例
腾讯前端web首页
导航页:调用相应导航类,增删减
轮播图:找到Carousel
类调用,换上图片
banner区域:栅格系统排列
web响应式布局与BootStrap框架相关推荐
- 响应式布局与Bootstrap框架
响应式布局与Bootstrap框架 1.rem基础 rem(root em)是一个相对单位,类似em,em是父元素字体大小 不同的是rem的基准是相对于html元素的字体大小 rem的优点就是可以通过 ...
- HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
文章目录 (1)Flex弹性盒子布局 一: 父容器上的属性 1. display:flex 设置为弹性盒子(写在父容器上) 2.flex-direction值 设置子项的布局方向(写在父容器上) 3. ...
- 前端移动Web第四天案例:阿里百秀首页-响应式布局(bootstrap框架)
阿里百秀首页案例 技术选型 方案:我们采取响应式页面开发方案 技术:bootstrap框架 设计图: 本设计图采用 1280px 设计尺寸 1. 页面布局分析 2. 屏幕划分分析 ① 屏幕缩放发现 中 ...
- 16-响应式布局(bootstrap框架)
响应式布局(bootstrap框架) 前言 响应式开发原理:使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的 设备划分 设计尺寸 尺寸 超小屏幕(手机) 100% <7 ...
- Bootstrap响应式布局以及栅格框架
一.Bootstrap简单配置 简单使用Bootstrap,只需引入: <script type="text/javascript" src="js/jquery. ...
- 响应式布局及bootstrap(实例)
说明: 这几天公司要求网站实现响应式布局,所以对响应式布局进行了相对全面的了解,并做了几个实例. 转载请注明源地址,谢谢^_^,http://www.cnblogs.com/liu-zhen/p/44 ...
- Web响应式布局设计简介
随着移动互联的到来,市面上的移动终端设备越来越多屏幕尺寸也大小不一.就拿苹果的iPhone来说就有多个不同尺寸的版本,还有iPad也是随着技术的进步屏幕大小.分辨率也在变化.更不用说基于开源Andro ...
- html怎么做成响应式的,怎么用html5完成响应式布局?
怎么用html5完成响应式布局?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 怎么用5完成响应式布局? 步骤1 建立空 ...
- 响应式布局-bootstap-阿里百秀案例
目录 响应式开发原原理 响应式布局容器 Bootstrap前端开发框架 Bootstrap简介 Bootstrap使用 使用四部曲: bootstrap布局容器 bootstrap栅格系统 6.列排序 ...
最新文章
- 基于群集的Hyper-v Server副本
- java程序向mysql插入中文变问号
- IOS 多线程的一些总结
- 小程序搜索框_微信小程序搜索及优化相关知识科普
- 如何编写杂项设备驱动
- 【Hive】多字符分隔
- java long 除法运算_java基础知识学习文档二
- Teradata 和Greenplum 的讨论
- 欧美准入标准亚马逊现在正在严查UL认证UL1598认证标准
- ORA-12514问题解决方法
- 唯美的英文短文!!!
- 电子计算机怎么按不了数字,计算器失灵按不出数字
- 证件照换底色·网页图片设计·第一次项目技术总结
- AR隐形眼镜来了,一部手机的价格,正式开启人体佩戴测试
- 使用谷歌、360浏览器的F12功能模拟微信访问网页
- 超详细的集合思维导图
- 神码ai人工智能写作机器人_机器学习与医学:人工智能在医疗保健中的陷阱
- Mac OS下Charles抓包小程序的保姆级操作过程
- Android已读未读功能,android – 将SMS消息标记为已读/未读或删除在KitKat中不起作用的消息...
- 请叙const与readonly的区别
热门文章
- 创投及科技大咖推荐门户
- 枚举类——概述、常用方法、自定义枚举类、Enum创建枚举类
- 四川智汇蓝图科技公司是怎样把网站口碑推广做好的
- 自定义element-ui的table字体颜色,及背景色
- 详细介绍ERNIE 3.0: Large-scale Knowledge Enhanced Pre-training for Language Understanding and Generation
- XC7VX690T PCIE 硬件设计注意事项
- Masked Auto Encoder总结
- 如何做好一个中层管理?
- 生日祝福小程序_刘德华生日晒照帅气,60岁发型不输小鲜肉,刘嘉玲祝福显交情...
- 【大咖发声】推荐一本书,我自己写的书