Bootstrap @Media分类

【Bootstrap @Media分类】的更多相关文章

手机的屏幕比较小,宽度通常在600像素以下:PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768)设置相应的min-width和max-width值所以响应式设计一般对600px下,1000px上针对各版本做@media细化. 主要的有: 1.第一个断点群体就是针对于智能手机设置,他的宽度是小于480px( 2.第二个断点是高智能移动设备,比如说Ipads设备,他的宽度是小于768px( 3.第三个断点就是针对于大设备,比如说PC端,他的宽度是大于768px(>768p…

bootstrap无限级分类 jq拓展之前的无限级分类的封装版~

git地址:https://github.com/zhangjiahao93/jQ.select HTML部分 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>多级联动封装</title> <link href="./css/bootstrap.css" rel="st…

bootStrap @media 用法

一. @media 格式 @media all and (min-width:xxx) and (max-width:xxx) (亦可以写成@media all and (min-width:xxx) and (max-width:xxx)) {/*这段查询的all是针对所有设备(有些设备不一定是屏幕,也许是打字机,盲人阅读器)*/} @media only screen and (min-width:xxx) and (max-width:xxx){/*上面针对了所有设备,这段是只(only)…

【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势

A.优化站点资源速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap]2.作品展示站点中的资源.特别的,来看一看我们能控制的.影响页面速度的重要因素 —— 文件大小,包括图片.CSS和 JavaScript 文件.只要简单几步,我们就可以给这些文件“瘦身”,缩短加载时间. A.1 优化图片这些图片都通过 Photoshop 的 “保存为 Web 格式” 进行了一…

<<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫

并非闲的蛋疼,做技术也经常喜欢蛋疼,纠结于各种技术,各种需求变更,还有一个很苦恼的就是UI总是那么不尽人意.前不久自己开源了自己做了多年的仓储项目(开源地址:https://github.com/hechenqingyuan/gitwms),虽然比较简单业务也不算特别复杂,但终究是做出来了而且还有客户付费使用.做程序的成就感来源于两个方面: (1) 软件能够给自己带来物质上上的回报 (2) 让用户直观上感受到软件好用并且得到称赞(说白了有一个漂亮的UI) 一. 信息化管理系统模板这个是不是很…

【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势

A.优化站点资源速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap]2.作品展示站点中的资源.特别的,来看一看我们能控制的.影响页面速度的重要因素 —— 文件大小,包括图片.CSS和 JavaScript 文件.只要简单几步,我们就可以给这些文件“瘦身”,缩短加载时间. A.1 优化图片这些图片都通过 Photoshop 的 “保存为 Web 格式” 进行了一…

Media Queries 媒体查询常见设备断点

按需调整断点一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {}/* Landscape */@media only screen and (min-width : 321px) {}/* Portrait */@media only screen and (max-…

[转载]Understanding the Bootstrap 3 Grid System

https://scotch.io/tutorials/understanding-the-bootstrap-3-grid-system With the 3rd version of the great Bootstrap out for about 4 and a half months now, people have had their time to play around with it, learn the changes, find new features, and buil…

常见的media断点

landscape mode是指宽度比高度宽的模式,也就是俗称的宽屏模式: portrait mode是指高度比宽度高的模式,也就是俗称的竖屏模式: /*#region SmartPhones */ /* SmartPhones */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {} /* Landscape */ @media only screen and (min-widt…

Material Design学习

前言: 最为一个用习惯了bootstrap的前端小菜,今天偶然听闻material design 这个从未听闻的前端框架,带着好奇开始了新的尝试,并将bootstrap跟material design 进行对比 1.如何使用 bootstrap :引入bootstrap.css和bootstrap.js material design: 引入materialize.css和materialize.js 2.网格系统 bootstrap :col-lg-12 col…