<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>屏幕五等分</title>
<meta name="generator" content="EverEdit" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<style>
@media (min-width: 1200px) {
.col-zdlg-2-5{
float: left;
width:20%;

}
}
h2{
font-family: "Microsoft Yahei";
font-weight: 500;
line-height: 1.1;
color:#000;
}

.col-red-border{
border:1px solid red;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="rows">
<div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
<h2>屏幕五等分</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
<h2>屏幕五等分</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
<h2>屏幕五等分</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
<h2>屏幕五等分</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-zdlg-2-5 col-red-border">
<h2>屏幕五等分</h2>
</div>
</div>
</div>
</body>
</html>

bootstrap实现pc屏幕五等分的更多相关文章

  1. 关于bootstrap栅格系统的五等分以及八等分代码

    众所周知,bootstrap的栅格系统是基于十二等分的,今天拿到设计的设计稿一看,发现一个图片list上只有8张图片,然后上网查资料,发现只能自己写css代码实现,故写博客记录代码. 以下是八等分的代 ...

  2. Bootstrap <基础二十五>警告（Alerts）

    警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...

  3. Droid@screen：在PC屏幕上显示Android手机屏幕

    这里介绍一款工具——Droid@screen,用来获取手机屏幕,显示在PC屏幕上.它集截图.录像等多种功能于一体. 安装 1.    下载地址:http://droid-at-screen.org/d ...

  4. Bootstrap入门（十五）组件9：面板组件

    Bootstrap入门(十五)组件9:面板组件 虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 1.基本实例 2.带标题的面板 3.情景效果 ...

  5. Android 如何将手机屏幕投影到 PC 屏幕上或者投影仪上做演示？

    Android 如何将手机屏幕投影到 PC 屏幕上或者投影仪上做演示? 公司开发款APP,要给领导演示,总不能用手机面对面演示吧.所以找了好久,找到一款体验超好的: Total Control-帮助你 ...

  6. bootstrap注意事项（五）表单

    1.基本实例 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control类的 <input>.<textarea> 和 <select> 元素都 ...

  7. Bootstrap环境及屏幕适配-（一）

    一.环境搭建 1.目录结构 需要引用的文件有, jquery.js.bootstrap.min.js 和 bootstrap.min.css 文件,下面看下在线的文档Hello Word <!D ...

  8. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：屏幕阅读器

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  9. bootstrap移动 pc 响应轮播

    PC端效果 width100% 移动端 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...

随机推荐

  1. 太阳系Demo(openGL)

    这个是8年前写的demo,提交的一份作业,按照提出的需求点,以最快和最简单的方式完成功能,因此代码比较简单. 1)截图 2) 功能点描述: 1.公转,自传 2.基础的摄像机运动 3.正视和顶视 4.天 ...

  2. 如何用ZBrush做人体造型雕刻

    之前我们用ZBrush®中的Curves和Insert笔刷快速创建模型的躯干.四肢以及手指.经过老师耐心的讲解我们也收获了很多,知道了创建模型的流程和雕刻技巧.今天的ZBrush教程将结合一些新的雕刻 ...

  3. 编写 Unity Editor 插件

    Editor Style Viewer 在开发过程中,我喜欢编写一些辅助的Editor插件,方便在游戏开发过程进行调试. 下面是摘自Asset Store的一个查看Unity 默认GUI样式的小工具 ...

  4. 在JAVA中，关于反射机制的讨论

    一.什么是反射机制         简单的来说,反射机制指的是程序在运行时能够获取自身的信息.在java中,只要给定类的名字,     那么就可以通过反射机制来获得类的所有信息. 二.哪里用到反射机制 ...

  5. 怎样关闭WIN7系统的自动更新

    百度经验 > 游戏/数码 > 电脑 > 电脑软件 怎样关闭WIN7系统的自动更新 听语音 | 浏览:108460 | 更新:2012-07-24 18:03 | 标签:win7 1 ...

  6. dp入门问题

    昨天晚上的rank彻底废了..一个星期没敲代码完全没手感.作为总结,贴一道昨天浪费了我两小时的dp.http://acm.dirring.com/problem.php?cid=1003&pi ...

  7. struts2配置详解

    01.Struts 2基本结构 使用Struts2框架实现用登录的功能,使用struts2标签和ognl表达式简化了试图的开发,并且利用struts2提供的特性对输入的数据进行验证,以及访问Servl ...

  8. apt-get update更新源时，出现“Hash Sum mismatch”问题

    当使用apt-get update更新源时,出现下面"Hash Sum mismatch"的报错,具体如下:root@localhost:~# apt-get update.... ...

  9. Kali linux渗透测试常用工具汇总1

    1.ProxyChains 简介:代理工具.支持HTTP/SOCKS4/SOCK5的代理服务器,允许TCP/DNS通过代理隧道. 应用场景:通过代理服务器上网. 配置:/etc/proxychains ...

  10. lodop打印控件一点记录

    今天初步接触了下打印控件 LODOP实现了自动分页,高度宽度都可以自己设定来分页. 页码,使用LODOP.SET_PRINT_STYLE("ItemType", 2); LODOP ...