สัปดาห์ที่ 6: Bootstrap (ต่อ)

»  navbar-header

การประกาศใช้ bootstrap เวอร์ชั่น 3

» เขียนโค๊ดดังต่อไปนี้เพื่อใช้งาน bootstrap version 3

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://dsdi.msu.ac.th/js/jquery.js"></script>
<link href="https://dsdi.msu.ac.th/css/bootstrap.min.css" rel="stylesheet">
<script src="https://dsdi.msu.ac.th/assets/bootstrap-3.3.5/js/bootstrap.min.js"></script>
</head>

กิจกรรม: 1: การใช้งานคลาส dropdown

» เมนู dropdown เป็นรายการเมนู อนุญาติให้ผู้ใช้เลือกข้อมูลที่อยู่ภายในรายการ ดังนี้

<div style='display:inline;'  class="dropdown">
  <button class="dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

<div style='display:inline;' class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

ผลลัพธ์:

กิจกรรม: 2: การใช้งานคลาส dropdown ด้วย ul (unorder list)

» bootstrap เวอร์ชั่น 3-4 ใช้คำสั่ง ดังนี้

<li class="dropdown">
   <a style="text-decoration: none;" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">รายวิชาปี 2561 <span class="caret"></span></a>
   <ul class="dropdown-menu" role="menu">
      <li><a href="#">1202122 การโปรแกรมสำหรับงานสารสนเทศ</a></li>
      <li><a href="#">1202102 สารสนเทศเพื่อการผลิตสื่อวีดิทัศน์</a></li>
   </ul>
</li>

ผลลัพธ์:

    • การใช้คลาส dropdown ใน bootstrap เวอร์ชั่น 5 

    » bootstrap เวอร์ชั่น 5 ใช้กับแท็ก button และแท็ก a ดังนี้

    <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <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>

    ผลลัพธ์:

    Action Another action Something else here

    กิจกรรม: 3: การใช้งานคลาส nav-tabs

    » Tabs สร้างด้วย คลาส nav และ nav-tabs ดังนี้

    <ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

    ผลลัพธ์:

    กิจกรรม: 4: การใช้งานคลาส nav-tabs และ dropdown

    » Tabs สร้างด้วย คลาส nav และ nav-tabs ส่วน dropdown สร้างด้วยคลาส dropdown ดังนี้

    <ul class="nav nav-tabs">
  <li class="active"><a href="#">Home</a></li>
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1
    <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="#">Submenu 1-1</a></li>
      <li><a href="#">Submenu 1-2</a></li>
      <li><a href="#">Submenu 1-3</a></li>
    </ul>
  </li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
</ul>

    ผลลัพธ์:

    กิจกรรม: 5: การใช้งานคลาส nav-tabs และ dropdown II

    » Tabs สร้างด้วย คลาส nav และ nav-tabs ส่วน dropdown สร้างด้วยคลาส dropdown ดังนี้

     <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
        <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

    ผลลัพธ์:

    กิจกรรม: 6: การใช้งานคลาส nav-tabs และไอคอนชิดขวา

    » Tabs สร้างด้วย คลาส nav และ nav-tabs ส่วน dropdown สร้างด้วยคลาส dropdown ดังนี้

    <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>

    ผลลัพธ์:

    กิจกรรม: 7: การใช้งานคลาส nav-tabs และไอคอนชิดขวา

    » Tabs สร้างด้วย คลาส nav และ nav-tabs ส่วน dropdown สร้างด้วยคลาส dropdown ดังนี้

    <nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
      <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
    </ul>
  </div>
</nav>

    ผลลัพธ์:

    กิจกรรม: 8: การใช้งาน bootstrap และฟอร์ม (Form)

    » Add class .form-horizontal to the 
     element
» Add class .control-label to all 
    <form class="form-horizontal" action="/action_page.php">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

    ผลลัพธ์:



    กิจกรรม: 9: การใช้งาน bootstrap และ Modal

    »  Trigger ใช้แอตทริบิวส์ data-toggle="modal" และ data-target="#Modal1"

    <!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#Modal1">Open Modal</button>

<!-- Modal -->
<div id="Modal1" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">ประกาศ: ......................................</h4>
      </div>
      <div class="modal-body">
        <p>เนื่องจาก .............. ทำให้.......... จึงแจ้ง................ ให้ปฏิบัติตาม... เพื่อ ................ โดยพร้อมเพียงกัน</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">ปิดปุ่ม</button>
      </div>
    </div>
  </div>
</div>

    ผลลัพธ์:

    กิจกรรม: 10: การใช้งาน img-rounded, circle และ thumbnail

    » การแสดงขอบของรูปด้วย bootstrap แสดงได้ ดังนี้  img-rounded , img-circle และ img-thumbnail 

    <img  src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive img-rounded" title="มุมมน" style="display:inline;width:33%;">

<img  src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive img-circle" title="วงกลม" style="display:inline;width:33%;">

<img  src="https://www.w3schools.com/bootstrap/cinqueterre.jpg" class="img-responsive img-thumbnail" title="มีขอบ" style="display:inline;width:33%;">

    ผลลัพธ์:

    กิจกรรม: 11: การใช้งาน table-responsive

    »  คลาส table-striped แสดงสีพื้นสลับกันในแต่ละแถว
» การแสดงตารางด้วย class table-responsive ดังนี้

     <div class="table-responsive">          
  <table class="table table-striped">
    <thead>
      <tr>
        <th>ลำดับ</th><th>ชื่อ</th><th>สกุล</th><th>อายุ</th><th>จังหวัด</th><th>ประเทศ</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td><td>ทักษิณ</td><td>ชินวัตร</td><td>73</td><td>เชียงใหม่</td><td>ไทย</td>
      </tr>
      <tr>
        <td>2</td><td>อภิสิทธิ์</td><td>เวชชาชีวะ</td><td>58</td><td>สหราชอาณาจักร</td><td>ไทย</td>
      </tr>
      <tr>
        <td>3</td><td>ชวน</td><td>หลีกภัย</td><td>84</td><td>ตรัง</td><td>ไทย</td>
      </tr>
      <tr>
        <td>4</td><td>ทักษิณ</td><td>ชินวัตร</td><td>73</td><td>เชียงใหม่</td><td>ไทย</td>
      </tr>
    </tbody>
  </table>
  </div>
</div>

    ผลลัพธ์:

    ลำดับชื่อสกุลอายุจังหวัดประเทศ
    1ทักษิณชินวัตร73เชียงใหม่ไทย
    2อภิสิทธิ์เวชชาชีวะ58สหราชอาณาจักรไทย
    3ชวนหลีกภัย84ตรังไทย
    4ทักษิณชินวัตร73เชียงใหม่ไทย

    กิจกรรม: 12: สร้างเว็บดังตัวอย่างต่อไปนี้

    » ให้เขียนโค๊ด HTML เพื่อแสดงโครงสร้างต่อไปนี้ เมนู dropdown 
» การใช้ภาพด้านบนและล่างให้เหลือกตามความเหมาะสม

    กิจกรรม: 13: ให้สร้างเว็บเพจ

    » ให้เขียนโค๊ด Html เพื่อสร้างหน้าเว็บเพจดังตัวอย่างต่อไปนี้

    ไฟล์ภาพส่วนหัว

    ไฟล์ตัวอย่าง ให้จัดตามเลเอาท์ด้านล่าง มีภาพ 8 ภาพ

    รายละเอียดเอามาจาก https://chat.openai.com/chat หรือ wiki pedia

    รายละเอียด foot page ให้มี 3 คอลัมน์ และภาพ QR code

    แหล่งข้อมูลเพิ่มเติม

    » https://getbootstrap.com/docs/4.0/components/dropdowns/
    Bootstrap