ฉันควรใช้คอนเทนเนอร์และแถวใน Twitter Bootstrap 3 เมื่อใด

Question 1

กรุณาอธิบายให้ฉันเมื่อจะใช้เรียนและcontainer rowฉันไม่แน่ใจเพราะเอกสารของ Bootstrap ค่อนข้างไม่ชัดเจนเกี่ยวกับส่วนนี้

ฉันใช้ Bootstrap 3

Question 2

containerเป็นภาชนะของrowองค์ประกอบ

row องค์ประกอบคือคอนเทนเนอร์ของคอลัมน์ (เอกสารเรียกว่าระบบกริด)

นอกจากนี้containerกำหนดระยะขอบของเนื้อหาที่เกี่ยวข้องกับพฤติกรรมตอบสนองของเค้าโครงของคุณ

ดังนั้นcontainerคลาสนี้จึงมักใช้ในการสร้างเนื้อหา 'บรรจุกล่อง' ตามแนวทางสไตล์ของโครงการ Bootstrap

หากคุณต้องการ "ออกนอกกรอบ" เพื่อสร้างเส้นตารางแบบเต็มความกว้างคุณสามารถใช้เฉพาะrowองค์ประกอบที่มีคอลัมน์อยู่ภายใน (ซึ่งครอบคลุมผลรวม 12cols ตามปกติ)

containerและrowชั้นเรียนสำหรับองค์ประกอบภายในร่างกาย ดังนั้นรูปแบบพื้นฐานจะเป็น:

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

สำหรับเค้าโครงที่ตอบสนองต่อกล่อง

หากคุณละเว้นcontainerคุณจะได้รับเค้าโครงแบบเต็มความกว้าง

ตัวอย่าง Jumbotron

Jumbotron เป็นตัวอย่างที่ดีของcontainerพฤติกรรม หากคุณใส่องค์ประกอบ Jumbotron ในcontainerองค์ประกอบองค์ประกอบนั้นจะมีเส้นขอบโค้งมนและมีความกว้างคงที่ตามความกว้างที่ตอบสนอง หาก Jumbotron อยู่นอกคอนเทนเนอร์จะมีความกว้างเต็มโดยไม่มีขอบ

Question 3

ฉันสงสัยในเรื่องเดียวกันและเข้าใจว่าฉันผ่านbootstrap.cssเวอร์ชัน 3 แล้วคำตอบอยู่ในบรรทัดที่ 1585 ถึง 1605 ฉันจะโพสต์บรรทัดเหล่านั้นที่นี่เพื่อความเข้าใจที่ดีขึ้นดังต่อไปนี้

.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

รหัสทั้งหมดสามารถอธิบายได้ด้วยตนเอง อย่างไรก็ตามเพื่ออธิบายรายละเอียดเกี่ยวกับเรื่องนี้ภาชนะที่จะใช้750pxถ้ากว้างของหน้าจออยู่ระหว่าง768pxและ992pxและอื่น ๆ การแสดงรหัส ตอนนี้สำหรับความละเอียดหน้าจอทั่วไปที่มากกว่า 1200 คอนเทนเนอร์จะใช้เวลา1170pxแต่การลบช่องว่างภายในของ30 px( 15px+15px) ช่องว่างที่มีประสิทธิภาพจะ1140pxอยู่ตรงกลางของหน้าจอเนื่องจากระยะขอบของซ้ายและขวาถูกตั้งค่าเป็นอัตโนมัติ

ตอนนี้class="row"มีรหัสด้านล่าง:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

ดังนั้นถ้าแถวอยู่ในคอนเทนเนอร์ก็จะดึงช่องว่างข้างละ 15px จากคอนเทนเนอร์ได้อย่างมีประสิทธิภาพและใช้พื้นที่เต็ม แต่ถ้าแถวชั้นเรียนอยู่ในแท็กเนื้อหาก็มีแนวโน้มที่จะย้ายออกจากพื้นที่ที่มองเห็นไปยังทั้งด้านซ้ายและด้านขวาของเบราว์เซอร์เนื่องจากระยะขอบติดลบ

ฉันหวังว่ามันจะชัดเจน

Question 4

คอนเทนเนอร์

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

แถว

แถวควรอยู่ในภาชนะเสมอ

แถวนี้จัดให้คอลัมน์เป็นสถานที่ที่น่าอยู่โดยควรมีคอลัมน์ที่รวมกันได้ถึง 12 นอกจากนี้ยังทำหน้าที่เป็นเครื่องห่อหุ้มเนื่องจากคอลัมน์ทั้งหมดลอยไปทางซ้ายแถวเพิ่มเติมจะไม่มีการทับซ้อนกันเมื่อการลอยตัวแปลก ๆ

แถวยังมีขอบลบ 15px ในแต่ละด้าน โดยปกติ div ที่ประกอบเป็นแถวจะถูก จำกัด อยู่ภายในช่องว่างภายในของคอนเทนเนอร์โดยแตะที่ขอบของพื้นที่สีชมพู แต่ไม่เกิน ระยะขอบติดลบ 15px จะดันแถวออกไปด้านบนของช่องว่าง 15px ของคอนเทนเนอร์โดยจะเป็นการลบล้างมัน นอกจากนี้แถวยังช่วยให้คุณมั่นใจได้ว่า div ทั้งหมดที่อยู่ในนั้นจะปรากฏในบรรทัดของตัวเองโดยแยกจากแถวก่อนหน้าและแถวถัดไป

คอลัมน์

ตอนนี้คอลัมน์มีช่องว่างภายใน 15px ช่องว่างภายในหมายความว่าคอลัมน์สัมผัสกับขอบของแถวจริง ๆ ซึ่งตัวมันเองสัมผัสกับขอบของคอนเทนเนอร์เนื่องจากแถวนั้นมีขอบลบและคอนเทนเนอร์มีช่องว่างที่เป็นบวก แต่ช่องว่างในคอลัมน์จะดันสิ่งใด ๆ ภายในคอลัมน์ไปยังตำแหน่งที่ต้องการและยังมีราง 30px ระหว่างคอลัมน์ อย่าใช้คอลัมน์นอกแถวมันจะไม่ได้ผล

สำหรับข้อมูลเพิ่มเติมผมขอแนะนำให้คุณอ่านบทความนี้ ชัดเจนมากและอธิบายได้ดีว่าระบบกริดของ Bootstrap ทำงานอย่างไร

Question 5

คลาส 'คอนเทนเนอร์' จะรวมเนื้อหาไว้ที่กึ่งกลางของพอร์ตมุมมอง เนื้อหาทั้งหมดที่มีแท็กในเนื้อหาสามารถวางไว้ในผลลัพธ์หน้าที่แสดงตามความกว้างที่ระบุไว้ตรงกลางหน้า

คลาส 'แถว' ใช้เมื่อคุณต้องการวางเนื้อหาในคอลัมน์โดยเรียงเป็นแถวคุณสามารถมีคอลัมน์ได้สูงสุด 12 คอลัมน์ในแต่ละแถว

Question 6

ในแนวทางปฏิบัติ CSS แบบดั้งเดิมคุณอาจใช้คลาสต่อไปนี้:

wrapper, header, navigator, contents, footer

การใช้คลาสข้างต้นอาจเป็นเช่นนี้:

<body>
    <div class="wrapper">
        <div class="header">

        </div>
        <div class="navigator">

        </div>
        <div class="content">

        </div>
        <div class="footer">

        </div>
    </div>

</body>

ใน bootstrap คุณสามารถใช้ได้หากต้องการหรือหากคุณคุ้นเคยกับเทมเพลตด้านบนคลาส bootstrap เช่นตัวอย่างนี้:

<body>

    <div class="container">
        <div class="col-md-12">
            <h1>Header</h1>
            <p>Header contents goes here</p>
        </div>
        <div class="col-md-12">
            <nav role="navigation" class="nav navbar">
                <h1>Navigation</h1>
                <p>Navigation contents goes here</p>
            </nav>
        </div>
        <div class="col-md-12">
            <div class="pagination">
                <h1>Page contents</h1>
                <p>Webpage contents goes here</p>
            </div>

        </div>
        <div class="col-lg-12">
            <h1>Footer contents</h1>
            <p>footer contents goes here</p>
        </div>
    </div>

</body>

สำหรับคลาสแถวคุณสามารถใช้คลาสแถวเมื่อคุณต้องการออกแบบเค้าโครงตารางสำหรับเพจ แต่เมื่อคุณต้องการแสดงข้อมูลในรูปแบบตารางคุณควรใช้คลาสตาราง แต่ตารางจะไม่ตอบสนอง

ในการสร้างเค้าโครงตารางซึ่งแตกต่างจากตารางข้อมูลให้ใช้คลาสแถวเช่นในตัวอย่างนี้:

<body>

<div class="container">
    <div class="row">
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
  </div>
</div>

</body>

คุณต้องพยายามหลีกเลี่ยงการใช้เค้าโครงแบบตารางและพยายามใช้ตารางที่ตอบสนองตามที่อธิบายไว้ที่นี่