<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>

        body{

            margin: 0;

        }

        .pg{

            width: 100%;

            background-color: rebeccapurple;

        }

        @media (min-width: 666px) {

            .pg{

                background-color: green;

            }

        }

        @media (min-width: 888px) {   //大于 888 就红色

            .pg{

                background-color: red;

            }

        }

    </style>

</head>

<body>

    <div>

        <div class="pg">响应式布局</div>

    </div>

</body>

</html>

基于 bootstrap html 响应式 布局的更多相关文章

  1. Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板

    Metronic 是一套精美的响应式后台管理模板,基于强大的 Twitter Bootstrap 框架实现.Metronic 拥有简洁优雅的 Metro UI 风格界面,6 种颜色可选,76 个模板页 ...

  2. FineUI十周年纪念版即将发布（基于像素的响应式布局，独此一家）！

    [新版预报]FineUI十周年纪念版(v5.0.0)即将于2018-04-23发布! 官网示例已更新:http://pro.fineui.com/ 特别助攻:基于像素的响应式布局,FineUI独家秘笈 ...

  3. 关于bootstrap和响应式布局

    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...

  4. Bootstrap禁用响应式布局

    在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootst ...

  5. Bootstrap实战 - 响应式布局

    一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...

  6. Metronic-最优秀的基于Bootstrap的响应式网站模版

    在所有我看到过的基于Bootstrap的网站模版中,Metronic是我认为最优秀的,其外观之友好.功能之全面让人惊叹.Metronic 是一个自适应的HTML模版,提供后台管理模版和前端内容网页模版 ...

  7. 基于 Bootstrap 的响应式后台管理面板

    你想建立一个后台管理面板或者分析仪表板吗?不需从头开始,Keen IO Bootstrap 是一个响应式的仪表盘模板,可以帮助你在几分钟内呈现数据,让你可以创建一个有吸引力的,定制的分析仪表板,随时可 ...

  8. 推荐几款基于Bootstrap的响应式后台管理模板

    1.Admin LTE 该模版开源免费. AdminLTE - 是一个完全响应式管理模板.基于Bootstrap3的框架.高度可定制的,易于使用.支持很多的屏幕分辨率适合从小型移动设备到大型台式机. ...

  9. 转：Metronic – 超赞！基于 Bootstrap 的响应式后台管理模板

    http://www.cnblogs.com/lhb25/p/metronic-responsive-admin-dashboard-template.html

随机推荐

  1. vector的简单用法

    vector是C++中容器的一种,与普通的数组相比,它可以动态的增长,而且还有封装了用于顺序表的操作的方法. 使用vector定义了容器之后,如果定义了容器的大小,则可以在大小范围之内直接使用数组的方 ...

  2. 35.MID() 函数

    MID() 函数 MID() 函数 MID 函数用于从文本字段中提取字符. SQL MID() 语法 SELECT MID(column_name,start[,length]) FROM table ...

  3. Python3 网络爬虫开发实战学习弱点书签

    1. urllib.robotparse模块对robot.txt文件的解析,can_fetch()方法和parse()方法. Page121 2. lxml.etree模块自动补全Html代码,Htm ...

  4. openvswitch安装

    安装前准备软件包及版本 Gcc pkg-config autoconf automake m4 python2.X 下载OVS软件包 http://openvswitch.org/releases/o ...

  5. javascript中把一个数组的内容全部赋值给另外一个数组

    如:var a = [1,2,3,4];var b= [];b = a;这个不是把值赋值过去而是b作为a的引用,b改变的是a如何b指向的是一个新数组,a把元素值全部赋值过去? 1.普通数组可以使用   ...

  6. javascript总结10:JavaScript的Switch语句

    1 switch语句 的作用: switch 语句用于基于不同的条件来执行不同的动作. 每当满足一个变量条件,就会执行当前的case内容. break 关键字用于跳出switch代码块.会终止swit ...

  7. Java学习第六篇:集合类

    一.Java集合类框架 Java集合大致可分为Set.List和Map三种体系,其中Set代表无序.不可重复的集合:List代表有序.重复的集合:而Map则代表具有映射关系的集合:从Java5以后,J ...

  8. JavaEE互联网轻量级框架整合开发（书籍）阅读笔记（2）：SSM+Redis概念理解

    一.SSM+Redis的结构图 在Java互联网中,以Spring+SpringMVC+MyBatis(SSM)作为主流框架,SSM+Redis的结构图如下: 二.下面介绍它们各自承担的功能: 1.S ...

  9. vs2012 许可 tfs 许可

    Team Foundation Server 2012序列号或MSDN版本 BVGTF-T7MVR-TP46H-9Q97G-XBXRB VS2012注册码 亲测成功.我的是旗舰版... YKCW6-B ...

  10. 建造者（Builder）模式 *

    一. 建造者(Builder)模式 建造者模式可以将一个产品的内部表象与产品的生成过程分割开来,从而可以使一个建造过程生成具有不同的内部表象的产品对象. 二. Builder模式的结构: 建造者(Bu ...