Penggunaan fungsi M+D pada PHP

Question

Pada kesempatan kali ini saya akan menjelaskan tentang CaraPenggunaan Offset Pada Kolom Bootstrap, siapa yang tidak kenal dengan bootstrap, framework ini sangat mudah untuk di pelajari baik mudahnya informasi tentang dokumentasi dan forum forum yang sudah banyak tentang bootstrap, nah pada kali ini saya ingin membahas offset pada bootstrap, apa itu offset ?

Table of Contents Show

Col MD untuk apa?
Apa itu Col MD 3?
Apa itu Col MD pada bootstrap?
Apa itu Container Fluid?

offset adalah cara mendorong sebuah kolom agak kekanan sesuai dengan grid yang di tentukan, saya kasih contoh seperti ini, ketika saya ingin menempatkan .col-md-6 berada di tengah tengah pada tampilan monitor, maka saya akan menggunakan col-md-offset-3 didalam .col-md-6 contohnya seperti ini ..

Sebelum di offset :

Sesudah di offset

Ingat ! ofsset kolom harus sesuai dengan penempatan pada ukuran pertama, seperti teman teman menggunakan .col-md-6 maka offsetnya pun harus menggunakan md tidak di anjurkan menggunakan selain yang digunakan oleh teman teman walupun akan tetap jalan jika menggunakan yg lain tapi sangat dianjurkan untuk menggunakan kolom yang sama , Dan ini adalah baris programmnya :

<div class="container">
			<div class="row">
				<div class="col-md-6 col-md-offset-3">
					<div class="panel panel-primary">
						<div class="panel-heading"> Dengan Offset</div>
						<div class="panel-body">
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, quidem quam harum vitae numquam minus sequi necessitatibus rerum, ratione eos fugiat amet eaque, perferendis quibusdam nemo nulla doloribus at dignissimos.</p>
						</div>
					</div>
				</div>
			</div>
		</div>

cukup jelaskan bukan? sekian tutorial tentang CaraPenggunaan Offset Pada Kolom Bootstrap, sampai bertemu diartikel selanjutnya dan sampai jumpa.

#KeepLearn

#IsmetMA

Saya mencoba membuat front-end berikut menggunakan loop PHP dan sistem grid 12 kolom Twitter Bootstrap:

Output HTML adalah:

<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>

Di PHP (WordPress) saya membungkus setiap 3 item dalam .row div:

<?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 } ?>

Masalah:

Saya tidak tahu cara menambahkan nomor kolom yang sesuai ke item di baris terakhir sehingga mereka mengisi kisi 12 kolom.

Sebagai contoh, dalam ilustrasi saya di atas setiap item di baris terakhir memiliki col-6 (memperluas 6 kolom) mengisi sistem 12 grid. Sebagai contoh lain, jika ada 1 item di baris terakhir harus memiliki col-12.

Catatan: setiap baris memiliki 3 item paling banyak seperti yang ditunjukkan dalam ilustrasi dan dalam PHP.

Saya tahu yang berikut:

Total jumlah item $loop->post_count
Nomor item $i
Jumlah item yang tersisa di baris terakhir $loop->post_count%3 (saya pikir)
Total jumlah kolom 12 (12 dapat dibagi dengan jumlah item yang tersisa untuk mencari tahu jumlah kolom yang diberikan kepada mereka)

Pertanyaan:

Bagaimana saya bisa menggunakan data itu di PHP di atas untuk mengubah nomor kolom dari item di baris terakhir sehingga mereka akan mengisi 12 kisi (membuatnya terpusat)?

Col MD untuk apa?

col-md-xxx adalah class yang digunakan untuk mengatur grid layout pada layar monitor berukuran sedang. col-lg-xxx adalah class yang digunakan untuk mengatur grid layout pada layar desktop atau lebih besar.

Apa itu Col MD 3?

col-md-3 digunakan jika nanti device yang digunakan untuk mengakses web memiliki lebar 768 pixel atau lebih, maka elemen sidebar akan mendapatkan 3 grid dari total 12 grid. jadi elemen sidebar akan ditampilkan 3/12 bagian dari satu baris layout web, jangan lupa dalam satu baris layout itu memiliki 12 grid.

Apa itu Col MD pada bootstrap?

.col-md-* merupakan class prefix yang digunakan untuk membagi baris pada ukuran lebih besar atau sama dengan 992px atau medium.

Apa itu Container Fluid?

Class container-fluid adalah class kontainer yang ukurannya 100% di semua ukruan layar. Nah, setelah kita mengetahui blok dasar dari layout yakni container , berikutnya kita akan pelajari class row dan col .

kode php Bootstrap grid Bootstrap 5