<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 手机、平板电脑、台式电脑</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">

<div class="row">

<div class="col-xs-6 col-sm-3 col-md-6 col-lg-9"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa
quae ab illo inventore veritatis et quasi architecto beatae vitae
dicta sunt explicabo.
</p>
</div>

<div class=" col-xs-6 col-sm-9 col-md-6 col-lg-3"
style="background-color: #dedef8;
box-shadow: inset 1px -1px 1px #444,
inset -1px 1px 1px #444;">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium.
</p>

<p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem.
</p>

Bootstrap自适应各种设备的更多相关文章

  1. 浅谈Bootstrap自适应功能在Web开发中的应用

    随着移动端市场的强势崛起,web的开发也变得愈发复杂,对于个体开发者来说,自己开发的网站,在电脑.手机.Pad等上面都要有正常的显示以及良好的用户体验.如果每次都要自己去调整网页去匹配各个不同的客户端 ...

  2. Bootstrap 自适应排列顺序

    一.前用 我们在做一些页面的设计时,总会想到自适应的问题.其实 Bootstrap 框架就很好的融合这个问题了.下面是我学习 Bootstrap 的总结. 二.问题来源 我为什么会遇见这个问题,是因为 ...

  3. 2016 医疗项目 Bootstrap 自适应页面布局（1）

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. 怎样自适应ios设备大小

       在编写移动端GIS程序的时候.常常要依据ios设备的大小来设置UI.曾经我在ios程序中,须要定义设备的值(如:宽度和高度),如: 可是假设是不同的设备.如iphone4.iphone5,甚至是 ...

  5. 多个按钮触发同一个Bootstrap自适应模态窗口

    在项目中可能会面对这样的一个场景: 界面上有多个按钮,我们希望点击这些按钮弹出同一个模态窗口,但希望模态窗口的内容是动态生成的,即,点击每个按钮弹出的模态窗口内容不同. 通常情况下,一个按钮对应一个模 ...

  6. bootstrap自适应栅格系统布局

  7. 通栏banner自适应各个设备

    思路:图片不要设置为div的background,因为你设置了background-size,但是div的height没设置一样没用,除非你搞个js判断,动态刷新. 换一种思路,直接用<img& ...

  8. 浅谈Web自适应

    前言 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置.移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率不一样.这给我们在编写前端界面时增加了困难, ...

  9. Bootstrap人民币玩家攻略

    用bootstrap及其它基于它的框架,做了多次网站大改版~对bootstrap的特点有了越来越深的了解~从一开始接触时觉得超级鸡肋,到后来觉得方便,再到后来觉得还是能不用就别用了~为什么这么说?我们 ...

随机推荐

  1. 剑指 Offer 43. 1～n 整数中 1 出现的次数 + 数位模拟 + 思维

    剑指 Offer 43. 1-n 整数中 1 出现的次数 Offer_43 题目描述 题解分析 java代码 package com.walegarrett.offer; /** * @Author ...

  2. C# webapi跨域

    C# webapi跨域   第一种在Web.config中<system.webServer>节点中配置(不支持多个域名跨域) 1 <httpProtocol> 2 <c ...

  3. MySQL使用入门--初识数据库

    MySQL使用入门 数据库概述 数据库是存放数据的仓库.在应用的开发中总是离不开数据的查询.处理.存储,例如图书管理系统就需要操纵和存储大量的数据.没有数据库之前我们使用文件存储数据,但是文件存储有很 ...

  4. const修饰符相关

    const修饰符相关 const修饰符表明一个变量是常量,大致分为三类:常量数组(等同于常量指针),常量指针,指向常量的指针. 常量数组中数据都是不可修改的,任何试图修改常量数组中的数据的操作都会报错 ...

  5. Tomcat详解系列(1) - 如何设计一个简单的web容器

    Tomcat - 如何设计一个简单的web容器 在学习Tomcat前,很多人先入为主的对它的认知是巨复杂的:所以第一步,在学习它之前,要打破这种观念,我们通过学习如何设计一个最基本的web容器来看它需 ...

  6. 想了解FlinkX-Oracle Logminer？那就不要错过这篇文章

    FlinkX-Oracle Logminer模块是FlinkX基于Logminer对Oracle重做日志进行实时采集分析,可对Oracle进行实时同步也可以通过指定SCN或者时间戳从某个节点进行同步, ...

  7. 密码学系列之:csrf跨站点请求伪造

    目录 简介 CSRF的特点 CSRF的历史 CSRF攻击的限制 CSRF攻击的防范 STP技术 Cookie-to-header token Double Submit Cookie SameSite ...

  8. warpperspective 透视变化的opencv实现

    warpperspective 透视变化的opencv2.0实现 1st-------2nd | | | | | |3rd-------4th 原始代码              cv::Mat sr ...

  9. 使用Gensim库对文本进行词袋、TF-IDF和n-gram方法向量化处理

    Gensim库简介 机器学习算法需要使用向量化后的数据进行预测,对于文本数据来说,因为算法执行的是关于矩形的数学运算,这意味着我们必须将字符串转换为向量.从数学的角度看,向量是具有大小和方向的几何对象 ...

  10. wap视频广告遇到的问题

    最近在做一个wap端的视频广告,耗了很多心力在上面,仍旧做不好.没想到wap浏览器对video标签这么不友好.广告需要在原编辑视频播完后插入并自动播放. ios浏览器点击播放按钮后喜欢自动全屏播放,希 ...