bootstrap栅格式布局
2017-11-20 16:18
246 查看
根据屏幕大小切换布局
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> 屏幕自适应--栅格布局 </title> <link rel="stylesheet" href="./css/bootstrap.min.css"> <style> body { background-color: rgb(170, 164, 164); } @media screen and (max-width: 1200px) { body { background-color: red; } } @media screen and (max-width: 992px) { body { background-color: yellow; } } @media screen and (max-width: 768px) { body { background-color: green; } } @media screen and (max-width: 320px) { body { background-color: blue; } } </style> </head> <body> <script src="./js/jquery-3.2.1.min.js"></script> <script src="./js/bootstrap.min.js"></script> </body> </html>
相关文章推荐
- bootstrap的常用组件和栅格式布局详解
- Bootstrap页面布局5 - 响应式布局(格式)
- 关于BootStrap框架中的网格式布局详解,以及消除外边距和container-fluid属性的解释。
- Android的多种布局格式
- bootstrap布局中input输入框右侧图标点击功能
- 理解 CSS 布局和块级格式上下文
- 新出炉的最全手机自适应布局格式(亲测有效)
- Bootstrap 标签导航的布局
- Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)
- 不用bootstrap,只用CSS创建网格布局
- bootstrap14-悬停表格布局
- C++代码格式规范引导(一):引言与代码布局
- 总结:bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位、打开新标签
- Bootstrap 布局组件
- [布局] bootstrap基本标签总结
- Glade两种布局文件格式GtkBuilder和Libglade在python中的导入代码
- 转:Bootstrap的常用类(CSS和布局组件)的总结
- Bootstrap栅格布局系统的特点
- Bootstrap可视化布局
- Bootstrap布局自动拉伸改变大小