bootstrap实现pc屏幕五等分
<!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屏幕五等分的更多相关文章
- 关于bootstrap栅格系统的五等分以及八等分代码
众所周知,bootstrap的栅格系统是基于十二等分的,今天拿到设计的设计稿一看,发现一个图片list上只有8张图片,然后上网查资料,发现只能自己写css代码实现,故写博客记录代码. 以下是八等分的代 ...
- Bootstrap <基础二十五>警告（Alerts）
警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...
- Droid@screen：在PC屏幕上显示Android手机屏幕
这里介绍一款工具——Droid@screen,用来获取手机屏幕,显示在PC屏幕上.它集截图.录像等多种功能于一体. 安装 1. 下载地址:http://droid-at-screen.org/d ...
- Bootstrap入门（十五）组件9：面板组件
Bootstrap入门(十五)组件9:面板组件 虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里.对于这种情况,可以试试面板组件. 1.基本实例 2.带标题的面板 3.情景效果 ...
- Android 如何将手机屏幕投影到 PC 屏幕上或者投影仪上做演示？
Android 如何将手机屏幕投影到 PC 屏幕上或者投影仪上做演示? 公司开发款APP,要给领导演示,总不能用手机面对面演示吧.所以找了好久,找到一款体验超好的: Total Control-帮助你 ...
- bootstrap注意事项（五）表单
1.基本实例 单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control类的 <input>.<textarea> 和 <select> 元素都 ...
- Bootstrap环境及屏幕适配-（一）
一.环境搭建 1.目录结构 需要引用的文件有, jquery.js.bootstrap.min.js 和 bootstrap.min.css 文件,下面看下在线的文档Hello Word <!D ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 辅助类：屏幕阅读器
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- bootstrap移动 pc 响应轮播
PC端效果 width100% 移动端 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta ...
随机推荐
- 大话设计模式C++版——表驱动法改造简单工厂
上回<大话设计模式C++版——简单工厂模式>中指出了简单工厂模式的缺陷,即违背了开发—封闭原则,其主要原因是由于switch的判断结构的使用,使修改或添加新的对象时需要改动简单工厂类的代码 ...
- Spring学习之第一个AOP程序
IOC和AOP是Spring的两大基石,AOP(面向方面编程),也可称为面向切面编程,是一种编程范式,提供从另一个角度来考虑程序结构从而完善面向对象编程(OOP). 在进行 OOP 开发时,都是基于对 ...
- java 23 - 2 设计模式之单例模式
单例模式:保证类在内存中只有一个对象. 如何保证类在内存中只有一个对象呢? A:把构造方法私有 B:在成员位置自己创建一个对象 C:通过一个公共的方法提供访问 单例模式之饿汉式: (一进来就造对 ...
- http协议（二）请求和响应报文的构成
http协议用于客户端和服务器之间的通信,请求访问资源的一方称为客户端,而提供资源响应的一方称为服务器端. 下面就是客户端和服务端之间简单的通信过程 PS:请求必须从客户端建立通信,服务端没收到请求之 ...
- python实现一个图灵机器人
这标题就是个噱头...其实用的别人的接口,就是这货. 下面是代码: # -*- coding: utf-8 -*- import urllib,urllib2 import sys import js ...
- Js多国时间动态更新
Js多国时间动态更新 点击下载
- C语言--指向多维数组的指针和指针数组
#include <stdio.h> //void show(char *p[]); ]); int main(){ ][]={","abc","x ...
- Iterator遍历器 调用Symbol.Iterator属性，遍历器对象。
Iterator实现原理 创建一个指针对象,指向当前数据结构的起始位置.也就是说,遍历器对象本质上,就是一个指针对象. 第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员. 第二次调 ...
- win7的优化-1:隐藏我的电脑导航栏里的收藏等项目
1. Type regedit in RUN or Start Menu search box and press Enter. It'll open Registry Editor. 2. Now ...
- （原创）mybatis学习四，利用mybatis自动创建代码
在使用mybatis的过程中,我们可以直接利用MyBatis生成器自动生成实体类.DAO接口和Mapping映射文件,然后copy到工程中即可 需要的jar包如下 下载路径如下:下载jar包 其中的g ...