Geek asks and answers

Tips for coding this layout using Twitter Bootstrap

I am trying to make this layout using Twitter Bootstrap (only in boxes):

enter image description here

Basically, this is an embedded video from YouTube and two identical sizes on the right.

I have it right now (haml):

.row
  .span8
    / embedded code
  .span4
    / I need to put two boxes here... how?
+5
source share
3 answers

You can stack the blocks .span*inside the container .row-fluid, which can then be nested in another block span*to create the effect you are looking for. Try this for example:

HTML

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span9">
            <div class="big box">
                box
            </div>
        </div>
        <div class="span3">
            <div class="row-fluid">
                <div class="span3">
                    <div class="box">
                        box
                    </div>
                </div>
                <div class="span3">
                    <div class="box">
                        box
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Notice how I put two side blocks on top of the other, contained in a container .row-fluidinside the other block .span*, to assemble them.

CSS .span* , :

CSS

.row-fluid [class*="span"] .row-fluid [class*="span"] {
    margin-left: 0;
    width: 100%;
}

: http://jsfiddle.net/k27S5/show/

HAML, :

HAML

.container-fluid
  .row-fluid
    .span9
      content
    .span3
      .row-fluid
        .span3
          content
        .span3
          content
+3

:

.row
  .span8
  .span4
    .row
     .span4
    .row
    .span4

:

.row-fluid
  .span8
  .span4
    .row-fluid
      .span12
    .row-fluid
      .span12

, , Bootstrap.

+2

, , twitter bootstrap, , .

, , , . - . , , .

<table>
  <tr>
    <td>big box on left</td>
    <td>
      <div>small top box on right</div>
      <div>small bottom box on right</div>
    </td>
  </tr>
</table>

0

More articles:


All Articles