使用twitter引导的CSS布局

我被要求使用Twitter引导程序创建布局，当按下某个按钮时，引导程序会发生相当大的变化 - 所以我需要编写一些JavaScript来更改布局。让我解释一下：使用twitter引导的CSS布局

默认情况下：一个3列的布局，其中最右边的列被分成一半，做出一个上部和下部。例如：

<div class="container"> 
    <div id="grid"> 
     <div class="row"> 
      <div class="span4 visible">LEFT</div> 
      <div class="span4 visible">CENTER</div> 
      <div class="span4 visible"> 
       <div class="span4 visible">RIGHT TOP</div> 
       <div class="span4 visible">RIGHT BOTTOM</div> 
      </div> 
     </div> 
    </div>

然后，如果点击某个按钮，右下方的块会展开并占据中间和右侧列，向上推中间列。例如：

<div id="grid"> 
    <div class="row"> 
     <div class="span4 visible">LEFT</div> 
     <div class="span8 visible"> 
      <div class="row"> 
       <div class="span4 visible">CENTER TOP LEFT</div> 
       <div class="span4 visible">CENTER TOP RIGHT</div> 
      </div> 
      <div class="row"> 
       <div class="span8 visible">CENTER BOTTOM</div> 
      </div>      
     </div> 
    </div> 
</div>

我应该如何解决这个问题？或者我应该完全使用不同的方法？来自客户端的问题是：让底部右边的框在屏幕上展开，占据两列，从而使顶部右侧和顶部中心块更小，但是可滚动。

谢谢！

来源

2013-10-15 Jochen van Wylick

你在使用Bootstrap 2还是3？到目前为止你尝试过什么，或者这是“我从哪里开始？”题？ :) –

引导2，而不是它。 –

OK，所以我想它了。这其实很简单。以下是我所做的：

 <div class="container-fluid" style="height:100%"> 
      <div class="row-fluid" style="height:100%"> 
       <div class="span4">LEFT</div> 
       <div class="span4 willMoveUp">CENTER</div> 
       <div class="span4 willMoveUp">TOP RIGHT</div> 
       <div class="span4">BOTTOM RIGHT 
       </div> 
      </div>

默认情况下，LEFT和CENTER的高度为100％，TOP和BOTTOM右侧的高度为50％。所以我做onClick的是：

将'.willMoveUp's的高度设置为20％。
这将使底部右侧部分跳到左侧，反对左侧栏。
右边部分由span8类取代span4，并使其80％的高度

完成 - 小菜一碟。谢谢

来源

2013-10-23 10:42:05

您可以使用jQuery和尝试这个办法：

  $('li a').onClick(function(){ 
      $(this).addClass('visible'); 
      });

来源

2013-10-15 12:41:29 sush

使用twitter引导的CSS布局

回答

相关问题