Bootstrap Layout

#HelloFront-end #HelloErmine #HelloWorld2021

Layout

คือ CSS สำเร็จรูป ที่มีใน Bootstrap ซึ่งมีผลต่อการแบ่งและจัดหน้าเว็บไซต์ โดยเราจะยกตัวอย่างเป็น Containers และ Grid System

Containers

class container คือ class ที่สร้างมาเพื่อจัดองค์ประกอบของข้อมูลใน tag ให้มีความกว้างหรือระยะห่างจากขอบจอ (width) ตามที่เราได้กำหนดขนาดเอาไว้ โดยสามารถกำหนด size ได้ตามตาราง

Container in HTML

อย่าลืมเชื่อม และ import ไฟล์ Bootstrap ให้เรียบร้อย

Example Container

<div class="container">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum quia qui ipsa magni fugit porro. Ea distinctio
        voluptatum ipsum sit reprehenderit nostrum, culpa minima sed quis soluta blanditiis possimus nisi aspernatur   
        amet accusamus? Recusandae ullam exercitationem adipisci veniam ut officia vitae sapiente architecto placeat  
        obcaecati vero corrupti accusamus ad ratione, repellendus suscipit voluptatibus rerum dicta ea tempora nesciunt    
        et repudiandae. Eum quidem quibusdam unde atque optio modi quo ipsam cupiditate ullam inventore eos, non
        accusamus dolorum sequi eaque officia odit itaque dolores quos adipisci! Labore asperiores dolore quod libero 
        necessitatibus, quos dignissimos pariatur animi eveniet eum officiis ab nemo eligendi porro tempora expedita, 
        nesciunt eius culpa ipsam minima at iste illo saepe nobis? Exercitationem, quibusdam. Placeat rerum, sit
        voluptas similique, soluta eos in ullam ratione deleniti nam excepturi voluptate? In vitae perferendis, maiores 
        expedita reprehenderit alias possimus! Ex, blanditiis quas dicta repudiandae nisi magnam optio neque nihil
        laborum, aut nam tempore assumenda nulla. Eaque corporis delectus, illum aperiam accusantium labore voluptates  
        nihil harum quis vero et nostrum error numquam, fugit suscipit magnam maxime explicabo sequi doloremque minus
        iure. Eum ipsa cumque possimus minima! Rem neque, vitae itaque nulla animi eius at, hic enim excepturi odit
        tempora cupiditate quis nisi facilis.
    </div>

ส่วนที่วงไว้ สีเขียว คือ เส้นกรอบของ div ซึ่งบอกว่ามี div ครอบไว้ สีส้ม คือ ขนาดความกว้างหรือระยะห่างจากขอบจอ

class container แบบกำหนด size

    <div class="container-sm">100% wide until small breakpoint</div>
    <div class="container-md">100% wide until medium breakpoint</div>
    <div class="container-lg">100% wide until large breakpoint</div>
    <div class="container-xl">100% wide until extra large breakpoint</div>
    <div class="container-xxl">100% wide until extra extra large breakpoint</div>

จากรูปจะเห็นว่ายังไม่มีอะไรเปลี่ยนแปลง ยังมีเส้นกรอบของตัว div และ container อยู่

แต่เมื่อปรับขนาดจอตามรูป ให้ด้านบนเล็กกว่า 1400px จะเห็น container-xxl นั้นโดนปรับให้ความกว้างเป็นเต็มจอ

แต่ตัวอื่น ๆ ที่เหลือยังไม่เปลี่ยนไป เนื่องจาก container size ตัวอื่น ๆ ยังมีระยะห่างจากขอบจอที่กำหนดเอาไว้อยู่ และยังอยู่ในเงื่อนไขของขนาดที่ยังแสดงออกมาได้จึงยังไม่แสดงความกว้างของจอ หรือ ระยะห่างจากขอบจอเป็น 100%

class container-fluid

<div class="container-fluid">
        100% wide until small breakpoint
        100% wide until medium breakpoint
        100% wide until large breakpoint
        100% wide until extra large breakpoint
        100% wide until extra extra large breakpoint
</div>

ไม่ว่าขนาดหน้าจอจะเท่าไหร่ ระยะห่างจากขอบจอของ container-fluid ก็จะเป็น 100% เสมอ

ความแตกต่างของ container กับ container-fluid

<div class="container" style="background-color:red">
   <h1>This is container.</h1>
</div>

<div class="container-fluid" style="background-color:blue">
   <h1>This is container-fluid</h1>
</div>

containers ความกว้างจะแสดงไม่เต็มหน้าจอโดยจะมี padding ทางซ้ายและขวาของ containers เพื่อไม่ให้แสดงความกว้างแบบเต็มจอ

container-fluid จะแสดงข้อมูลแบบกว้างเต็มจอ จะไม่มี padding ที่เพิ่มเข้ามาทางซ้ายและขวา

ผลลัพธ์

Container in React

อย่าลืมเชื่อม และ import ไฟล์ Bootstrap ให้เรียบร้อย

Example Container

<Container className="bg-primary">----- Containers -----</Container>
<Container fluid='sm' className="bg-secondary">----- Containers-sm -----</Container>
<Container fluid='md' className="bg-info">----- Containers-md -----</Container>
<Container fluid='lg' className="bg-success">----- Containers-lg -----</Container>
<Container fluid='xl' className="bg-danger">----- Containers-xl -----</Container>
<Container fluid className="bg-warning">----- Containers Fluid -----</Container>

จะมีการแสดงผลเดียวกับ size ตามตาราง Containers size ด้านบน

จะเห็นได้ว่ายังไม่มีอะไรเปลี่ยนแปลง แต่เมื่อเราทำการปรับขนาดหน้าจอ (Responsive) ตามรูปด้านล่าง

จะมีการแสดงผลเดียวกับ size ตามตาราง Containers size ด้านบน

Container-xl จะแสดงความกว้างกลายเป็นเต็มหน้าจอ เนื่องจากขนาดจอ (Responsive) มีขนาดเล็กกว่า 1200px ในขณะที่ Container ด้านบนที่เหลือ ยังคงแสดงตาม size เนื่องจากขนาดหน้าจอยังคงตรงตามเงื่อนไข

ซึ่งภายใน React เราทำการ Import Container กลายเป็น tag ไปแล้ว จึงต้องเปลี่ยน Syntax ในการเขียน จากปกติที่เรียกผ่าน class กลายเป็นเรียกผ่าน tag แทน

Grid System

Grid System จะเป็นตัวช่วยที่ทำให้เราสามารถแบ่งแยกหน้าของเว็บไซต์ออกเป็นส่วน ๆ ได้ ซึ่งทำให้ง่ายต่อการจัดวางองค์ประกอบต่าง ๆ บนหน้าเว็บไซต์ที่เราทำ โดยทั่วไปใน 1 หน้า จะแบ่งออกมาได้ทั้งหมด 12 ส่วน ส่วนละเท่า ๆ กัน

องค์ประกอบภายใน Grid System

การเลือกใช้ขนาดของ Column

Grid in HTML

อย่าลืมเชื่อม และ import ไฟล์ Bootstrap ให้เรียบร้อย

Row and Column

การที่เราจะใช้ Grid System เรามักจะใช้ใน column และ column จะอยู่ภายใน row ซึ่ง 1 row สามารถมีได้หลาย column โดยจะขึ้นอยู่กับเรา ว่าจะตั้ง column ยังไงเวลาเขียน code

<div class="row">
   <div class="col-xl-6" style="background-color:yellow">6</div>
   <div class="col-xl-6" style="background-color:red">6</div><br>
</div>
<div class="row">
   <div class="col-sm-4" style="background-color:yellow">4</div>
   <div class="col-sm-4" style="background-color:red">4</div>
   <div class="col-sm-4" style="background-color:blue">4</div>
</div>

โดยภายใน Container และ Container-fluid เราสามารถนำ Grid System มาใช้ในการแบ่งส่วนภายใน Container และส่วนใหญ่มักจะใช้ Grid System พร้อมกับ column ที่อยู่ภายใน row

<div class="container">
   <div class="row">
      <div class="col-xl-6" style="background-color:yellow;">50</div>
      <div class="col-xl-6" style="background-color:blue;">50</div>
   </div>
   <div class="row">
      <div class="col-xl-4" style="background-color:blue;">33.33</div>
      <div class="col-xl-4" style="background-color:red;">33.33</div>
      <div class="col-xl-4" style="background-color:yellow;">33.33</div>
   </div>
   <div class="row">
      <div class="col-xl-3" style="background-color:purple;">25</div>
      <div class="col-xl-3" style="background-color:orange;">25</div>
      <div class="col-xl-3" style="background-color:green;">25</div>
      <div class="col-xl-3" style="background-color:aqua;">25</div>
   </div>
</div>
<br>

<div class="container-fluid">
   <div class="row">
      <div class="col-xl-6" style="background-color:yellow;">50</div>
      <div class="col-xl-6" style="background-color:blue;">50</div>
   </div>
   <div class="row">
      <div class="col-xl-4" style="background-color:blue;">33.33</div>
      <div class="col-xl-4" style="background-color:red;">33.33</div>
      <div class="col-xl-4" style="background-color:yellow;">33.33</div>
   </div>
   <div class="row">
      <div class="col-xl-3" style="background-color:purple;">25</div>
      <div class="col-xl-3" style="background-color:orange;">25</div>
      <div class="col-xl-3" style="background-color:green;">25</div>
      <div class="col-xl-3" style="background-color:aqua;">25</div>
   </div>
</div>

ผลลัพธ์

Grid in React

อย่าลืมเชื่อม และ import ไฟล์ Bootstrap ให้เรียบร้อย

Example Grid system

<Row>
<Col>1 of 3</Col>
<Col>2 of 3</Col>
<Col>3 of 3</Col>
</Row>
<Row>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
</Row>

ต่อให้ขนาดของ Grid จะใหญ่เล็กไม่เท่าเดิม แต่อัตราส่วนที่แบ่งเอาไว้จะยังคงเท่าเดิม

Container with Grid

เราสามารถนำ Grid มาใช้ร่วมกับ Container เพื่อช่วยให้การจัดหน้า Layout ของเว็บไซต์ให้ดีขึ้น

<Container>
<Row>
<Col>1 of 3</Col>
<Col>2 of 3</Col>
<Col>3 of 3</Col>
</Row>
<Row>
<Col>1 of 2</Col>
<Col>2 of 2</Col>
</Row>
</Container>

จะมี margin ของ Container จึงทำให้ column นั้นอยู่กลางจอ