ตอนที่5 : สอนใช้งานComponentsในBootstrap4เบื้องต้น (Part2)

Published in

Technologies For Everyone

8 min readMay 15, 2017

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

✎ Card

ในส่วนของ card นะครับ จะมีหลายรูปแบบด้วยกัน และยังสามารถเปลี่ยนแปลงส่วนประกอบต่างๆได้ด้วยครับ ซึ่งเวลาใช้จะต้องใส่class cardครอบทั้งหมดไว้ด้วย

เรามาดูตัวอย่างของรูปแบบ card และ code ด้านล่างนี้เลยกันดีกว่าครับ โดยเราสามารถปรับเปลี่ยนองค์ประกอบ และสามารถจัดตำแหน่งในบางส่วนได้ด้วยครับ

<div class="card" style="width: 20rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

ต่อไปจะเป็นในส่วนของ content type นะครับมีดังต่อไปนี้

- Blocks

เป็นการสร้างกล่องข้อความของCard โดยใส่class card-block เข้าไปนะครับ

ส่วนตัวอย่างรูปแบบ และ code ตามด้านล่างนี้เลยครับ

- Titles, Text, and Links

จะเป็นส่วนที่อยู่ในblockของcardนะครับ โดยเราสามารถใส่หัวข้อของ Card (Titles)โดยใส่class card-title ใน <*h> และใส่ link โดยใส่class card-link ลงใน<a> ครับ
ส่วนหัวข้อย่อยเนี่ยเราจะใส่class card-subtitle ลงใน <h*>นั่นเองครับ

ส่วนตัวอย่างรูปแบบ และ code ตามด้านล่างนี้เลยครับ

<div class="card">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

- Images

class card-img-top เป็นการวางรูปภาพไว้ด้านบนสุดของCard ส่วนclass card-text ทำให้เราสามารถเพิ่มข้อความลงในCardได้ นอกจากนี้ยังสามารถจัดรูปแบบได้ด้วยแท็กสำหรับจัดรูปแบบข้อความของHTMLได้ด้วยนะครับ

ส่วนตัวอย่างรูปแบบ และ code ตามด้านล่างนี้เลยครับ

<div class="card">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-block">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

- List groups

ในส่วนนี้จะเป็นการลิสต์รายการของCardนะครับ

ส่วนตัวอย่างรูปแบบ และ code ตามด้านล่างนี้เลยครับ

<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

- Navigation

เป็นการเพิ่มตัวนำทางไปยังหน้านั้นในส่วนหัวของCard หรือ blockนั่นเอง ด้วยองค์ประกอบ Nav จากBootstrap ครับ

ส่วนตัวอย่างรูปแบบ และ code ตามด้านล่างนี้เลยครับ

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

- Background variants

เป็นการเปลี่ยนสีพื้นหลังและเส้นกรอบ ซึ่งBootstrap4ก็ได้มีการเตรียมสีพื้นหลังให้เราได้ใช้ถึง5สี โดยจะใช้class card-inverseคู่กับclassสำหรับแต่ละสี ดังนี้ครับ

สีน้ำเงิน : card-primary
สีเขียว : card-success
สีฟ้า : card-info
สีส้ม : card-warning
สีแดง : card-danger

ส่วนตัวอย่างรูปแบบ และ code ตามด้านล่างนี้เลยครับ

<div class="card card-inverse card-primary mb-3 text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
<div class="card card-inverse card-success mb-3 text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
<div class="card card-inverse card-info mb-3 text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
<div class="card card-inverse card-warning mb-3 text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>
<div class="card card-inverse card-danger text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

- Outline cards

เป็นการทำให้cardของเรามีแต่สีขอบแต่ไม่มีพื้นหลังนะครับ โดยใช้ class card-outline-* เพื่อทำให้ card มีแต่สีขอบครับ ซึ่ง*คือชื่อของสีขอบแต่ละอันที่Bootstrap4เตรียมไว้ให้ ดังนี้ครับ

สีน้ำเงิน : primary
สีเทา : secondary
สีเขียว : success
สีฟ้า : info
สีส้ม : warning
สีแดง : danger

ส่วนตัวอย่างรูปแบบ และ code ตามด้านล่างนี้เลยครับ

<div class="card card-outline-primary mb-3 text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

✎ Modal

เป็นการสร้างกล่องข้อความpop-upเด้งขึ้นมามีด้วยกันหลายรูปแบบไปรับชมกันได้เลยครับ

- Modal components

ด้านล่างนี้จะเป็นตัวอย่าง static modal โดยได้รวมในส่วนของ header , body และ footer เข้าไว้ด้วยกันครับ ซึ่งเวลาเขียนจะใส่class modalครอบทั้งหมดไว้

ส่วนตัวอย่างรูปแบบ และ code ตามด้านล่างนี้เลยครับ

<div class="modal fade">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

- Live demo

เป็นการทำงานโดยให้เรา click ที่ปุ่มครับจากนั้นก็จะมีกล่องข้อความpop-upปรากฎขึ้นมาครับ

ในตอนแรกให้ click ปุ่มนี้ก่อนนะครับ

จากนั้นหน้า pop-up นี้ก็จะมาปรากฎบนหน้าจอครับ

ส่วนนี่คือ code ของการทำงานในลักษณะนี้ครับ

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...ข้อความ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

- Scrolling long content

ลักษณะนี้เป็นการทำmodal ที่มีลักษณะยาวเกินไปสำหรับ viewport หรือ อุปกรณ์ โดยเราสามารถเลื่อนดูเนื้อหาลงมาเรื่อยๆจนกว่าเนื้อหาจะหมดครับ

ในตอนแรกให้กดปุ่มนี้ก่อนนะครับ

ส่วนนี้คือเมื่อเราเลื่อนลงมาจนสุดแล้วนะครับ

ส่วนนี่คือ code ของการทำงานครับ

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...ข้อความ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Tooltips and popovers

tooltips และ pop-over สามารถใส่ใน modal ได้ตามต้องการ และเมื่อเราปิด modals tooltips และ pop-over ก็จะถูกปิดโดยอัตโนมัติไปด้วยครับ

ในตอนแรกให้กดปุ่มนี้ก่อนนะครับ

เมื่อ click button จะมีข้อความ pop-up ขึ้นมานะครับ และ นอกจากนี้เรายัง click link ด้านล่างนี้ได้ด้วยครับ

ส่วนนี้คือ code ของการทำงานนะครับ

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

- Optional sizes

modal มีเลือก 2 ขนาดโดยการปรับแต่งclass modal-dialog โดยถ้าต้องการ modal ขนาดใหญ่ให้เพิ่มclass modal-lg เข้าไป ส่วนถ้าต้องการขนาดเล็กให้ใส่class modal-sm แทนครับ

ส่วนนี่คือ code ของ large modal นะครับ

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

ส่วนนี่คือ code ของ small modal นะครับ

<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

✎ Carousel

Carouselเป็นการแสดงชุดภาพหรือข้อความแบบไหลไปไหลมาได้ เวลาใช้ต้องใส่class carousel และอย่าลืมใส่idเฉพาะของแต่ละCorouselนะ ใส่ครอบทั้งหมดไว้

ใส่class slide เพื่อทำให้ภาพไหลได้แบบอัตโนมัติ

และถ้าหากไม่อยากให้ตำแหน่งของภาพเปลี่ยนแปลงเวลาย่อจอ ควรใส่class d-blockและimg-fluidเข้าไปให้classของภาพแต่ละอันนะครับ

อ่อ! เกือบลืมไปเลย อย่าลืมใส่class activeให้ภาพไหนก็ได้ภาพหนึ่งนะ เดี๋ยวจะมองไม่เห็นCarouselเอา นี่อุส่าเตือนน้าาาา

ข้างล่างนี้ก็จะเป็นตัวอย่างโค้ดของCarouselเบื้องต้น ที่ภาพไหลได้เองแบบอัตโนมัตินะครับ

ตรง…คือใส่pathของภาพที่เราจะใส่ครับ

เราสามารถเพิ่มปุ่มไปภาพถัดไปหรือภาพก่อนหน้าได้นะครับ โดยการเพิ่มโค้ดตรงกล่องสีแดงเข้าไป

ก็จะได้ภาพที่เราสามารถเลื่อนดูได้เอง และยังไหลไปเองได้โดยอัตโนมัติอีกด้วย

หรือถ้าแค่กดเลื่อนภาพไปเองเรื่อยๆมันไม่ทันใจ อยากกดไปที่ภาพนั้นๆเลยก็สามารถทำได้ครับ เพียงแค่เพิ่มโค้ดตรงกล่องสีเขียวเข้ามาครับ

ก็จะได้Carouselที่มีปุ่มสำหรับกดไปภาพต่างๆได้ครับ

แต่ถ้ายังไม่พอใจอีก อยากจะโชว์ข้อความขึ้นมาพร้อมกับภาพนั้นๆได้ ก็ทำได้นะ โดยใส่ข้อความไว้ในแท็ก<div class=”carousel-caption”> </div>และแท็กนี้จะอยู่ข้างในแท็ก<div class=”carousel-item”> </div>อีกที เหมือนกับโค้ดข้างล่างนี้

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li><li data-target="#carouselExampleIndicators" data-slide-to="1"></li><li data-target="#carouselExampleIndicators" data-slide-to="2"></li></ol><div class="carousel-inner" role="listbox"><div class="carousel-item active"><img class="d-block img-fluid" src="..." alt="First slide"><div class="carousel-caption">……..ข้อความ...........</div></div><div class="carousel-item"><img class="d-block img-fluid" src="..." alt="Second slide"></div><div class="carousel-item"><img class="d-block img-fluid" src="..." alt="Third slide"></div></div><a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>
</div>

ก็จะได้Carouselที่มีข้อความอยู่ด้วยแบบนี้

✎ Pagination

Paginationเป็นปุ่มที่เอาไว้กดไปหน้าถัดไป / หน้าก่อนหน้านี้ / หน้าที่ต้องการ โดยทั้งหมดจะถูกใส่ไว้ในแท็ก<nav aria-label=”xxx”><ul class=”pagination”> </ul> </nav> ซึ่งxxxเป็นเหมือนข้อความที่เอาไว้ระบุว่าPaginationอันนี้เป็นPaginationของอะไร เผื่อว่าเรามีPaginationหลายอันจะได้ไม่สับสน ดังตัวอย่างข้างล่างครับโผมม

แต่ปุ่มที่ใช้กดไปหน้าถัดไปหรือก่อนหน้าที่เป็นตัวหนังสืออาจไม่เร้าใจพอ ก็สามารถเปลี่ยนให้เป็นiconลูกศรได้ เพียงแค่เปลี่ยนโค้ดตรงกล่องสีเขียวไปเป็นกล่องสีม่วง ดังตัวอย่างข้างล่างครับ

ก็จะได้ผลลัพธ์ออกมาแบบนี้ครับ

และทั้งหมดนี้ก็เป็นเพียงส่วนหนึ่งของComponentsในBootstrap4ที่ผมยกมาแนะนำนะครับ จริงๆยังมีอีกเยอะมว๊ากกกกกกกก
ไว้ถ้ามีโอกาส เมื่อชาติต้องการ ผมอาจจะกลับมาแนะนำComponentsอื่นๆอีก
วันนี้.. ไปก่อนล่ะะะะ

References : https://v4-alpha.getbootstrap.com/

ตอนที่5 : สอนใช้งานComponentsในBootstrap4เบื้องต้น (Part2)

✎ Card

- Blocks

- Titles, Text, and Links

- Images

- List groups

- Navigation

- Background variants

- Outline cards

✎ Modal

- Modal components

- Live demo

- Scrolling long content

Tooltips and popovers

- Optional sizes

✎ Carousel

✎ Pagination

Written by โจ๊กหอยนางรม