class card จะเชื่อมต่อกับข้อมูลในฐานข้อมูลได้ยังไงคะ
โดยปกติ Bootstrap มาตราฐานคือ 1 rows มี 12 col ถ้าคุณอยากให้มีรายละเอียดแถวละ 3 นำไปหาร 12 ผลลัพที่ได้คือ 4 col ต่อ 1 rows
ประวัติการแก้ไข
Date :
2021-02-27 00:58:33By :
Genesis™
Code (PHP) </table>
<div class="col col-sm-9 col-md-9">
<br>
<div class="alert alert-info" role="alert">
- ข่าวประชาสัมพันธ์
</div>
<div class="row slider">
<div class="col-md-12" >
<!-- loop ผลลัพธ์เริ่มตรงนี้ -->
<div class="card" style="width: 100%;">
<img src="2.jpg" class="card-img-top" alt="..."> ดึงภาพจากฐานข้อมูลมาแสดง
<div class="card-body">
<h5 class="card-title">ค่ายที่1</h5> ใส่ตัวแปรชื่อกิจกรรม
<a href="#" class="btn btn-primary btn-sm" target="_blank">Read More..</a>
</div>
</div>
<!-- สิ้นสุดการ loop ตรงนี้ -->
</div>
</div>
Date :
2021-02-27 04:58:29By :
mr.v
วิธีการแก้ไขความต้องการ ณ. ปี ค.ศ. 2021 โดยใช้ CSS Flexbox/GridCode (PHP) <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
.card-3-columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* แบ่งสามดอลัมภ์ เท่าฯกัน*/
column-gap: 8px; /* ระยะห่างระหว่าง ดอลัมภ์*/
grid-row-gap: 10px; /* ระยะห่างระหว่าง แถว*/
box-sizing: border-box;
}
.card-3-item {
box-sizing: border-box;
border: 2px solid red;
background-color: lightgray;
padding: 12px;
}
</style>
</head>
<body>
<!--ลูปตรงนี้ แต่ละลูปคือ หนึ่งแถว/สามดอลัมภ์-->
<div class="card-3-columns">
<div class="card-3-item">Content ยัด Boostrap Card ใส่ลงมา</div>
<div class="card-3-item">Content ยัด Boostrap Card ใส่ลงมา</div>
<div class="card-3-item">Content ยัด Boostrap Card ใส่ลงมา</div>
</div>
<!--จบลูปตรงนี้-->
</body>
</html>
Date :
2021-02-27 07:23:25By :
ผ่านมา
จาก #NO 3 27-28 ก็ไม่จำเป็น
Date :
2021-02-27 07:33:54By :
ผ่านมา
ลืมบอกไปว่า เป็นเด็กเป็นเล็ก อย่าทำตัวแก่
Date :
2021-02-27 07:43:00By :
ผ่านมา
PHP MySQL List Data Record & Get Result Row (mysqli) บทความนี้จะเป็นตัวอย่างของ mysqli การเขียน PHP เพื่ออ่านข้อมูลจาก Database ของ MySQL มาแสดงผลทางหน้าจอด้วย function ต่าง ๆ ของ mysqli ทำงานร่วมกับการ fetch ข้อมูลในรูปแบบของ arrayhttps://www.thaicreate.com/php/php-mysql-mysqli-list-record.html
Date :
2021-02-27 09:42:34By :
{Cyberman}
Code (PHP) <style>
.my_col{ width: 25%; } /* 25% = 4 columns ต่อ 1 row ปรับได้ตามต้องการ */
</style>
<div class="row" >
<?php
$ros = $cnx->query('select ....');
while($ro = $ros->fetch_object()){ ?>
<div class = "d-table-cell my_col">
<div class="card" >
<img src="<?=$ro->img?>" >
</div>
</div>
<?php } ?>
</div>
Date :
2021-02-27 12:21:43By :
Chaidhanan
วันข้างหน้า หากเจ้าของกระทู้ โชคร้ายไปเจอคนที่ต้องการความแม่นยำระดับ เส้นขน คุณอาจจำเป็นต้องใช้มัน (วันนี้ไม่ได้ใช้ แต่วันหน้าก็ไม่แน่)Code (PHP) <style>
.my_col{ width: calc(25% - 2px); } /* 25% = 4 columns ต่อ 1 row ปรับได้ตามต้องการ */
</style>
<div class="row" >
<?php
$ros = $cnx->query('select ....');
while($ro = $ros->fetch_object()){ ?>
<div class = "d-table-cell my_col">
<div class="card" >
<img src="<?=$ro->img?>" >
</div>
</div>
<?php } ?>
</div>
Date :
2021-02-27 12:49:43By :
ผ่านมา
ขอบพระคุณสำหรับคำแนะนำทุกท่านเลยนะคะ ลองทำตั้งแต่วันแรกที่ได้รับคำแนะนำแล้วค่ะ จนได้ผลลัพธ์ที่ต้องการเรียบร้อย. นี้เป็นโค้ดที่ทำออกมาค่ะ สำหรับอนาคตอาจจะมีคนเอาเป็นแนวทางเพิ่มเติมค่ะ โดยโค้ดนี้จะให้แสดงข้อมูลในรูปแบบการ์ด ไม่เกิน 8 อันนะคะ. เพราะอยู่ในหน้าแรก ไม่ใช่หน้าแสดงผลลัพธ์ข้อมูลทั้งหมดCode (PHP)
<style>
p.a {
margin-bottom: 2px;
}
p.cut_word {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: 30px;
}
</style>
<?php
$result = mysqli_query($conn,"select * from camp_data");
$num = mysqli_num_rows($result);//นับแถวทั้งหมดในตารางออกมา
$i = 0; $limit = 8;
?> <div class="row "> <!--- start class row ------ !-->
<?php
while ($i < $num && $i < $limit ){
$row = mysqli_fetch_array($result);
$id_camp = $row['id_camp'];
$name_camp = $row['name_camp'];
$detail_camp = $row['detail_camp'];
?>
<div class="col-3 col-sm-3 col-md-3" style="margin-bottom: 20px;">
<div class="card h-100" style="width: 100%; ">
<img src="school-template-master/img/2.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title" > <p class="cut_word"> <?php echo $name_camp ?> </p> </h5>
<p class="a"> <a href="#.php" class="btn btn-primary btn-sm" target="_blank">Read More..</a> </p>
</div>
</div>
</div>
<?php $i++; } ; ?>
<?php
?> </div> <!--- end class row ------ !-->
Date :
2021-03-03 15:12:23By :
เจ้าของกระทู้
Server 04
Load balance : Server 04
