<!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="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <!-- 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="#"> Homework 5 : 6062160001 Miss:Nittaya Tachat</a> </nav> <div class="container mt-5"> <div class="row"> <div class="col-lg-6"> <div class="btn-group"> <button type="button" class="btn btn-primary btn-lg"><i class="fa fa-mobile-alt"></i> SAMSUNG</button> <button type="button" class="btn btn-success btn-lg"><i class="fab fa-apple"></i> APPLE</button> <div class="btn-group"> <button type="button" class="btn btn-danger btn-lg"><i class="fa fa-mobile-alt"></i> SONY <span class="label label-default">2</span> </button> <button type="button" class="btn btn-danger btn-lg dropdown-toggle" data-toggle="dropdown"> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu"> <li><a href="#">Tablet</a></li> <li><a href="#">Smartphone</a></li> </ul> </div> </div> </div> <div class="col-lg-6"> <button type="button" class="btn btn-default btn-xs"><i class="fas fa-laptop"></i> Acer</button> <button type="button" class="btn btn-default btn-xs"><i class="fas fa-laptop"></i> Asus</button> <button class="btn btn-default btn-xs"> <i class="fa fa-circle-o-notch fa-spin fa-lg fa-fw"></i> <span class="sr-only"></span> HP </button> </div> <br><br><br> <div class="col-lg-12"> <h2>ระดับรายงานความก้าวหน้า</h2> <p>วิชาโครงงานทางเทคโนโลยีสารสนเทศ 2:</p> <table class="table table-striped"> <thead> <tr> <th>รายการ</th> <th>ระยะเวลาดำเนินการ</th> <th>ระดับความก้าวหน้า</th> <th>สถานะ</th> </tr> </thead> <tbody> <tr> <td>ออกแบบฐานข้อมูล</td> <td>3 เดือน</td> <td> <div class="progress"> <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%"> 70% </div> </div> </td> <td> <span class="label label-success"><i class="fa fa-check-circle" aria-hidden="true"></i> สำเร็จ</span> </td> </tr> <tr> <td>ออกแบบหน้าจอ</td> <td>3 เดือน</td> <td> <div class="progress"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% </div> </div> </td> <td> <span class="label label-warning"><i class="fa fa-minus-circle" aria-hidden="true"></i> อยู่ระหว่างดำเนินการ</span></td> </tr> <tr> <td>ออกแบบหน้าจอ</td> <td>3 เดือน</td> <td> <div class="progress"> <div class="progress-bar progress-bar-primary progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%"> 40% </div> </div> </td> <td><span class="label label-warning"><i class="fa fa-minus-circle" aria-hidden="true"></i> อยู่ระหว่างดำเนินการ</span></td> </tr> </tbody> </table> </div> </div> </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js" integrity="sha384-0pzryjIRos8mFBWMzSSZApWtPl/5++eIfzYmTgBBmXYdhvxPc+XcFEk+zJwDgWbP" crossorigin="anonymous"></script> <!-- Include all compiled plugins (below), or include individual files as needed -->
We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy. Accept Learn more
