<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/test.css" rel="stylesheet">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-8"> .col-md-8</div>
            <div class="col-md-4"> .col-md-4</div>
        </div>
        <!-- 实例：手机、平板、桌面 -->
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
            <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
        </div>
        <div class="row">
            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
            <!-- Optional: clear the XS cols if their content doesn't match in height -->
            <div class="clearfix visible-xs-block"></div>
            <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
        </div>
    </div>
</body>

</html>

bootstrap响应式布局简单实例的更多相关文章

  1. Bootstrap响应式布局

    Bootstrap响应式布局可以使用栅格化系统,其实就是不同的列组合,配合起来便能组合出强大的功能,系统会自动分为最多12列,超出12列会作为一个整体另起一行,像制作表格table的合并列,功能跟co ...

  2. 前端框架bootstrap(响应式布局)入门

    Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加b ...

  3. Bootstrap响应式布局介绍

    一.响应式布局 1.什么是响应式网页 2.响应式网页必须做到的几件事 1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) ...

  4. JGUI源码：响应式布局简单实现(13)

    首先自我检讨下,一直没有认真研究过响应式布局,有个大致概念响应式就是屏幕缩小了就自动换行或者隐藏显示,就先按自己的理解来闭门造车思考实现过程吧. 1.首先把显示区域分成12等分,bootstrap是这 ...

  5. bootstrap响应式设计简单实践。

    首先需要熟悉Boostrap提供的响应式设施:http://getbootstrap.com/css/#responsive-utilities,BootStrap的响应式设施主要是利用媒体查询对元素 ...

  6. bootstrap响应式布局原理

    百分比布局+媒体查询 首先通过媒体查询确认container的宽度,每个col-xx-xx都是通过百分比定义的,屏幕尺寸变化了,container就变化了,col自然就变了 Bootstrap的官方解 ...

  7. Bootstrap响应式布局(1)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  8. css模拟Bootstrap响应式布局——栅格

    做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...

  9. bootstrap 响应式布局

    先上点媒体查询css(某个著名的”段子“),跟bootstrap无关: <html> <head> <style> body { background-color: ...

随机推荐

  1. EnableViewState=“false”不能乱用啊

    有时候页面源文件里有一段看上去像乱码的代码,这时候为了加快页面的加载速度,可以使用EnableViewState=“false”,这时候页面上的乱码就会消失了.但是,关于这个问题作者郁闷了好久,之前为 ...

  2. Struts2+Spring3+Mybatis3开发环境搭建

    本文主要介绍Struts2+Spring3+Mybatis3开发环境搭建 Struts和Spring不过多介绍. MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架.MyBa ...

  3. shell if判断语句

    测试脚本是否有语法错误: sh  -n  脚本名 一.if语句: 二.逻辑运算解析: -f  判断文件是否存在 -d 判断目录是否存在 -eq 判断是否相等 -ne 判断是否不相等 -lt 小于 -g ...

  4. MySQL中的datetime与timestamp比较-------转载

    原文地址http://database.51cto.com/art/200905/124240.htm MySQL中的datetime与timestamp比较 本文将通过实例比较MySQL中的date ...

  5. sqlmap我常用到的几个参数

    -r "抓的包存放的文件路径.txt"    一般方便带cookie与session类型 --dbms Oracle/Mysql     指定数据库类型 指定变量注入点变量:在变量 ...

  6. 【iCore、iCore2、iBoard例程】【异步FIFO跨时钟域通信（通过ARM 读FPGA FIFO）】

    欢迎访问电子工程师学堂,以便了解更多内容:http://www.eeschool.org 一.本实验基于iCore2 完成,通过简单改动,即可用在 iCore 核心板.iBoard 电子学堂上. iC ...

  7. JavaScript系列：函数调用方式

    有关JS的问题,持续更新.. 一,函数调用的4种方式 1,函数调用模式 //下面这种模式叫 “函数调用模式”:窗后window来调用 //函数调用四种方式的基础 //这tm不就是作用域this的问题吗 ...

  8. 每天php函数 - explode() 使用一个字符串分割另一个字符串

    array explode ( string $delimiter , string $string [, int $limit ] ) 此函数返回由字符串组成的数组,每个元素都是 string的一个 ...

  9. HTTP 笔记与总结（5）socket 编程：使用 HTTP 协议模拟登录并发帖

    在 VeryCD 上注册两个帐号,发送和接收站内信,观察 POST 请求时发送的参数(h****2 发送给 d***2).(最好用 FireFox 的 FireBug 工具,发送站内信之前选中 “保持 ...

  10. Javascript 笔记与总结（2-15）结构、样式、行为分离

    [例] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...