แจกฟรี Template Web board, แจกเทมเพลต เว็บบอร์ด Bootstrap4

แจกฟรี Template Webboard, แจกเทมเพลต เว็บบอร์ด Bootstrap4 ให้เอาไปเป็นตัวอย่างและพัฒนาต่อยอด

ขอแนะนำระบบพร้อมใช้ ราคาถูก ได้ Code + Database ทั้งหมด
1.เว็บอีคอมเมิร์ช คลิก
2.เว็บ FOOD POS ขายอาหารหน้าร้าน คลิก
3.เว็บ Coffee POS ขายกาแฟหน้าร้าน คลิก
4.เว็บบริษัท / เว็บองค์กร คลิก
5.ระบบหอพัก โปรแกรมหอพัก คลิก
6.ระบบยืมคืน เบิกจ่ายพัสดุ ครุภัณฑ์ คลิก
7.ระบบแจ้งซ่อมสำหรับองค์กร คลิก
8.ระบบฐานข้อมูลวิจัย คลังข้อมูลวิจัย ฐานข้อมูลวิทยานิพนธ์ Research Corpus คลิก
9.ระบบสอบออนไลน์ คลิก
10.ระบบอื่นๆ เพิ่มเติม คลิก

คลิปอธิบายส่วนต่างๆ ของเทมเพลต

สามารถ save .html และ run บน browser ได้เลยครับ เช่น index.html

<!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.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <title> My Board 2020 | devbanban.com</title>
    <!-- https://ionicons.com/ -->
    <script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
  </head>
  <body>
    <!-- start navbar -->
    <div class="container">
      <div class="row">
        <div class="col col-sm-12">
          <nav class="navbar navbar-expand-lg navbar navbar-dark bg-primary">
            <a class="navbar-brand" href="#">MyBoard</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#">หน้าหลัก <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">เกี่ยวกับ</a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    เลือกห้อง
                  </a>
                  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">ห้อง A</a>
                    <a class="dropdown-item" href="#">ห้อง B</a>
                  </div>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="https://devbanban.com/?cat=250">คอร์สออนไลน์</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="https://devbanban.com/?page_id=2309">สนับสนุน</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="https://devbanban.com/?p=4425">ระบบพร้อมใช้</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="https://devbanban.com/?p=4425">Login</a>
                </li>
              </ul>
              <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
              </form>
            </div>
          </nav>
        </div>
      </div>
    </div>
    <!-- end navbar -->
    <!-- start categories -->
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-12">
          <br>
          <div class="alert alert-primary" role="alert">
           <ion-icon name="grid-outline"></ion-icon> เลือกห้อง
          </div>
        </div>
        <div class="col-6 col-sm-4">
          <div class="alert alert-secondary" role="alert">
           <ion-icon name="airplane-outline"></ion-icon>  ห้อง A............. <span class="badge badge-danger">(20)</span>
          </div>
        </div>
        <div class="col-6 col-sm-4">
          <div class="alert alert-success" role="alert">
           <ion-icon name="aperture-outline"></ion-icon> ห้อง B............. <span class="badge badge-danger">(50)</span>
          </div>
        </div>
        <div class="col-6 col-sm-4">
          <div class="alert alert-info" role="alert">
           <ion-icon name="basket-outline"></ion-icon> ห้อง C............. <span class="badge badge-danger">(33)</span>
          </div>
        </div>
        <div class="col-6 col-sm-4">
          <div class="alert alert-warning" role="alert">
           <ion-icon name="film-outline"></ion-icon> ห้อง D............. <span class="badge badge-danger">(70)</span>
          </div>
        </div>
        <div class="col-6 col-sm-4">
          <div class="alert alert-danger" role="alert">
          <ion-icon name="radio-outline"></ion-icon> ห้อง E............. <span class="badge badge-danger">(70)</span>
          </div>
        </div>
        <div class="col-6 col-sm-4">
          <div class="alert alert-primary" role="alert">
           <ion-icon name="headset-outline"></ion-icon> ห้อง F............. <span class="badge badge-danger">(70)</span>
          </div>
        </div>
      </div>
    </div>
    <!-- end categories -->
    <!-- start last post -->
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-12">
          <div class="alert alert-primary" role="alert">
           <ion-icon name="radio-outline"></ion-icon> กระทู้ล่าสุด......... <span class="badge badge-danger">(รวม 700 กระทู้)</span>
          </div>
        </div>
        <div class="col-12 col-sm-12">
          <table class="table table-striped">
            <thead>
              <tr class="table-danger">
                <th scope="col" width="15%">ว/ด/ป</th>
                <th scope="col" width="70%">ชื่อกระทู้</th>
                <th scope="col" width="5%">ตอบ</th>
                <th scope="col" width="5%">อ่าน</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row"><ion-icon name="today-outline"></ion-icon> 2020/07/30</th>
                <td>Test....................,
                   <ion-icon name="person-outline"></ion-icon> โดย.member
                </td>
                <td>30</td>
                <td>500</td>
              </tr>
              <tr>
                <th scope="row"><ion-icon name="today-outline"></ion-icon> 2020/07/30</th>
                <td>Test....................,
                  <ion-icon name="person-outline"></ion-icon> โดย.member
                </td>
                <td>30</td>
                <td>500</td>
              </tr>
              <tr>
               <th scope="row"><ion-icon name="today-outline"></ion-icon> 2020/07/30</th>
                <td>Test....................,
                  <ion-icon name="person-outline"></ion-icon> โดย.member
                </td>
                <td>30</td>
                <td>500</td>
              </tr>
              <tr>
                <th scope="row"><ion-icon name="today-outline"></ion-icon> 2020/07/30</th>
                <td>Test....................,
                 <ion-icon name="person-outline"></ion-icon> โดย.member
                </td>
                <td>30</td>
                <td>500</td>
              </tr>
              <tr>
               <th scope="row"><ion-icon name="today-outline"></ion-icon> 2020/07/30</th>
                <td>Test....................,
                  <ion-icon name="person-outline"></ion-icon> โดย.member
                </td>
                <td>30</td>
                <td>500</td>
              </tr>
              <tr>
                <th scope="row"><ion-icon name="today-outline"></ion-icon> 2020/07/30</th>
                <td>Test....................,
                   <ion-icon name="person-outline"></ion-icon> โดย.member
                </td>
                <td>30</td>
                <td>500</td>
              </tr>
              <tr>
                <th scope="row"><ion-icon name="today-outline"></ion-icon> 2020/07/30</th>
                <td>Test....................,
                  <ion-icon name="person-outline"></ion-icon> โดย.member
                </td>
                <td>30</td>
                <td>500</td>
              </tr>
              <tr>
                <th scope="row"><ion-icon name="today-outline"></ion-icon> 2020/07/30</th>
                <td>Test....................,
                   <ion-icon name="person-outline"></ion-icon> โดย.member
                </td>
                <td>30</td>
                <td>500</td>
              </tr>
              
            </tbody>
          </table>
          
          <p>
            <nav aria-label="...">
              <ul class="pagination justify-content-end">
                <li class="page-item disabled">
                  <span class="page-link">Previous</span>
                </li>
                <li class="page-item"><a class="page-link" href="#">1</a></li>
                <li class="page-item active" aria-current="page">
                  <span class="page-link">
                    2
                    <span class="sr-only">(current)</span>
                  </span>
                </li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                  <a class="page-link" href="#">Next</a>
                </li>
              </ul>
            </nav>
          </p>
        </div>
      </div>
    </div>
    <!-- start last post -->
    <p align="center"> devbanban.com 2020 </p>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
  </body>
</html>

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

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

<!doctype html>

<head>

<title> My Board 2020 | devbanban.com</title>

</head>

<body>

<a class="navbar-brand" href="#">MyBoard</a>

</button>

<a class="nav-link" href="#">หน้าหลัก <span class="sr-only">(current)</span></a>

</li>

<a class="nav-link" href="#">เกี่ยวกับ</a>

</li>

เลือกห้อง

</a>

</div>

</li>

<a class="nav-link" href="https://devbanban.com/?cat=250">คอร์สออนไลน์</a>

</li>

<a class="nav-link" href="https://devbanban.com/?page_id=2309">สนับสนุน</a>

</li>

<a class="nav-link" href="https://devbanban.com/?p=4425">ระบบพร้อมใช้</a>

</li>

<a class="nav-link" href="https://devbanban.com/?p=4425">Login</a>

</li>

</ul>

<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>

</form>

</div>

</nav>

</div>

<br>

<ion-icon name="grid-outline"></ion-icon> เลือกห้อง

</div>

<ion-icon name="airplane-outline"></ion-icon> ห้อง A............. <span class="badge badge-danger">(20)</span>

</div>

<ion-icon name="aperture-outline"></ion-icon> ห้อง B............. <span class="badge badge-danger">(50)</span>

</div>

<ion-icon name="basket-outline"></ion-icon> ห้อง C............. <span class="badge badge-danger">(33)</span>

</div>

<ion-icon name="film-outline"></ion-icon> ห้อง D............. <span class="badge badge-danger">(70)</span>

</div>

<ion-icon name="radio-outline"></ion-icon> ห้อง E............. <span class="badge badge-danger">(70)</span>

</div>

<ion-icon name="headset-outline"></ion-icon> ห้อง F............. <span class="badge badge-danger">(70)</span>

</div>

<ion-icon name="radio-outline"></ion-icon> กระทู้ล่าสุด......... <span class="badge badge-danger">(รวม 700 กระทู้)</span>

</div>

<thead>

<th scope="col" width="70%">ชื่อกระทู้</th>

</tr>

</thead>

<tbody>

<tr>

<td>Test....................,