Please note, this is a STATIC archive of website www.tutorialspoint.com from 11 May 2019, cach3.com does not collect or store any user information, there is no "phishing" involved.
Tutorialspoint

Online Bootstrap Editor

<!DOCTYPE html><html lang="en">
<head> 
<meta charset="UTF-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title>Test</title> 
     <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> 
     <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css">
</head>
<body>

<!---- script content -->

           <script src="node_modules/jquery/dist/jquery.min.js"></script> 
          <script src="node_modules/popper.js/dist/umd/popper.min.js"></script> 
         <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 

<!---- web content-->
</br>
    <div class="row-2">
        <div class="col-4">
<button type="button" class="btn btn-primary">Primary</button>
<a href="#" class="btn btn-info" role="button">Link Button</a>
<input type="submit" class="btn btn-success" value="Submit Button">
</div>
</div>

</br>
        <div class="container">
            <div class="row">
                    <div class="col-6">
            <div class="btn-group">
                <button type="button" class="btn btn-info"><i class="fas fa-mobile-alt"></i>&nbsp; Samsung</button>
                <button type="button" class="btn btn-primary"><i class="fas fa-mobile-alt"></i>&nbsp; Apple</button>
                <button type="button" class="btn btn-danger"><i class="fas fa-mobile-alt"></i>&nbsp; HUAWEI &nbsp; <span class="badge badge-dark">2</span></button>
                <div class="btn-group">
                    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
                        <span class="caret"></span>
                      </button>
                      <div class="dropdown-menu">
                        <a class="dropdown-item" href="#">Tablet</a>
                        <a class="dropdown-item" href="#">Smartphone</a>
                      </div>
                </div>
              </div>
              </div>
              <div class="col-6 text-right">
              <button type="button" class="btn btn-outline-success btn-sm"><i class="fas fa-laptop"></i>&nbsp; Acer</button>
              <button type="button" class="btn btn-outline-primary btn-sm"><i class="fas fa-laptop"></i>&nbsp; Asus</button>
            <button type="button" class="btn btn-outline-warning btn-sm"><span class="spinner-border spinner-border-sm"></span>&nbsp; HP</button>
        </div></div></br></br>

        <div class="container">
            <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" style="width:70%">70%</div></div></td>
                    <td><span class="badge badge-success"><i class="fas fa-check-circle"></i> &nbsp;สำเร็จ</span></td>
                  <tr>
                    <td>ออกแบบหน้าจอ</td>
                    <td>3 เดือน</td>
                    <td><div class="progress"><div class="progress-bar bg-warning" style="width:40%">40%</div></div></td>
                    <td><span class="badge badge-warning"><i class="fas fa-minus-circle"></i>&nbsp; อยู่ระหว่างดำเนินการ</span></td>
                  </tr>
                  <tr>
                    <td>ออกแบบหน้าจอ</td>
                    <td>3 เดือน</td>
                    <td><div class="progress"><div class="progress-bar bg-primary progress-bar-striped" style="width:40%">40%</div></div></td>
                    <td><span class="badge badge-warning"><i class="fas fa-minus-circle"></i>&nbsp; อยู่ระหว่างดำเนินการ</span></td>
                  </tr>
                </tbody>
              </table>
            </div>
        </div>
</body>
</html>

Advertisements
Loading...

We use cookies to provide and improve our services. By using our site, you consent to our Cookies Policy.