Bootstrap - ระบบกริด

ในบทนี้เราจะพูดถึงระบบ Bootstrap Grid

กริดคืออะไร?

ตามที่ wikepedia วางไว้ -

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

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

Bootstrap Grid System คืออะไร?

ตามที่เอกสารอย่างเป็นทางการของ Bootstrap สำหรับระบบกริด -

Bootstrap ประกอบด้วยระบบกริดของเหลวแรกที่ตอบสนองและเคลื่อนที่ได้ซึ่งปรับขนาดได้ถึง 12 คอลัมน์อย่างเหมาะสมเมื่อขนาดอุปกรณ์หรือวิวพอร์ตเพิ่มขึ้น ประกอบด้วยคลาสที่กำหนดไว้ล่วงหน้าสำหรับตัวเลือกเลย์เอาต์ที่ง่ายเช่นเดียวกับมิกซ์อินที่มีประสิทธิภาพสำหรับการสร้างเลย์เอาต์เชิงความหมายเพิ่มเติม

ให้เราเข้าใจข้อความข้างต้น Bootstrap 3 เป็นอุปกรณ์เคลื่อนที่เป็นอันดับแรกในแง่ที่ว่าตอนนี้โค้ดสำหรับ Bootstrap เริ่มต้นด้วยการกำหนดเป้าหมายหน้าจอขนาดเล็กเช่นอุปกรณ์เคลื่อนที่แท็บเล็ตจากนั้นจึง "ขยาย" ส่วนประกอบและกริดสำหรับหน้าจอขนาดใหญ่เช่นแล็ปท็อปเดสก์ท็อป

กลยุทธ์แรกสำหรับมือถือ

• Content

  • พิจารณาว่าอะไรสำคัญที่สุด

• Layout

  • ออกแบบให้มีความกว้างเล็กลงก่อน
  • ฐาน CSS ที่อยู่อุปกรณ์เคลื่อนที่ก่อน ที่อยู่แบบสอบถามสื่อสำหรับแท็บเล็ตเดสก์ท็อป

• Progressive Enhancement

  • เพิ่มองค์ประกอบเมื่อขนาดหน้าจอเพิ่มขึ้น

การทำงานของ Bootstrap Grid System

ระบบกริดใช้สำหรับสร้างเค้าโครงหน้าผ่านชุดแถวและคอลัมน์ที่เก็บเนื้อหาของคุณ นี่คือวิธีการทำงานของระบบกริด Bootstrap -

• ต้องวางแถวภายในไฟล์ .container คลาสสำหรับการจัดตำแหน่งและช่องว่างที่เหมาะสม

• ใช้แถวเพื่อสร้างกลุ่มคอลัมน์แนวนอน

• ควรวางเนื้อหาไว้ในคอลัมน์และมีเพียงคอลัมน์เดียวเท่านั้นที่สามารถเป็นลูกของแถวได้

• คลาสกริดที่กำหนดไว้ล่วงหน้าเช่น .row and .col-xs-4พร้อมใช้งานสำหรับการสร้างเค้าโครงตารางอย่างรวดเร็ว นอกจากนี้ยังสามารถใช้มิกซ์อินน้อยสำหรับเลย์เอาต์เชิงความหมายได้มากขึ้น

• คอลัมน์สร้างรางน้ำ (ช่องว่างระหว่างเนื้อหาคอลัมน์) ผ่านช่องว่างภายใน ช่องว่างภายในนั้นหักล้างกันในแถวสำหรับคอลัมน์แรกและคอลัมน์สุดท้ายโดยใช้ระยะขอบเชิงลบบน.rows.

• คอลัมน์กริดถูกสร้างขึ้นโดยการระบุจำนวนคอลัมน์ที่มีอยู่สิบสองคอลัมน์ที่คุณต้องการขยาย ตัวอย่างเช่นคอลัมน์ที่เท่ากันสามคอลัมน์จะใช้สามคอลัมน์.col-xs-4.

แบบสอบถามสื่อ

Media Query เป็นคำที่แปลกสำหรับ "กฎ CSS แบบมีเงื่อนไข" เพียงแค่ใช้ CSS บางส่วนตามเงื่อนไขบางประการที่กำหนดไว้ หากตรงตามเงื่อนไขเหล่านั้นสไตล์จะถูกนำไปใช้

Media Queries ใน Bootstrap ช่วยให้คุณย้ายแสดงและซ่อนเนื้อหาตามขนาดวิวพอร์ต แบบสอบถามสื่อต่อไปนี้ใช้ในไฟล์ LESS เพื่อสร้างจุดพักหลักในระบบกริด Bootstrap

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

บางครั้งสิ่งเหล่านี้จะถูกขยายเพื่อรวมไฟล์ max-width เพื่อ จำกัด CSS เฉพาะชุดอุปกรณ์ที่แคบลง

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

คิวรีสื่อมีสองส่วนคือข้อกำหนดของอุปกรณ์และกฎขนาด ในกรณีข้างต้นกฎต่อไปนี้ถูกตั้งค่า -

ให้เราพิจารณาบรรทัดนี้ -

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

สำหรับอุปกรณ์ทั้งหมดไม่ว่าชนิดกับนาทีความกว้าง: @ หน้าจอ sm-นาทีถ้าความกว้างของหน้าจอที่ได้รับมีขนาดเล็กกว่า@ หน้าจอ-SM-Max , แล้วทำบางสิ่งบางอย่าง

ตัวเลือกกริด

ตารางต่อไปนี้สรุปแง่มุมของการทำงานของระบบกริด Bootstrap บนอุปกรณ์ต่างๆ -

	โทรศัพท์อุปกรณ์ขนาดเล็กพิเศษ (<768px)	แท็บเล็ตอุปกรณ์ขนาดเล็ก (≥768px)	เดสก์ท็อปสำหรับอุปกรณ์ขนาดกลาง (≥992px)	เดสก์ท็อปอุปกรณ์ขนาดใหญ่ (≥1200px)
พฤติกรรมกริด	แนวนอนตลอดเวลา	ยุบเพื่อเริ่มต้นแนวนอนเหนือจุดพัก	ยุบเพื่อเริ่มต้นแนวนอนเหนือจุดพัก	ยุบเพื่อเริ่มต้นแนวนอนเหนือจุดพัก
ความกว้างภาชนะสูงสุด	ไม่มี (อัตโนมัติ)	750px	970px	1170px
คำนำหน้าชั้นเรียน	.col-xs-	.col-sm-	.col-md-	.col-lg-
# คอลัมน์	12	12	12	12
ความกว้างของคอลัมน์สูงสุด	อัตโนมัติ	60px	78px	95px
ความกว้างของรางน้ำ	30px (15px ในแต่ละด้านของคอลัมน์)	30px (15px ในแต่ละด้านของคอลัมน์)	30px (15px ในแต่ละด้านของคอลัมน์)	30px (15px ในแต่ละด้านของคอลัมน์)
Nestable	ใช่	ใช่	ใช่	ใช่
ออฟเซ็ต	ใช่	ใช่	ใช่	ใช่
ลำดับคอลัมน์	ใช่	ใช่	ใช่	ใช่

โครงสร้างกริดพื้นฐาน

ต่อไปนี้เป็นโครงสร้างพื้นฐานของ Bootstrap grid -

<div class = "container">

   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">...</div>
	
</div>

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

ให้เราดูตัวอย่างตารางง่ายๆ -

• ตัวอย่าง - เรียงซ้อนกันเป็นแนวนอน

• ตัวอย่าง - อุปกรณ์ขนาดกลางและขนาดใหญ่

• ตัวอย่าง - มือถือแท็บเล็ตเดสก์ท็อป

รีเซ็ตคอลัมน์ที่ตอบสนอง

เมื่อมีกริดสี่ระดับคุณจะต้องพบกับปัญหาที่จุดพักบางจุดคอลัมน์จะไม่ชัดเจนนักเนื่องจากคอลัมน์หนึ่งสูงกว่าอีกอันหนึ่ง ในการแก้ไขปัญหานั้นให้ใช้การรวมกันของคลาส.clearfixและคลาสยูทิลิตี้ที่ตอบสนองตามที่แสดงในตัวอย่างต่อไปนี้ -

<div class = "container">
   <div class = "row" >
   
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim veniam, quis nostrud exercitation ullamco laboris 
            nisi ut aliquip ex ea commodo consequat.</p>
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut.</p>
      </div>

      <div class = "clearfix visible-xs"></div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
            laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
      
      <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
            enim ad minim</p>
      </div>
      
   </div>
</div>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

ปรับขนาดวิวพอร์ตของคุณหรือลองดูในโทรศัพท์ของคุณเพื่อผลลัพธ์ที่ต้องการจากตัวอย่างนี้

คอลัมน์ออฟเซ็ต

ออฟเซ็ตเป็นคุณสมบัติที่มีประโยชน์สำหรับเลย์เอาต์เฉพาะทางมากขึ้น สามารถใช้เพื่อดันคอลัมน์เพื่อให้มีระยะห่างมากขึ้น (เช่น) .col-xs = * ชั้นเรียนไม่รองรับการชดเชย แต่สามารถจำลองได้อย่างง่ายดายโดยใช้เซลล์ว่าง

หากต้องการใช้ออฟเซ็ตบนจอแสดงผลขนาดใหญ่ให้ใช้ไฟล์ .col-md-offset-*ชั้นเรียน ชั้นเรียนเหล่านี้จะเพิ่มระยะขอบด้านซ้ายของคอลัมน์โดย* คอลัมน์ที่ * มีตั้งแต่ 1 ถึง 11.

ในตัวอย่างต่อไปนี้เรามี <div class = "col-md-6"> .. </div> เราจะจัดกึ่งกลางโดยใช้คลาส .col-md-offset-3.

<div class = "container">

   <h1>Hello, world!</h1>

   <div class = "row" >
      <div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

   </div>
	
</div>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

คอลัมน์ที่ซ้อนกัน

หากต้องการซ้อนเนื้อหาของคุณด้วยกริดเริ่มต้นให้เพิ่มไฟล์ .row และชุดของ .col-md-* คอลัมน์ภายในไฟล์ .col-md-*คอลัมน์. แถวที่ซ้อนกันควรมีชุดคอลัมน์ที่รวมกันได้สูงสุด 12 คอลัมน์

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

<div class = "container">
   <h1>Hello, world!</h1>

   <div class = "row">

      <div class = "col-md-3" style = "background-color: #dedef8; 
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>First Column</h4>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>

      <div class = "col-md-9" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         <h4>Second Column- Split into 4 boxes</h4>
         <div class = "row">
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Consectetur art party Tonx culpa semiotics. 
                  Pinterest assumenda minim organic quis.</p>
            </div>
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
                  ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
				
         </div>

         <div class = "row">
			
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>quis nostrud exercitation ullamco laboris nisi ut aliquip 
                  ex ea commodo consequat.</p>
            </div>   
            
            <div class = "col-md-6" style = "background-color: #B18904;
               box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
               
               <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna 
                  aliqua. Ut enim ad minim.</p>
            </div>
				
         </div>

      </div>

   </div>
	
</div>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -

การจัดลำดับคอลัมน์

คุณสมบัติที่ดีอีกอย่างของระบบกริด Bootstrap คือคุณสามารถเขียนคอลัมน์ตามลำดับและแสดงในคอลัมน์อื่นได้อย่างง่ายดาย คุณสามารถเปลี่ยนลำดับของคอลัมน์กริดในตัวด้วยไฟล์.col-md-push-* และ .col-md-pull-* คลาสตัวปรับแต่งโดยที่ * มีตั้งแต่ 1 ถึง 11.

ในตัวอย่างต่อไปนี้เรามีเค้าโครงสองคอลัมน์โดยคอลัมน์ด้านซ้ายจะแคบที่สุดและทำหน้าที่เป็นแถบด้านข้าง เราจะสลับลำดับของคอลัมน์เหล่านี้โดยใช้.col-md-push-* และ .col-md-pull-* ชั้นเรียน

<div class = "container">
   <h1>Hello, world!</h1>
   
   <div class = "row">
      <p>Before Ordering</p>
      
      <div class = "col-md-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on left
      </div>
      
      <div class = "col-md-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I am on right
      </div>
      
   </div>
	
   <br>
   
   <div class = "row">
      <p>After Ordering</p>
      
      <div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on left
      </div>
      
      <div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8;
         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         
         I was on right
      </div>
		
   </div>

</div>

สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -