b1

by dirkk0

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<div class="container" style="background-color: #efefef;padding-top: 30px;
      padding-bottom: 30px;">
    <div class="row">

      <div class="span4">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
      </div>

      <div class="span4">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
      </div>
      <div class="span4">
        <h1>Bootstrap starter template</h1>
        <p>Use this document as a way to quick start any new project.<br> All you get is this message and a barebones HTML document.</p>
      </div>
      </div>
    </div> <!-- /container -->

CSS

.span1{ background: #cdcdcd; }
.span2{ background: #cdaacd; }
.span3{ background: #cdcdaa; }
.span4{ background: #aacdaa; }
.span6{ background: #aacdcd; }
.span12{ background: #cdaacd; }

JavaScript

var t1 = "test";


function doit(v) {
    if (v == 1) {
        lines = ["12 ",
                                     "6 3 3",
                                     "3 6 3",
                                     "4 4 4",
                                     "6 6"
                                    ];
    }
    else {
        lines = ["6 3 3",
                                     "3 6 3",
                                     "4 4 4",
                                     "6 6"
                                    ];
    }

    $('#content').empty();

    for (var r = 0, l = lines.length; r < l; ++r) {
        blocks = lines[r].split(" ");
        $('<div/>', {
            "id": "r" + r,
            "class": "row"
        }).appendTo('#content')

        for (var i = 0, l = blocks.length; i < l; ++i) {

            $('<div/>', {
                "class": "span" + blocks[i],
                html: blocks[i] + "<br><br><br>",

            }).appendTo('#r' + r)

        }
    }
}



/* JavaScript Media Queries */
if (matchMedia) {
    var mq = window.matchMedia("(min-width: 768px) and (max-width: 979px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// media query change

function WidthChange(mq) {

    var msg = (mq.matches ? "more" : "less") + " than x pixels";
    document.getElementById("a").firstChild.nodeValue = msg;
    console.log(msg);
    mq.matches ? doit(1) : doit(2);
}