สอบถามเรื่อง bootstrap ครับ +1 ครับ

[nscyber]

1.คลาส container มันต้องคลุมทั้งหน้าไหมครับ หรือประกาศกี่ครั้งก็ได้ในหน้านั้นๆเหมือนการจัดกล่องให้เป็นกล่องๆ
2.คลาส row ถ้าผมจะทำหน้าโชว์สินค้า เช่นผมให้มันแสดง คอลัมข้างใน row 6 คอลัม คำถามคือถ้าผมอยากจะให้มันขึ้นแถวไหม่เช่นสินค้ามี 12 ชิ้นแถวแรกแสดงไปแล้ว 6 อีก6 ต้องขึ้นแถวใหม่ ผมต้องประกาศ row ไหม่ไหมครับแล้วกำหนดคอลัมเป็น 6 หรือเอาโค้ดแสดงผลไว้ใน คลาส row ที่สร้างไว้ได้เลยแล้วมันจะจัดให้เอง

วิธีที่ 2 ผมลองแล้วแต่ว่าผมอยากทราบวิธีที่เหมาะสมกลัวว่าใช้ row มากๆมันจะไม่ดีต่อแสดงผลแต่เพื่อความมั่นใจเลยอยากถามผู้รู้จิงๆน่ะครับ

[chor_th]

1.คลาส container มันต้องคลุมทั้งหน้าไหมครับ หรือประกาศกี่ครั้งก็ได้ในหน้านั้นๆเหมือนการจัดกล่องให้เป็นกล่องๆ
2.คลาส row ถ้าผมจะทำหน้าโชว์สินค้า เช่นผมให้มันแสดง คอลัมข้างใน row 6 คอลัม คำถามคือถ้าผมอยากจะให้มันขึ้นแถวไหม่เช่นสินค้ามี 12 ชิ้นแถวแรกแสดงไปแล้ว 6 อีก6 ต้องขึ้นแถวใหม่ ผมต้องประกาศ row ไหม่ไหมครับแล้วกำหนดคอลัมเป็น 6 หรือเอาโค้ดแสดงผลไว้ใน คลาส row ที่สร้างไว้ได้เลยแล้วมันจะจัดให้เอง

วิธีที่ 2 ผมลองแล้วแต่ว่าผมอยากทราบวิธีที่เหมาะสมกลัวว่าใช้ row มากๆมันจะไม่ดีต่อแสดงผลแต่เพื่อความมั่นใจเลยอยากถามผู้รู้จิงๆน่ะครับ

ไม่รู้จริงนะครับ แค่เคยทดสอบมา

ถ้าประกาศ class container ใน div มันจะแยกกันครับ

class row จะมองทีละแถวตามชื่อ class เลยครับ ต้องประกาศทีละแถวครับ
แถวแรกเป็น 12 ก็ประกาศเป็น md-1 มันจะแสดงได้ 12 คอลัมน์ แล้วแถว 2 ค่อยเปลี่ยนเป็น md-2 จะแสดงได้ 6 คอลัมน์ ได้ครับ
ถ้าใช้ md-12 มันจะแสดงคอลัมน์เดียว และ md-6 จะแสดงแค่ 2 คอลัมน์นะครับ และแต่ละแถวจะแสดงได้สูงสุดแค่ 12 คอลัมน์ครับ

ผิดพลาดยังไงขออภัย

[Zero-G]

bootstrap-คืออะไร-สอนวิธีใช้

อ่านบทความนี้หรือยังครับผมว่าเข้าใจง่ายดี
ผมเริ่มต้นจาก บทความนี้ แล้วก็แกะต่อจาก theme example และที่เค้าทำแจกฟรีต่างๆ
- http://www.bootstrapzero.com
- http://startbootstrap.com
- https://shapebootstrap.net

[nscyber]

ขอบคุณทุกท่านครับ +1 ให้แล้วนะครับท่านใดมีอะไรแนะนำเพิ่มเติมสามารถโพสแนะนำได้เลยนะครับ

[p44n]

ยัด col เข้าใน row เดิมเลยครับ เมื่อครบ 12 col มันจะขึ้นบรรทัดใหม่ให้เอง

div.row
   div.col-md-4
   div.col-md-4
   div.col-md-4
   div.col-md-4
   div.col-md-4
   div.col-md-4

result
4 4 4
4 4 4

[sputtaro]

ในหนึ่งหน้า สามารถใช้ container ได้หลายครั้ง แต่ไม่มีความจำเป็นใดๆ
row ตวรจะอยู่ภายใต้ container
container มีทั้ง container (fixed-width) และ .container-fluid (full-width) ลองเปลี่ยนดูนะครับ
ข้างล่างเป็นตัวอย่างแบบง่ายๆ ไม่ซับซ้อน



<div class="container">
<div class="row">
 <div class="col-md-4 alert-success">Above Content Left</div>
 <div class="col-md-4 alert-warning">Above Content Center</div>
 <div class="col-md-4 alert-danger">Above Content Right</div>
</div>

<div class="row">
 <div class="col-md-2 alert-success">Product content1</div>
 <div class="col-md-2 alert-info">Product Content2</div>
 <div class="col-md-2 alert-success">Product content3</div>
 <div class="col-md-2 alert-info">Product Content4</div>
 <div class="col-md-2 alert-success">Product content5</div>
 <div class="col-md-2 alert-info">Product Content6</div>
</div>

<div class="row">
 <div class="col-md-2 alert-danger">Product content7</div>
 <div class="col-md-2 alert-success">Product Content8</div>
 <div class="col-md-2 alert-danger">Product content9</div>
 <div class="col-md-2 alert-success">Product Content10</div>
 <div class="col-md-2 alert-danger">Product content11</div>
 <div class="col-md-2 alert-success">Product Content12</div>
</div>

<div class="row">
 <div class="col-md-4 alert-success">Bottom Content Left</div>
 <div class="col-md-4 alert-warning">Bottom Content Center</div>
 <div class="col-md-4 alert-danger">Bottom Content Right</div>
</div>
 </div>

[sputtaro]

แบบซับซ้อน ขึ้นอยู่กับจาวาสคริปท์ และปัจจัยอื่นๆ
//ใน css ต้องกำหนดรายละเอียดของ ul li ให้ดี ไม่งั้นแสดงผลเพี้ยน ไม่ตรงกับที่ต้องการ
//ที่ผมใช้อยู่จริง จะกำหนดให้ li แสดงผล  5 แถว แถวละ 4 สินค้า รวม แสดงผลสินค้าทั้งหมด 20 ชิ้น
echo '<div class="container">';
.
.
.
echo '<div class="row">';
echo '<ul id="gallerygrid2" class="col-md-12 gallery-grid">';
//mysql select ...
$result = mysqli_query($con,"SELECT
while($row = mysqli
echo '<li>';
.
.
.
echo '</li>';
}//end while(
echo '</ul>';
echo '</div>';//end class col-md-12

.
.
.
echo '</div>';//end class container

[talkit]

เดี๋ยวจะลองศึกษาดูบ้างครับ ปรับเปลี่ยนแนวการเขียนดู

[pheeba52]

   ครบ 12 col มันจะขึ้นบรรทัดใหม่ให้เองครับ

[nscyber]

แบบซับซ้อน ขึ้นอยู่กับจาวาสคริปท์ และปัจจัยอื่นๆ
//ใน css ต้องกำหนดรายละเอียดของ ul li ให้ดี ไม่งั้นแสดงผลเพี้ยน ไม่ตรงกับที่ต้องการ
//ที่ผมใช้อยู่จริง จะกำหนดให้ li แสดงผล  5 แถว แถวละ 4 สินค้า รวม แสดงผลสินค้าทั้งหมด 20 ชิ้น
echo '<div class="container">';
.
.
.
echo '<div class="row">';
echo '<ul id="gallerygrid2" class="col-md-12 gallery-grid">';
//mysql select ...
$result = mysqli_query($con,"SELECT
while($row = mysqli
echo '<li>';
.
.
.
echo '</li>';
}//end while(
echo '</ul>';
echo '</div>';//end class col-md-12

.
.
.
echo '</div>';//end class container

การใช้ li กับ div ต่างกันอย่างไรครับผมเห้นท่านใช้ li แหะๆ ปกติผมใช้ div ผมอยากทราบข้อดีเผื่อจะลองผันมานิยมบ้างครับส่วนใหญ่ li ผมใช้ทำเมนู 

[sputtaro]

li คือ การทำ list รายการ
ผมใช้ทุกครั้งถ้ามีโอกาส เพราะ เป็นการแสดงว่า เพจนี้ มีการทำลิสท์รายการสินค้าของผมไว้ในหน้านั้นๆ

กูเกิลจะเห็นเป็นอะไรในหน้านั้น
สิ่งที่Google หรือเสิร์ชเอนจิ้นเห็น ก็คือ โค๊ดที่เราสร้างไว้ อย่างมีระเบียบ ถูกต้องตามหลัก

li ก็คือส่วนหนึ่งของโค๊ด ที่ถูกระบุว่าเป็นรายการ ซึ่งอาจแยกมาเป็นหัวข้อสำคัญในแต่ละรายการได้อีกเช่น

เฉพาะตัว body นะครับ
<h1>title</h1>
<h2> หัวข้อย่อย
<ul>
<li ตัวที่1> <ตัวเน้น>ชื่อสินค้า 1</ตัวเน้น>
<p> รายละเอียดสินค้า สั้นๆ ตามสไตล์แกเลอรี่</p>
<a>link to Details Page</a>
</li>
.
.
.
<li ตัวที่20> <ตัวเน้น>ชื่อสินค้า 20</ตัวเน้น>
<p> รายละเอียดสินค้า</p>
<a>link to Details Page</a>
</li>

<h2>ข่าวทั่วไปเกี่ยกับ คีย์เวิร์ด


.
.
.
<h3>
...
.
.

************************************
คงพอเห็นแนวคิดของผมนะครับ
ถามว่าดีกว่า หรือด้อยกว่า แบบอื่นๆตรงไหน
บอกตรงๆ ผมไม่ทราบครับ แต่ผมก็เห็นว่า มันน่าจะมีดีบ้างนะเจ้า li นี่