<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-inverse" role="navigation"> <a class="navbar-brand" href="#"> Selected Topic : Homework 2 : 6062210002 Palita Nimnoi</a> </nav> <div class="jumbotron" style="background-color: lightcyan"> <div class="row"> <div class="col-lg-8"> <h1 class="text-danger"> วิชาหัวข้อพิเศษ </h1> <h4> คำอธิบายรายวิชา </h4> <h6> หัวข้อพิเศษทางการจัดการสารสนเทศที่เป็นที่สนใจและสำคัญในขณะนั้นและที่เกี่ยวข้อง หัวข้อและเนื้อหาเปลี่ยนไปในแต่ละปี และแต่ละกลุ่มที่เรียน โดยได้รับความเห็นชอบจากหัวหน้าสาขาและคณะบดี </h6> </div> </div> </div> <div class="container"> <h1> หัวข้อศึกษาในในรายวิชาหัวข้อพิเศษ </h1> <p class="text-info" > เนื้อหาการเรียนประกอบด้วย </p> <p class="text-primary"> บทที่ 1 </p> - Bootstrap 4 Get Started <br> - Bootstrap 4 Grids <br></br> <p class="text-primary"> บทที่ 2 </p> - Bootstrap Text / Typography <br> - Bootstrap 4 Color <br> - bootstrap 4 Tables <br></br> <p class="text-primary"> บทที่ 3 </p> - Bootstrap 4 Images <br> - Bootstrap 4 Jumbotron <br> - Bootstrap 4 Alert <br> - Sweet Alerts 2 <br><br> <h3> การจัดการรูปภาพ </h3> <br> </div> <div class="container"> <div class="row"> <div class="col-lg-4 text-center"> <img src=" " class="rounded" width="300" height="300" alt=""> </div> <div class="col-lg-4 text-center"> <img src=" " class="rounded-circle" width="300" height="300" alt=""> </div> <div class="col-lg-4 text-center"> <img src=" " class="img-thumbnail" alt=""> </div> </div> </div> <br><br> <div class="container"> <h2> รายชื่อนักศึกษา </h2> <p> นักศึกษาที่ลงทะเบียนเรียนวิชาหัวข้อพิเศษ ภาคเรียนที่ 2/2561 </p> <div class="table-responsive-sm"> <table class="table table-striped table-bordered table-hover table-sm "> <thead> <tr class="table-danger-50"> <th> รหัสนักศึกษา </th> <th> ชื่อ-นามสกุล </th> <th> Email </th> </tr> </thead> <tbody> <tr class="table-success-50"> <td> 6062210001 </td> <td> นางสาวทองเอก ท่าโฉลง </td> <td> [email protected] </td> </tr> <tr> <td> 6062210002 </td> <td> นางสาวชบา ท่าโฉลง </td> <td> [email protected] </td> </tr> <tr class="table-success-50"> <td> 6062210003 </td> <td> นางสาวผ่อง ท่าโฉลง </td> <td> [email protected]</td> </tr> </tbody> </table> </div> <div class="container"> <h2> การใช้งาน sweetalert2 </h2> <div class="container"> <button type="button" class="btn btn-info" onclick="swalfunction()">การแจ้งเตือน 1</button> <button type="button" class="btn btn-info" onclick="swalfunction2()">การแจ้งเตือน 2</button> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <script> function swalfunction() { Swal.fire({ title: 'การแจ้งการทำงานของระบบ', text: 'คุณได้ดำเนินการเขียนโปรแกรมการแจ้งเตือนด้วย Sweetalert 2 สำเร็จแล้ว', type: 'success', confirmButtonText: 'ตกลง' }) } </script> <script> function swalfunction2() { Swal.fire({ title: 'คุณต้องการปิดหน้าจอหรือไม่ ?', text: "คุณแน่ใจหรือไม่ที่ต้องการปิดหน้าจอนี้", type: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'ใช่' }) } </script> <br><br> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more
