ฟรี เทมเพลตเว็บขายเครื่องสำอางค์ ออกแบบจาก Bootstrap v5.2 (Responsive Web Design)

สวัสดีครับ ในบทความนี้จะแจกเทมเพลตเว็บขายเครื่องสำอางค์ ออกแบบจาก Bootstrap v5.2 รองรับการใช้งานบน desktop & Mobile (Responsive Web) สำหรับเอาไปศึกษาและพัฒนาต่อยอดครับ

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

Class หลักๆ ที่ใช้
– container
– Grid
– Alert
– Card
– btn
– navbar
– อื่นๆ เอาไปต่อยอดได้เต็มที่

คลิปแสดงการทำงาน

โครงสร้างไฟล์และโฟลเดอร์
web/
– index.html
img/
– banner.jpg
– product.jpg

Full Code index.html *มีไฟล์ภาพด้านล่าง

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>เทมเพลตเว็บขายเครื่องสำอางค์ ออกแบบโดย devbanban.com 2022</title>
    <meta content="เทมเพลตเว็บขายเครื่องสำอางค์ ออกแบบโดย devbanban.com 2022" name="keywords">
    <meta content="เทมเพลตเว็บขายเครื่องสำอางค์ ออกแบบโดย devbanban.com 2022" name="description">
    <meta property="og:site_name" content="เทมเพลตเว็บขายเครื่องสำอางค์ ออกแบบโดย devbanban.com 2022">
    <meta property="og:title" content="เทมเพลตเว็บขายเครื่องสำอางค์ ออกแบบโดย devbanban.com 2022" />
    <meta property="og:description" content="เทมเพลตเว็บขายเครื่องสำอางค์ ออกแบบโดย devbanban.com 2022" />
    <meta property="og:image" itemprop="image" content="img/product.jpg">
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="เทมเพลตเว็บขายเครื่องสำอางค์ ออกแบบโดย devbanban.com 2022" />
    <meta name="twitter:description" content="เทมเพลตเว็บขายเครื่องสำอางค์ ออกแบบโดย devbanban.com 2022" />
    <meta name="twitter:image" content="img/product.jpg" />
    <!-- designed by devbanban.com Oct. 2022 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <style>
    .card-bottom-margin{
      margin-top: 10px;
      margin-bottom: 10px;
    }
    
    </style>
  </head>
  <body>
    <!-- start navbar -->
    <div class="container">
      <div class="row">
        <div class="col">
          <nav class="navbar navbar-expand-lg  fixed-top" style="background-color: #61e8c9;">
            <div class="container">
              <a class="navbar-brand" href="https://devbanban.com/?p=4425">Cosmetics</a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-lg-0">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="https://devbanban.com/?p=2867">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://devbanban.com/?p=4425">About</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://devbanban.com/?p=4425">Payment</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://devbanban.com/?p=4425">Contact</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="https://devbanban.com/?p=4425">สั่งซื้อ</a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="https://devbanban.com/?p=4425" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Dropdown
                    </a>
                    <ul class="dropdown-menu">
                      <li><a class="dropdown-item" href="https://devbanban.com/?p=4425">Action</a></li>
                      <li><a class="dropdown-item" href="https://devbanban.com/?p=4425">Another action</a></li>
                      <li><hr class="dropdown-divider"></li>
                      <li><a class="dropdown-item" href="https://devbanban.com/?p=4425">Something else here</a></li>
                    </ul>
                  </li>
                </ul>
                <form class="d-flex" role="search">
                  <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                  <button class="btn btn-outline-success" type="submit">Search</button>
                </form>
              </div>
            </div>
          </nav>
        </div>
      </div>
    </div>
    <!-- end navbar -->
    <!-- start banner -->
    <div class="container" style="margin-top: 60px;">
      <div class="row">
        <div class="col">
          <img src="img/banner.jpg" class="img-fluid">
        </div>
      </div>
    </div>
    <!-- end banner -->
    <!-- start alert info or tab -->
    <div class="container d-none d-sm-block">
      <div class="row">
        <div class="col">
          <div class="alert alert-info" role="alert">
            รายการสินค้า
          </div>
        </div>
      </div>
    </div>
    <!-- end alert info -->
    <!-- start alert info or tab -->
    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-4 col-md-3 card-bottom-margin">
          <div class="card" style="width: 100%;">
            <img src="img/product.jpg" class="card-img-top" alt="desiged by devbanban.com 2022">
            <div class="card-body">
              <h5 class="card-title">Product title</h5>
              <p class="card-text">Some quick example text to build on the card title.</p>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-info">more detail</a>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-danger">Add to Cart</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-4 col-md-3 card-bottom-margin">
          <div class="card" style="width: 100%;">
            <img src="img/product.jpg" class="card-img-top" alt="desiged by devbanban.com 2022">
            <div class="card-body">
              <h5 class="card-title">Product title</h5>
              <p class="card-text">Some quick example text to build on the card title.</p>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-info">more detail</a>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-danger">Add to Cart</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-4 col-md-3 card-bottom-margin">
          <div class="card" style="width: 100%;">
            <img src="img/product.jpg" class="card-img-top" alt="desiged by devbanban.com 2022">
            <div class="card-body">
              <h5 class="card-title">Product title</h5>
              <p class="card-text">Some quick example text to build on the card title.</p>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-info">more detail</a>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-danger">Add to Cart</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-4 col-md-3 card-bottom-margin">
          <div class="card" style="width: 100%;">
            <img src="img/product.jpg" class="card-img-top" alt="desiged by devbanban.com 2022">
            <div class="card-body">
              <h5 class="card-title">Product title</h5>
              <p class="card-text">Some quick example text to build on the card title.</p>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-info">more detail</a>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-danger">Add to Cart</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-4 col-md-3 card-bottom-margin">
          <div class="card" style="width: 100%;">
            <img src="img/product.jpg" class="card-img-top" alt="desiged by devbanban.com 2022">
            <div class="card-body">
              <h5 class="card-title">Product title</h5>
              <p class="card-text">Some quick example text to build on the card title.</p>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-info">more detail</a>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-danger">Add to Cart</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-4 col-md-3 card-bottom-margin">
          <div class="card" style="width: 100%;">
            <img src="img/product.jpg" class="card-img-top" alt="desiged by devbanban.com 2022">
            <div class="card-body">
              <h5 class="card-title">Product title</h5>
              <p class="card-text">Some quick example text to build on the card title.</p>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-info">more detail</a>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-danger">Add to Cart</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-4 col-md-3 card-bottom-margin">
          <div class="card" style="width: 100%;">
            <img src="img/product.jpg" class="card-img-top" alt="desiged by devbanban.com 2022">
            <div class="card-body">
              <h5 class="card-title">Product title</h5>
              <p class="card-text">Some quick example text to build on the card title.</p>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-info">more detail</a>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-danger">Add to Cart</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm-4 col-md-3 card-bottom-margin">
          <div class="card" style="width: 100%;">
            <img src="img/product.jpg" class="card-img-top" alt="desiged by devbanban.com 2022">
            <div class="card-body">
              <h5 class="card-title">Product title</h5>
              <p class="card-text">Some quick example text to build on the card title.</p>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-info">more detail</a>
              <a href="https://devbanban.com/?p=4425" class="btn btn-outline-danger">Add to Cart</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- end alert info -->

     <!-- start footer -->
    <div class="container" style="margin-bottom: 50px; margin-top: 50px;">
      <div class="row">
        <div class="col-4">
           <ol>
             <li>Link</li>
             <li>Link</li>
             <li>Link</li>
             <li>Link</li>
           </ol>
        </div>
        <div class="col-4 ">
           <ol>
             <li>Link</li>
             <li>Link</li>
             <li>Link</li>
             <li>Link</li>
           </ol>
        </div>
        <div class="col-4 d-none d-sm-block">
           ติดต่อ <br>
           Website : https://devbanban.com <br>
           FanPage : https://www.facebook.com/sornwebsites <br>
           Mobile : 094 861 6709 <br>
        </div>
        <div class="col-12">
          <p align="center" class="d-block d-sm-none" style="margin-top: 20px; color: red;">  
            ติดต่อ : <br> 
           Website : https://devbanban.com  <br> 
           FanPage : https://www.facebook.com/sornwebsites  <br> 
           Mobile : 094 861 6709 </p>


          <p align="center" style="margin-top: 20px; color: red;"> designed by devbanban.com Oct. 2022</p>
          
      </div>
    </div>
    <!-- end footer -->
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
  </body>
</html>
<!--
note
- designed by devbanban.com Oct. 2022
- ภาพประกอบจาก https://www.freepik.com/
- คอร์สออนไลน์ https://devbanban.com/?p=2867
- ระบบพร้อมใช้  https://devbanban.com/?p=4425
- ระบบอีคอมเมิร์ช https://www.youtube.com/watch?v=kjv3orrbdTk
-->

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

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

<!doctype html>

<head>

<title>เทมเพลตเว็บขายเครื่องสำอางค์ ออกแบบโดย devbanban.com 2022</title>

<style>

.card-bottom-margin{

margin-top: 10px;

margin-bottom: 10px;

}

</style>

</head>

<body>

<a class="navbar-brand" href="https://devbanban.com/?p=4425">Cosmetics</a>

</button>

</li>

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

</li>

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

</li>

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

</li>

</li>

Dropdown

</a>

<li><a class="dropdown-item" href="https://devbanban.com/?p=4425">Action</a></li>

<li><a class="dropdown-item" href="https://devbanban.com/?p=4425">Another action</a></li>

<li><a class="dropdown-item" href="https://devbanban.com/?p=4425">Something else here</a></li>

</ul>

</li>

</ul>

<button class="btn btn-outline-success" type="submit">Search</button>

</form>

</div>

</nav>

</div>

</div>

รายการสินค้า

</div>

<h5 class="card-title">Product title</h5>

<p class="card-text">Some quick example text to build on the card title.</p>