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

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

ส่วนใหญ่แล้วหากเราต้องการใช้ส่วนไหนนั้นเราก็สามารถไปcopy and paste โค้ดนั้นมาใช้ได้เลยครับ และถ้าหากต้องการปรับสีหรือขนาดเพิ่มเติมก็สามารถเข้าไปแก้ไขได้ในclassของobjectนั้นๆได้เลยครับ

✎ Navbar

เวลาที่เราเขียนNavbarเราจะเขียนทั้งหมดไว้ในแท็ก<nav> </nav> และจะต้องมีclass .navbar กับ .navbar-toggleable-* ด้วยเพื่อจะได้มีความเป็น Responsiveเวลาหดขนาดจอนั่นเองครับ

Navbarสำหรับจอใหญ่

Navbarสำหรับจอขนาดเล็ก

Navbarของเราสามารถกำหนดตำแหน่งได้นะครับ

• อยู่บนสุดของจอไม่ว่าเราจะเลื่อนลงไปไหนก็ตาม มันก็จะตามเราไปด้วย จะใช้class fixed-top ใส่ไว้ในแท็ก<nav> </nav>
• อยู่ล่างสุดของจอไม่ว่าเราจะเลื่อนขึ้นหรือลง จะใช้class fixed-bottom ใส่ไว้ในแท็ก<nav> </nav> มันก็จะตามหลอกหลอนอยู่ข้างล่างจอของเราตลอดเลยครับ อิอิ
• อยู่ตำแหน่งด้านบนของเว็บตลอดกาล(แบบไม่ตามหลอกหลอนเราตลอดเวลานะ) จะใช้class sticky-top ใส่ไว้ในแท็ก<nav> </nav>

ในNavbarของเราสามารถใส่brandโลโก้ของเว็บเราได้นะ ไม่ว่าจะใส่เป็นรูปภาพหรือเป็นตัวอักษรก็ได้ครับ ดังภาพข้างล่างนี้

brandของNavbarแบบเป็นตัวอักษร

<nav class="navbar navbar-light bg-faded">
  <h1 class="navbar-brand mb-0">Navbar</h1>
</nav>

brandของNavbarแบบเป็นรูปภาพ

<nav class="navbar navbar-light bg-faded">
  <a class="navbar-brand" href="#">
    <img src="******" width="30" height="30" alt="">
  </a>
</nav>

ตรง******ให้ใส่pathของรูปภาพที่เราจะใส่นะครับ

และการใส่ปุ่มเมนูต่างๆในNavbarของเรานั้นจะใช้class nav-link กับ nav-item ในลักษณะคล้ายกับโค้ดตัวอย่างด้านล่างเลยครับ

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

นอกจากนั้นยังสามารถใส่กล่องข้อความที่เอาไว้สำหรับกรอกข้อมูลต่างๆได้เช่นพวกช่องsearchอะไรพวกนี้ ดังโค้ดข้างล่างครับ

<nav class="navbar navbar-light bg-faded">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="text" placeholder="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

และที่น่าสนใจก็คือBootstrap4ได้เตรียมclassสำหรับสีbackgroundของNavbarไว้ให้ด้วยนะ มีอยู่2สี

• สีดำ จะใช้class navbar-inverse กับ bg-inverse ใส่ในแท็ก<nav> </nav>เลยครับ
• สีน้ำเงิน จะใช้class navbar-inverse กับ bg-primary ใส่ในแท็ก<nav> </nav>เช่นกันครับ

ตัวอย่างNavbarสีดำกับสีน้ำเงิน

แต่ถ้าหากอยากใช้สีอื่นก็สามารถไปใส่ style = “background-color: *****;” ในแท็ก<nav> </nav>เลยครับ (*****ให้ใส่โค้ดสีที่เราต้องการครับ)

✎ button

โดยปุ่มก็มีการปรับรูปแบบและขนาดที่ต่างกันไป เรามารับชมกันเลยดีกว่าว่ามีปุ่มรูปแบบไหนบ้างนะครับ

Button tags

class btn เนี่ยถูกออกแบบมาให้ใช้กับ <button> อย่างไรก็ตามสามารถใช้คลาสเหล่านี้ใน <a> หรือ <input> ได้ด้วยนะครับ แต่ในเบราว์เซอร์บางตัวก็อาจจะมีการแสดงผลที่แตกต่างกันเล็กน้อยครับ

อ๋อ อย่าลืมไปล่ะ * เมื่อเราใช้class button ที่ใช้เรียกใช้ฟังก์ชันในหน้าเว็บ ลิงก์เหล่านี้ควรให้ role="button" ด้วยนะครับ

ส่วนตัวอย่างรูปแบบของ button tags และ code ดูได้จากตัวอย่างด้านล่างนี้เลยครับ

Outline buttons

เป็นลักษณะของปุ่มที่ไม่มีภาพพื้นหลังมีแต่เส้นกรอบนะครับ จำเป็นต้องมี button แต่ไม่ต้องนำสีพื้นหลังมา ให้แทนที่classด้วย btn-outline-* เพื่อลบภาพพื้นหลังและสีปุ่มนะครับ

ส่วนตัวอย่างรูปแบบของ outline buttonsและ code ดูได้จากตัวอย่างด้านล่างนี้เลยครับ

sizes

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

นี่คือตัวอย่างของปุ่มขนาดเล็กและ code นะครับ

ส่วนนี่คือตัวอย่างของปุ่มขนาดใหญ่ และ code นะครับ

ถ้าเราอยากให้ปุ่มขยายเต็มความกว้างก็สามารถทำได้นะครับด้วยการเพิ่มclass btn-block เข้าไปนั่นเอง

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

Active state

เป็นการบ่งบอกว่าปุ่มนี้กำลังได้รับการตอบสนองเรียกใช้งานอยู่ในปัจจุบันครับ โดยการทำให้เป็น active เราไม่จำเป็นต้องเพิ่มคลาสให้กับ <button> เนื่องจากใช้ pseudo-class โดยใช้ . active แทนครับ

ส่วนตัวอย่างรูปแบบ active state และ code ดูได้จากตัวอย่างด้านล่างนี้เลยครับ

<a href="#" class="btn btn-primary btn-lg active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" role="button" aria-pressed="true">Link</a>

disabled state

เป็นการทำให้ปุ่มเป็นปุ่มที่ไม่สามารถกดได้ โดยเพิ่ม disabled boolean attribute ไปยัง <button> นะครับ

ส่วน disabled button ที่ใช้ <a> ก็มีองค์ประกอบต่างกันเล็กน้อยนะครับ

• <a> ไม่สนับสนุน disabled attribute ดังนั้นจึงต้องเพิ่มclass disabled
• Disabled buttons ควรมีattribute aria-disabled=”true”เพื่อระบุสถานะ

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

<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>

Checkbox and radio buttons

เราสามารถใช้class btn ของ Bootstrap กับส่วนอื่น ๆ เช่น <label> เพื่อให้สามารถเลือกปุ่ม checkbox หรือ radio สลับกันได้นั่นเองครับ โดยเพิ่ม data-toggle=”buttons” ไปยัง. btn-group เพื่อให้สามารถเลือกรูปแบบ และ สลับรูปแบบได้ครับ

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

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>

✎ ปุ่มเมนู Dropdowns

ปุ่มเมนูDropdownsจะใส่class dropdownไว้ในแท็ก<div>ที่ครอบทั้งหมดไว้ และส่วนที่เป็นปุ่มก็จะใส่ครอบไว้ในแท็ก<button> </button> ส่วนที่เป็นเมนูที่ดรอปลงมาทั้งหมดนั้นจะใส่ครอบไว้ในแท็ก<div>ที่มีclass dropdown-menuอยู่ และเมนูที่อยู่ในดรอปแต่ละตัวจะใช้class dropdown-item ดังตัวอย่างต่อไปนี้ครับ

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="*****" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="*****">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

ตรงที่เป็น*****ต้องชื่อเหมือนกันทั้ง2ที่นะครับ

หรือจะใช้เป็นdropupก็ได้ครับ ก็เพียงแค่เปลี่ยนจากclass dropdownเป็นdropup

ภาพตัวอย่างของDropup

✎ Breadcrumb

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

จากภาพตัวอย่างนั้นแสดงว่าเราอยู่หน้าที่ชื่อว่าData แต่ก่อนหน้าหน้าDataคือหน้าLibraryและหน้าHomeตามลำดับนั่นเองครับ

ในการเขียนโค้ดของBreadcrumbนั้นจะเขียนทั้งหมดอยู่ในแท็ก<ol> </ol>เนื่องจากข้อมูลข้างในมีความเป็นลำดับครับ และจะใช้class breadcrumbอยู่ข้างใน ส่วนลิสหน้าแต่ละหน้านั้นจะใช้class breadcrumb-item และที่หน้าไหนเป็นหน้าปัจจุบันที่เราอยู่ให้ใส่class activeเข้าไปด้วยครับ ดังตัวอย่างโค้ดต่อไปนี้ซึ่งเป็นโค้ดของภาพBreadcrumbข้างบนครับ

<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active">Data</li>
</ol>

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

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