<!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. SpringMVC+Spring+MyBatis整合完整版Web实例(附数据)

    最近段时间正在学习Spring MVC和MyBatis的一些知识.自己也在网络上面找了一些例子来练习.但是都不是很完整.所以,今天,自己也抽空写了个完成的关于Spring MVC + Spring + ...

  2. C++ Split string into vector<string> by space

    在C++中,我们有时候需要拆分字符串,比如字符串string str = "dog cat cat dog"想以空格区分拆成四个单词,Java中实在太方便了,直接String[] ...

  3. Odoo(OpenERP)　多个子类重载同一个父类方法的执行顺序及如何调用父类的父类方法

    首先说下起因,在修改英国会计模块(没错,就是那个安格鲁撒克逊记账模式!)中不符合中国国情的部分供能时,碰到了一个棘手的问题,简单的说就是B类继承它的父类A并重载了A的方法M,同时C类也继承了A类也重载 ...

  4. Linux kernel perf_swevent_init Local root Exploit

    64位上编译 另外修改了原Exploit的一个错误 第76行 把     uint64_t *p = (void *) ¤t[i]; 改成       uint64_t *p = (void *) & ...

  5. Phaser.Game这个函数都有哪些参数

    Phaser是一个简单易用且功能强大的html5游戏框架,利用它可以很轻松的开发出一个html5游戏.在这篇文章中我就教大家如何用Phaser来制作一个前段时间很火爆的游戏:Flappy Bird,希 ...

  6. windows batch语法

    windows BATCH基本知识扩展名是bat(在nt/2000/xp/2003下也可以是cmd)的文件就是批处理文件. ==== 注 =============================== ...

  7. Linux下LDAPSearch的例子

    apt-get install ldap-utils LdapSearch examples The following examples are taking from various ldapse ...

  8. 【iCore3双核心板】扩展引脚分布

    PDF 版下载: http://files.cnblogs.com/files/xiaomagee/iCore3%E6%89%A9%E5%B1%95%E5%BC%95%E8%84%9A%E5%88%8 ...

  9. 如何使用 Migration创建一个迁移

    切换到YII所在的目录 yii migrate/create test

  10. poj 2186 tarjan求强连通分量

    蕾姐讲过的例题..玩了两天后才想起来做 貌似省赛之后确实变得好懒了...再努力两天就可以去北京玩了! 顺便借这个题记录一下求强连通分量的算法 1 只需要一次dfs 依靠stack来实现的tarjan算 ...