Bootstrap の Grid system サンプル１

Grid system の基本。

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<div class="container">
    <div class="row">
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-2">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
        <div class="col-xs-1">1</div>
    </div>
    <div class="row">
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">2</div>
        <div class="col-xs-2">2</div>
    </div>
    <div class="row">
        <div class="col-xs-3">3</div>
        <div class="col-xs-3">3</div>
        <div class="col-xs-3">3</div>
        <div class="col-xs-3">3</div>
    </div>
    <div class="row">
        <div class="col-xs-4">4</div>
        <div class="col-xs-4">4</div>
        <div class="col-xs-4">4</div>
    </div>
    <div class="row">
        <div class="col-xs-5">5</div>
        <div class="col-xs-5">5</div>
        <div class="col-xs-2">2</div>
    </div>
    <div class="row">
        <div class="col-xs-6">6</div>
        <div class="col-xs-6">6</div>
    </div>
    <div class="row">
        <div class="col-xs-7">7</div>
        <div class="col-xs-5">5</div>
    </div>
    <div class="row">
        <div class="col-xs-8">8</div>
        <div class="col-xs-4">4</div>
    </div>
    <div class="row">
        <div class="col-xs-9">9</div>
        <div class="col-xs-3">3</div>
    </div>
    <div class="row">
        <div class="col-xs-10">10</div>
        <div class="col-xs-2">2</div>
    </div>
    <div class="row">
        <div class="col-xs-11">11</div>
        <div class="col-xs-1">1</div>
    </div>
    <div class="row">
      ...

CSS

.row div {
    border: 1px solid lightblue;
    text-align: center;
}