Bootstrap栅格系统 显示当前屏幕大小和种类
bootstrap按照屏幕的宽度的不同分成了四个种类:
- 大屏幕:width > 1200px
- 中等屏幕:992px < width < 1200px
- 小屏幕:768px < width < 992px
- 极小屏幕: width < 768px
为了方便判断当前属于哪种屏幕及屏幕的宽度(无需打开浏览器调试)
可以通过引入js来辅助我们
效果如图:
实现方法:
引入jquery.js
引入showScreen.js
showScreen.js 代码:
whatScreen();
$(function () {$('[data-toggle="tooltip"]').tooltip()
})
window.location.href = "#footer";
window.onresize = function () {whatScreen();
}
function whatScreen() {var width = document.querySelector("html").offsetWidth;var title = document.querySelector("title");if (width <= 768) {title.innerHTML = "极小屏幕-" + width + "px";} else if (width > 768 && width <= 992) {title.innerHTML = "小屏幕-" + width + "px";} else if (width > 992 && width <= 1200) {title.innerHTML = "普通屏幕-" + width + "px";} else if (width > 1200) {title.innerHTML = "大屏幕-" + width + "px";}
}
Bootstrap栅格系统 显示当前屏幕大小和种类相关推荐
- bootstrap栅格系统
bootstrap栅格系统 原理: 1.栅格系统的"行(row)"包含在布局容器内 .container类或.container-fluid类中,以便于为其赋予合适的排列(al ...
- Bootstrap 栅格系统 理解与总结
Bootstrap 栅格系统 学习总结 Bootstrap框架是如今最流行的前端框架之一,Bootstrap功能强大,简单易学,很符合实际应用场景. 只是Bootstrap的内容较多,新手往往不能很快 ...
- Bootstrap栅格系统(布局)
栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅格系 ...
- 如何使用BOOTSTRAP 栅格系统?
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [如何使用BOO ...
- 移动WEB开发之响应式布局--Bootstrap栅格系统
栅格系统简介 栅格系统英文为"grid systems",也有人翻译为"网格系统",它是指将页面布局划分为等宽的列,然后通过列数 的定义来模块化页面布局. Bo ...
- bootstrap栅格系统布局原理
简介 栅格系统用于通过一系列的行(row)与列(col)组合来创建页面布局,你的内容就可以放入这些创建好的布局中.下面介绍一下栅格bootstrap栅格系统的工作原理: 行(row)必须放在.cont ...
- bootstrap栅格系统自定义列
bootstrap栅格系统默认是12列,有时候需自定义列数,比如显示5列 简单做法:原理就是找到控制列的样式覆盖它,这里以中等屏幕示例: <span style="font-size: ...
- 视频监控系统显示大屏幕用液晶拼接屏还是液晶监视器?
视频监控系统与我们的日常生活息息相关,在一些大型的企业.社区物业.商场.银行等场合都会安装视频监控录像设备,以确保我们的人身.财产安全,及时发现不法分子的活动,能做到提前发现与作为后期的证据使用.视频 ...
- Bootstrap 栅格系统
Bootstrap 栅格系统 目录 1.简介 2.栅格选项 3.列偏移 4.嵌套列 5.列排序 1.简介 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewp ...
最新文章
- .NET4.0并行计算技术基础(8)
- Cell Research:华农解析水虻基因组图谱和肠道微生物组降解规律
- 数据库自动收缩带来的严重问题
- php中浮点型的精确度,PHP中的浮点精度和类型
- KMP算法的JavaScript实现
- CacheManager - 用 C# 编写的 .NET 的开源缓存抽象层
- 网站开发技巧参考大全 event js
- 项目部署—移除Spring Boot内置Tomcat,部署到云服务器Tomcat
- javascript 进度条的几种方法
- ubuntu 16.04 + zabbix 3.4 + postgresql shell
- OSAL--操作系统抽象层 初始化流程分析
- 批量图片压缩、生成PDF文件及PDF文件压缩
- 从零做一个小程序(计算器)赚钱
- OD使用经验【转载】
- 有哪些实用的软件开发项目管理工具?
- 解决Number of partitions scanned (=2001) on table ‘tablexx‘ exceeds limit (=2000)
- What?模电比数电难学?
- Shodan完全手册部分翻译(1)
- dns劫持 tplink_路由器dns被劫持有什么后果【图】
- Chino with Rewrite
热门文章
- 黑产盯上“吃鸡”游戏 木马盛行勒索扣费
- 软与硬的碰撞,打造出OPPO R17 Pro的强悍夜拍体验
- 国内当前游戏公司一览
- python简易英文字典_Python简单有道字典,python,简易,词典
- mysql8 分组排序取第一或者前几
- Arduino 眨眼睛
- php中颜色的标签,HTMLfont标签的color属性是什么?fontcolor的用法介绍(附颜色代码表)...
- kill -9无法杀死进程
- Goland 包自动智能排序和分屏设置
- Mysql大数据量查询优化的思路