ต่อไป »

[dekjaidee]

ลองทำตาม Getbootstrap ก็งง ขอถามเลยกันนะครับ รบกนทีครับ

1. เขียน <div class="container"> ให้กำหนดความกว้าง 900 pixels และใส่สีพื้นให้กับ container และจัดกึ่งกลางจอ ยังไงครับ ถ้าเป็น html ที่เคยเขียน จะเป็น

โค๊ด:

<div align="center">
  <table width="900" border="0" align="center" cellpadding="1" cellspacing="1">
    <tr>
      <td bgcolor="#000066">THIS TABLE</td>
    </tr>
  </table>
</div>

2. ต้องการแบ่งคอลัมน์ในข้อ 1 เป็น 2 คอลัมน์ โดยที่ คอลัมน์แรก เท่ากับ 9 คอมลัมน์ที่สอง เท่ากับ 3 ซึ่งในคอลัมน์แรก จะมี 4 คอมลัมน์ย่อย ไม่ทราบว่าเขียนอย่างนี้ถูกมั้ยครับ

โค๊ด:

<div class="container">
   <div class="row">
      <div class="col-9"> <!--เปิด Column 1-->
          <div class="row">
              <div class=col-md-3>Sub Column #1 </div>
              <div class=col-md-3>Sub Column #2 </div>
              <div class=col-md-3>Sub Column #3 </div>
              <div class=col-md-3>Sub Column #4 </div>
          </div>
      </div>

      <div class="col-3"> <!--เปิด Column 2-->
           <img src="banner/banner.jpg" class="img-responsive">
      </div> 
   </div><!--ปิด row -->
</div> <!--ปิด container  -->

ไม่ทราบว่าเขียนถูกไหมมัยคับ ยังงงกับการเปิด div class=row จำเป็นต้องเปิดทุกครั้งมั้ยครับ และต้องเปิด containner ร่วมด้วยหรือเปล่าครับ


ขอบคุณครับ

รบกวนทีคับ
 

[mean]

ข้อ 1
<style>
.container {
 max-width:900px !implement;
 margin: 0 auto !implement;
}
</style>

อันที่ 2 Bootstrap Grid ต้องเป็นเลขคู่ไม่ใช่หรอครับ
https://getbootstrap.com/docs/4.0/layout/grid/

[dekjaidee]

ข้อ 1
<style>
.container {
 max-width:900px !implement;
 margin: 0 auto !implement;
}
</style>

อันที่ 2 Bootstrap Grid ต้องเป็นเลขคู่ไม่ใช่หรอครับ
https://getbootstrap.com/docs/4.0/layout/grid/

ข้อ 1
<style>
.container {
 max-width:900px !implement;
 margin: 0 auto !implement;
}
</style>

ตัวนี้ประกาศขึ้นยังไงครับ
พอดีผมใช้
<div class=container>

มันไม่แสดงไรเลย

แฮร่ๆๆๆ รบกวนอีกทีครับ
 

[nscyber]

ถ้าจะเขียนตามแบบของ bootstrap ทั้งหมดเลยก็

- สร้างหน้าเปล่าขึ้นมาแล้วใส่ แท็กนี้เข้าไปก่อน(โดยปกติ 1 ไฟล์จะประกาศครั้งเดียว)
<div class="container"></div>

- จากนั้นให้จินตนาการว่าเราจะใส่ข้อมูลในรูปแบบแถว (ไม่ต้องสนใจความสูง) ก็ให้เราใส่โค้ดนี้เข้าไปข้างใน
<div class="row"></div>
ตัวอย่าง

<div class="container">
  <div class="row"></div>
</div>

ถ้าจะให้ข้อมูลขึ้นแถวใหม่(บรรทัดใหม่ก็ใส่ row ไป)
ตัวอย่าง
<div class="container">
  <div class="row"></div>
  <div class="row"></div>
</div>

- ใน 1 row จะมีแท็ก col ที่ต้องรวมกันแล้วได้ 12
ตัวอย่าง
<div class="container">
  <div class="row">
    <div class=col-md-12></div>
  </div>
  <div class="row">
    <div class=col-md-1></div>
    <div class=col-md-2></div>
    <div class=col-md-9></div>
  </div>
</div>

จากคำถาม
ข้อ1
<style>
.container {
 width:900px !important;
}
</style>


ข้อ 2
ถูกแล้ว แต่ประกาศ container แค่ครั้งเดียว เช่นอยากจะทำคอลั้มเพิ่มอีกก็
<div class="container">
 <div class="row">
   <div class="row">
      <div class="col-9"> <!--เปิด Column 1-->
          <div class="row">
              <div class=col-md-3>Sub Column #1 </div>
              <div class=col-md-3>Sub Column #2 </div>
              <div class=col-md-3>Sub Column #3 </div>
              <div class=col-md-3>Sub Column #4 </div>
          </div>
      </div>

      <div class="col-3"> <!--เปิด Column 2-->
           <img src="banner/banner.jpg" class="img-responsive">
      </div>
   </div><!--ปิด row -->
 </div><!--ปิด row -->
 
 <div class="row">
   <div class="row">
      <div class="col-9"> <!--เปิด Column 1-->
          <div class="row">
              <div class=col-md-3>Sub Column #1 </div>
              <div class=col-md-3>Sub Column #2 </div>
              <div class=col-md-3>Sub Column #3 </div>
              <div class=col-md-3>Sub Column #4 </div>
          </div>
      </div>

      <div class="col-3"> <!--เปิด Column 2-->
           <img src="banner/banner.jpg" class="img-responsive">
      </div>
   </div><!--ปิด row -->
 </div><!--ปิด row -->
</div> <!--ปิด container  -->

[mean]

แก้หน่อยครับผมจำผิด ต้อง important ครับ ^^

<style>
.container {
 width:900px !important;
 max-width:900px !important;
 margin: 0 auto !important;
}
</style>

[MD.18]

<body>
<header></header>
<main class="container">
<section class="row">
<article class="col-md-9">
    <h1>head topic</h1>
  <div class="row">
      <div class="col-md-3">column 1</div>
      <div class="col-md-3">column 2</div>
      <div class="col-md-3">column 3</div>
      <div class="col-md-3">column 4</div>
  </div>
</article>
<aside class="col-md-3">Side bar</aside>
</section>
....
</main>
</body>

[WinPickup]

  มาเก็บข้อมูล