<!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"> <link rel="stylesheet" href="node_modules/sweetalert2/dist/sweetalert2.min.css"> </head> <body> <div class="jumbotron" style="background-color: greenyellow"> <div class="row"> <div class="col-lg-4 text-center"> <img src="img/logo.png" width="150" height="150"> </div> <div class="col-lg-8"> <H1> วิชาหัวข้อพิเศษ </H1> <h4> คำอธิบายรายวิชา </h4> <p> หัวข้อพิเศษทางการจัดการสารสนเทศที่เป็นที่สนใจและสำคัญในขณะนั้นและที่เกี่ยวข้อง หัวข้อและเนื้อหาเปลี่ยนไปในแต่ละปี และแต่ละกลุ่มที่เรียน โดยได้รับความเห็นชอบจากหัวหน้าสาขาและคณะบดี </p> </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> <p class="text-primary"> บทที่ 2 </p> - Bootstrap Text / Typography <br> - Bootstrap 4 Color <br> - bootstrap 4 Tables <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="img/11.jpg" class="rounded" width="300" height="300" alt=""> </div> <div class="col-lg-4 text-center"> <img src="img/12.jpg" class="rounded-circle" width="300" height="300" alt=""> </div> <div class="col-lg-4 text-center"> <img src="img/13.jpg" 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-success"> <th> รหัสนักศึกษา </th> <th> ชื่อ-นามสกุล </th> <th> Email </th> </tr> </thead> <tbody> <tr> <td> 6062110000 </td> <td> สมชาย ต้นดี </td> <td> [email protected] </td> </tr> <tr> <td> 6062110001 </td> <td> สมพร ก็มา </td> <td> [email protected] </td> </tr> <tr> <td> 6062110003 </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> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> <script src="node_modules/sweetalert2/dist/sweetalert2.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> </div> </body> </html>
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more
