WHAT'S NEW?
Loading...

How to setup Twitter Bootstrap span4 and span6 in dynamic websites


 
SPAN6 EXAMPLE
 
Suppose you want this structure
 
<div class="row-fluid">
  <div class="span6"></div>
  <div class="span6"></div>
</div>
<div class="row-fluid">
  <div class="span6"></div>
  <div class="span6"></div>
</div>
 
If you are looping through $posts variable, and that the html is in the content property 
of each $post:

$i=0;
foreach ($posts as $post):
    if ($i%2==0) echo '<div class="row-fluid">';
      echo '<div class="span6">'. $post->content .'</div>';
    if ($i%2==1) echo '</div>';
    $i++;
endforeach; 

SPAN4 EXAMPLE 
 
 <div class="row-fluid">
  <div class="span4"></div>
  <div class="span4"></div> 
  <div class="span4"></div>
</div>
<div class="row-fluid">
  <div class="span4"></div>
  <div class="span4"></div>  
  <div class="span4"></div>
</div>

Display 6 random WordPress posts in 3 responsive columns and 2 rows

<?php
    $the_query = new WP_Query("showposts=6&cat=1&orderby=rand");
    while ( $the_query ->have_posts() ) {$the_query ->the_post(); $i++;
        if ($i == 1){echo "<div class=row-fluid>";}
        ?>
            <div class="span4">
                Random Post <?php echo $i ; ?>
            </div>
        <?php
        if ($i == 3){echo "</div><div class=row-fluid>";}
        if ($i == 6){echo "</div>";$i=0;}
    }
    wp_reset_postdata();
?>

0 comments:

Post a Comment