<!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. - description 方法作用

    自定义一个Person类 @interface Person : NSObject { int _age; double _height; double _weight; NSString *_nam ...

  2. A Recipe for Training Neural Networks [中文翻译, part 1]

    最近拜读大神Karpathy的经验之谈 A Recipe for Training Neural Networks  https://karpathy.github.io/2019/04/25/rec ...

  3. 面试题:Java开发中的23种设计模式详解(转)

    设计模式(Design Patterns) ——可复用面向对象软件的基础 设计模式(Design pattern)是一套被反复使用.多数人知晓的.经过分类编目的.代码设计经验的总结.使用设计模式是为了 ...

  4. Django rest_framework----序列化组件

    生成hypermedialink serializer.pclass BookModelSerializers(serializers.ModelSerializer): class Meta: mo ...

  5. sql语句in超过1000时的写法

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  6. Request[]与Request.Params[] 差别

    Request[]与Request.Params[] ,这二个属性都可以让我们方便地根据一个KEY去[同时搜索]QueryString.Form.Cookies 或 ServerVariables这4 ...

  7. 异步 Action 的定义

    ASP.NET MVC 3中的异步 Action 通过两个匹配的方法XxxAsync/XxxCompleted 来定义,这样的异步 Action 只能定义在继承自 AsyncConoller 的类型中 ...

  8. React学习笔记4

    遇到的问题 目前模板是自己任意定义的,样式不好控制 在组件设计时,可以把页面数据显示的地方,分割父子组件嵌套的结构,比如,商品数据显示列表,把组外层容器看成是父组件,里面是数据显示的渲染模板,看成是子 ...

  9. 排序算法汇总（java实现，附源代码）

    整理系统的时候发现了原来写的各种算法的总结,看了一下,大吃一惊,那时候的我还如此用心,具体的算法,有的已经模糊甚至忘记了,看的时候就把内容整理出来,顺便在熟悉一下,以后需要的时候就可以直接过来摘抄了. ...

  10. asp.net微信内置浏览器下Session失效

    问题记录:仅限安卓端微信内置浏览器,服务器集群设置了黏性Session,在Post请求时会强制走代理,导致出去的ip指向另一台服务器,黏性Session失效,用户状态无法保存. 目前想知道除了设置Se ...