source

PHP 루프를 사용하여 요소에 부트스트랩 행 및 적절한 열 번호 추가

factcode 2023. 4. 4. 22:29
반응형

PHP 루프를 사용하여 요소에 부트스트랩 행 및 적절한 열 번호 추가

PHP 루프와 Twitter Bootstrap의 12컬럼 그리드 시스템을 사용하여 다음과 같은 프런트 엔드를 작성하려고 합니다.

여기에 이미지 설명 입력

HTML 의 출력은 다음과 같습니다.

<div class="row">
    <div class="col-lg-4">
        Content...
    </div>
    <div class="col-lg-4">
        Content...
    </div>
    <div class="col-lg-4">
        Content...
    </div>
</div>

<div class="row">
    <div class="col-lg-4">
        Content...
    </div>
    <div class="col-lg-4">
        Content...
    </div>
    <div class="col-lg-4">
        Content...
    </div>
</div>

<div class="row">
    <div class="col-lg-6">
        Content...
    </div>
    <div class="col-lg-6">
        Content...
    </div>
</div>

PHP(WordPress)에서는 3개 항목마다 1개씩 포장하고 있습니다..rowdiv:

<?php $i=0; // counter ?>

<?php while ( have_posts() ) : the_post(); ?> 

    <?php if ($i%3==0) { // if counter is multiple of 3 ?>
    <div class="row">
    <?php } ?>

    <div class="col-md-4">
        Content...
    </div>        

    <?php $i++; ?>

    <?php if($i%3==0) { // if counter is multiple of 3 ?>
    </div>
    <?php } ?>

<?php endwhile; ?>

<?php if($i%3!=0) { // put closing div if loop is not exactly a multiple of 3 ?>
</div>
<?php } ?>


문제:

마지막 행의 항목에 적절한 열 번호를 추가하여 12 열 그리드를 채우는 방법을 모르겠습니다.

예를 들어, 위의 그림에서 마지막 행의 각 항목은col-612개의 그리드 시스템을 채웁니다.또 다른 예로, 마지막 행에 1개의 항목이 있는 경우 다음과 같이 표시됩니다.col-12.

주의: 각 행에는 그림과 PHP로 표시된 것과 같이 최대 3개의 항목이 있습니다.

다음 사항을 알고 있습니다.

  • 총 항목 수$loop->post_count

  • 품번$i

  • 마지막 행의 나머지 항목 수$loop->post_count%3(내 생각으로는)

  • 총 열 수12(12를 나머지 항목 수로 나누어 줄 열 번호를 계산할 수 있습니다.)

질문:.

위의 PHP 데이터를 사용하여 마지막 줄에 있는 항목의 열 번호를 변경하여 12개의 그리드를 채우도록 하려면 어떻게 해야 합니까?

저도 비슷한 상황을 겪고 있기 때문에 당신의 질문이 마음에 들었습니다.다른 답변은 조금 길기 때문에, 저는 여기에 남겨 두기로 했습니다.저는 변수를 적게 사용할수록 솔루션이 최선입니다.

Bootstrap Content Arranger.php

<?php
function BootstrapContentArrange($i) {
    $items = $i;                // qnt of items
    $rows = ceil($items/3);     // rows to fill
    $lr = $items%3;             // last row items
    $lrc = $lr;                 // counter to last row

    while ($items > 0) {        // while still have items
        $cell = 0;
        if ($rows > 1) {        // if not last row...
            echo '<div class="row">'.PHP_EOL;
            while ($cell < 3) {     // iterate with 3x4 cols
                echo '<div class="col-md-4">Content</div>'.PHP_EOL;
                $cell++;
            }
            echo "</div>".PHP_EOL;
        $rows--;        // end a row
        } elseif ($rows == 1 && $lr > 0) {      // if last row and still has items
            echo '<div class="row">'.PHP_EOL;
            while ($lrc > 0) {      // iterate over qnt of remaining items
                $lr == 2 ?      // is it two?
                    print('<div class="col-md-6">Content</div>'.PHP_EOL) :  // makes 2x6 row
                    print('<div class="col-md-12">Content</div>'.PHP_EOL); // makes 1x12 row
                $lrc--;
            } 
            echo "</div>".PHP_EOL;
            break;
        } else {        // if round qnt of items (exact multiple of 3)
            echo '<div class="row">'.PHP_EOL;
            while ($cell < 3) {     // iterate as usual
                echo '<div class="col-md-4">Content</div>'.PHP_EOL;
                $cell++;
            }
            echo "</div>".PHP_EOL;
            break;
        }
        $items--;       // decrement items until it's over or it breaks
    }
}

테스트 케이스

BootstrapContentArrange(3);
BootstrapContentArrange(11);
BootstrapContentArrange(1);
  1. 3개 항목, 출력:

<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>

  1. 11개 항목, 출력:

<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
<div class="col-md-4">Content</div>
</div>
<div class="row">
<div class="col-md-6">Content</div>
<div class="col-md-6">Content</div>
</div>

  1. 단일 항목, 출력:

<div class="row">
<div class="col-md-12">Content</div>
</div>

주의: 삭제가 가능합니다.PHP_EOL소스를 더 잘 읽기 위해 사용했습니다.

제가 이걸 할 때마다, 저는 그냥array_chunk행과 열에 적절한 배열 청크를 구축합니다.

예를 들어 다음과 같습니다.

$posts = [['id' => 1], ['id' => 2] ...]

행을 추가할지 여부를 루프하여 계산하는 대신 투고 청크를 만듭니다.

$posts = [['id' => 1], ['id' => 2] ...]

$postChunks = array_chunk($posts, 4); // 4 is used to have 4 items in a row
foreach ($postChunks as $posts) {
    <div class="row">
        foreach ($posts as $post) {
            <div class="col-md-3">
                <?=$post['id'];?>
            </div>     
        }
    </div>
}

먼저 마지막 행이 시작하는 항목을 찾아 해당 행의 모든 항목에 적절한 열 번호를 적용함으로써 해결 방법을 찾은 것 같습니다.

<?php
$max_columns = 3; //columns will arrange to any number (as long as it is evenly divisible by 12)
$column = 12/$max_columns; //column number
$total_items = $loop->post_count;
$remainder = $loop->post_count%$max_columns; //how many items are in the last row
$first_row_item = ($total_items - $remainder); //first item in the last row
?>

<?php $i=0; // counter ?>

<?php while ( have_posts() ) : the_post(); ?> 

    <?php if ($i%$max_columns==0) { // if counter is multiple of 3 ?>
    <div class="row">
    <?php } ?>

    <?php if ($i >= $first_row_item) { //if in last row ?>   
    <div class="col-md-<?php echo 12/$remainder; ?>">
    <?php } else { ?>
    <div class="col-md-<?php echo $column; ?>">
    <?php } ?>
        Content...
    </div>        

    <?php $i++; ?>

    <?php if($i%$max_columns==0) { // if counter is multiple of 3 ?>
    </div>
    <?php } ?>

<?php endwhile; ?>

<?php if($i%$max_columns!=0) { // put closing div if loop is not exactly a multiple of 3 ?>
</div>
<?php } ?>

장점은 임의의 숫자(12로 균등하게 나누기)를 추가할 수 있다는 것입니다.$max_columns적절한 컬럼이 적용됩니다.

모듈로를 평가해보는 건 어때?

$two = false; 
if($i%3 == 2)
{
      <div class="col-md-6">
         Content...
      </div>
      $two = true;  
}

if($i%3 == 1)
{
      if($two)
      {
          <div class="col-md-6">
              Content...
          </div>
      }
      else
      {
          <div class="col-md-12">
              Content...
          </div>              
      }          
}

각 요소의 html 클래스를 결정하는 행을 한 번에 인쇄합니다(0 col-md-4의 경우, 1 col-md-12의 경우).도우미 구조가 필요합니다.버퍼에 뭔가 있으면 마지막 행을 인쇄합니다.

/**
 * Prints the row in a grid
 * @param array $posts
 * @param string $class
 */
function printRow($posts, $class) {
    echo '<div class="row">';

    foreach ($posts as $post) {
        echo '<div class="' . $class . '">' . $post . '</div>';
    }

    echo '</div>';
}

$i = 0;
$htmlClasses = ['col-md-4', 'col-md-12', 'col-md-6']; //helper for setting html classes
$buffer = []; //helper array to hold row elements

while (have_posts()) {
    the_post();
    $i++;

    $mod = $i % 3;

    //determine html class
    $htmlClass = $htmlClasses[$mod];

    if ($mod > 0) {
        $buffer[] = $currentPost; //this is the post content
    } else {
        printRow($buffer, $htmlClass);
        $buffer = [];
    }
}

//printing final row if there are elements
if (!empty($buffer)) {
    printRow($buffer, $htmlClass);
}

        <?php
            //total products or items you have
            $total_pr = count($products);

            //grid of columns you want 
            $grid = 3;
            $tol_raw = ceil($total_pr / $grid);
            $count =0;
        ?>


        <?php for($i=0;$i<$tol_raw;$i++): ?>
            <?php

            $repeat = $grid;
            if($total_pr<$grid)$repeat = $total_pr;
            $total_pr -= $repeat;

            ?>
            <div class="row">
                <?php for($pr=0;$pr<$repeat;$pr++):?>
                    <?php $product = $products[$count]; ?>
                     <!-- column selection is based onn your grid -->
                    <div class="col-md-4">
                         //do whatever you want to do here
                    </div>
                    <?php $count++; ?>
                <?php endfor; ?>
            </div>
        <?php endfor; ?>

언급URL : https://stackoverflow.com/questions/32766409/using-php-loop-to-add-bootstrap-rows-and-proper-column-numbers-to-elements

반응형

'source' 카테고리의 다른 글

Form Group에서 단일 값을 가져오는 방법  (0) 2023.04.04
Amazon RDS Oracle 인스턴스에 연결할 때 "읽은 호출에서 하나 빼기" 오류에 접근하는 방법  (0) 2023.04.04
react js의 서비스 워커가 뭐죠?  (0) 2023.04.04
변수에서 각도 "| 필터" 식의 결과 배열을 얻으려면 어떻게 해야 합니까?  (0) 2023.04.04
스프링 부트 HTML 및 JavaScript 추가  (0) 2023.04.04

'source'의 다른글

  • 현재글PHP 루프를 사용하여 요소에 부트스트랩 행 및 적절한 열 번호 추가

관련글

댓글

티스토리툴바