Free Template : Movie Seat UI by Bootstrap 4
Free Template : Movie Seat UI by Bootstrap 4
พัฒนาด้วย Bootstrap 4 โดยการออกแบบ UI แบบง่ายๆ ใช้ class ดังต่อไปนี้
- Grid System
- alert alert-warning
- btn
- และ CSS แบบง่ายๆ
ผลการทำงาน
ขอแนะนำระบบโหวต/เลือกตั้งออนไลน์
สนใจ inbox มาที่ https://www.facebook.com/sornwebsites/ (ไม่แพงจ้า)
*สามารถดาวน์โหลดไปพัฒนาต่อได้เลยครับ
*copy code save .html and run
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <title>Movie Seat UI by devbanban.com || Bootstrap 4</title> <style type="text/css"> .devbanban{ background-color: #ffffff; /*opacity: 0.7; filter: alpha(opacity=70);*/ } </style> </head> <body style="background-color: #330000;"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12" style="margin-top: 50px;"> <h1 align="center" style="color:#ffffff;"> MOVIE Seat UI by devbanban.com </h1> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="col-sm-1 col-md-1"></div> <div class="col-xs-12 col-sm-11 col-md-10 devbanban" style="margin-top: 50px;"> <h1 align="center">Multiplex Theatre Showing Screen 1</h1> <div class="row"> <div class="col-sm-3"></div> <div class="col-sm-6"> <div class="alert alert-warning" role="alert"> <center>SCREEN</center> </div> <hr> <div class="row" style="margin-bottom: 20px;"> <div class="col-xs-1">A </div> <div class="col-xs-11"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> <button type="button" class="btn btn-secondary">5</button> <button type="button" class="btn btn-secondary">6</button> <button type="button" class="btn btn-secondary">7</button> <button type="button" class="btn btn-secondary">8</button> <button type="button" class="btn btn-secondary">9</button> <button type="button" class="btn btn-secondary">10</button> <button type="button" class="btn btn-secondary">11</button> </div> </div> <div class="row" style="margin-bottom: 20px;"> <div class="col-xs-1">B </div> <div class="col-xs-11"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> <button type="button" class="btn btn-secondary">5</button> <button type="button" class="btn btn-secondary">6</button> <button type="button" class="btn btn-secondary">7</button> <button type="button" class="btn btn-secondary">8</button> <button type="button" class="btn btn-secondary">9</button> <button type="button" class="btn btn-secondary">10</button> <button type="button" class="btn btn-secondary">11</button> </div> </div> <div class="row" style="margin-bottom: 20px;"> <div class="col-xs-1">C </div> <div class="col-xs-11"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> <button type="button" class="btn btn-secondary">5</button> <button type="button" class="btn btn-secondary">6</button> <button type="button" class="btn btn-secondary">7</button> <button type="button" class="btn btn-secondary">8</button> <button type="button" class="btn btn-secondary">9</button> <button type="button" class="btn btn-secondary">10</button> <button type="button" class="btn btn-secondary">11</button> </div> </div> <div class="row" style="margin-bottom: 20px;"> <div class="col-xs-1">D </div> <div class="col-xs-11"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> <button type="button" class="btn btn-secondary">5</button> <button type="button" class="btn btn-danger">6</button> <button type="button" class="btn btn-danger">7</button> <button type="button" class="btn btn-secondary">8</button> <button type="button" class="btn btn-secondary">9</button> <button type="button" class="btn btn-secondary">10</button> <button type="button" class="btn btn-secondary">11</button> </div> </div> <div class="row" style="margin-bottom: 20px;"> <div class="col-xs-1">E </div> <div class="col-xs-11"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> <button type="button" class="btn btn-danger">5</button> <button type="button" class="btn btn-danger">6</button> <button type="button" class="btn btn-secondary">7</button> <button type="button" class="btn btn-secondary">8</button> <button type="button" class="btn btn-secondary">9</button> <button type="button" class="btn btn-secondary">10</button> <button type="button" class="btn btn-secondary">11</button> </div> </div> <div class="row" style="margin-bottom: 20px;"> <div class="col-xs-1">F </div> <div class="col-xs-11"> <button type="button" class="btn btn-secondary">1</button> <button type="button" class="btn btn-secondary">2</button> <button type="button" class="btn btn-secondary">3</button> <button type="button" class="btn btn-secondary">4</button> <button type="button" class="btn btn-secondary">5</button> <button type="button" class="btn btn-secondary">6</button> <button type="button" class="btn btn-danger">7</button> <button type="button" class="btn btn-danger">8</button> <button type="button" class="btn btn-danger">9</button> <button type="button" class="btn btn-danger">10</button> <button type="button" class="btn btn-danger">11</button> </div> </div> </div> <div class="col-sm-3"></div> </div> </div> <div class="col-sm-1 col-md-1"></div> </div> </div> <hr> <center> <font color="white"> design by devbanban.com </font></center> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> </body> </html> |
หรือบน Github
https://github.com/devbanban/MovieseatUI
ขายระบบพร้อมใช้ ระบบแจ้งซ่อมออนไลน์สำหรับองค์กร php7 ค่าตัว 8,000 บาท
ขายระบบพร้อมใช้ Cart PHP7, ตะกร้าสินค้า php, E-commerce, ขายสินค้าออนไลน์, เว็บอีคอมเมิร์ช, ตัดสต๊อก 6,900 บาท
ซื้อระบบนี้แถมคอร์สออนไลน์ D02 สอน php ระบบแคตตาล็อคออนไลน์ ระบบตะกร้าสินค้า จ่ายครั้งเดียว เข้าเรียนได้ตลอดชีพ
**รายละเอียดเพิ่มเติม คลิก
สนับสนุน DEVBANBANร่วมสนับสนุน ค่ากาแฟ ค่าโฮส devbanban.com และทีมงานได้ที่
ธนาคารกรุงไทย สาขาเดอะมอลล์ท่าพระ
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 878-0-17747-6
————————————————————————————
ธนาคารไทยพาณิชย์ สาขามหาวิทยาลัยราชภัฏธนบุรี
ชื่อบัญชี นายพิศิษฐ์ บวรเลิศสุธี เลขที่ 406-359094-1
fanpage : https://www.facebook.com/sornwebsites/