<!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. Mac or Centos 下如何编译objective-C

    #import <Foundation/Foundation.h> int main(int argc,const char *argv[]){ @autoreleasepool{ NSL ...

  2. winform学习之----图片控件应用（上一张，下一张）

    示例1: int i = 0;        string[] path = Directory.GetFiles(@"C:\Users\Administrator\Desktop\图片&q ...

  3. hdu-acm stepsHumble Numbers

    这是我做的第六道动态规划水题,对动态规划差不多有了一个大致的概念.动态规划有几个关键因素,第一是最优子结构,第二是状态和状态转移方程.整个过程都是以  最优  为中心的.因此在状态转移方程中常涉及到几 ...

  4. NP

    一个决定性问题C 若是为NPC,则代表它对NP是完备的,这表示: 它是一个NP问题,且 其他属于NP的问题都可归约成它. 满足条件2(无论是否满足条件1)的问题集合被称为NP-hard.一个NP-ha ...

  5. FZU 2092 bfs+记忆化搜索

    晚上团队训练赛的题 和普通bfs不同的是 这是同时操纵人与影子两个单位进行的bfs 由于可能发生人和影子同时接触水晶 所以不可以分开操作 当时使用node记录人和影子的位置 然后进行两重for循环来分 ...

  6. jQuery 找到当前元素之前最后一次出现的某个同辈元素

    DOM 树状图如下所示,要找到 div id = 'a' 的元素之前的(同辈)离该 div 最近的一个 div class = 'a' 的元素(图中左至右第 2 个 div class = 'a' 的 ...

  7. 使用 PHP 限制下载速度

    使用 PHP 限制下载速度 ［来源］ 达内    ［编辑］ 达内   ［时间］2012-12-12 经常遇到一个问题,那就是有人再办公室下载东西,影响大家上网.办公.同样的问题,要是出现在了服务器上面 ...

  8. Rails--bundle exec rake db:migrate

    --新建表: def up create_table :[TABLE_NAME] do |t| t.column :[NUM], :integer t.column :[NAME], :string ...

  9. js获取各种宽高方法

    屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高 ...

  10. Apache服务器安装配置

    Apache服务器安装 1.Apache服务器安装      在Linux系统下,apache服务器的安装方式比较灵活,可以使用二进制包安装,比如:rpm包.deb包.已编译好的包.也可以简单的使用y ...