รายการ Library ที่เกี่ยวข้องในตัวอย่างนี้
โค้ดตัวอย่างทั้งหมด
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Comments</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<style>
.review_group {
margin-top: 30px;
}
.review_header {
margin-top: 20px;
font-weight: bold;
border-bottom: 1px solid #999;
}
.review_header h3 {
margin: 0;
}
.review_write {
background-color: #6b6a6a;
color: #fff;
height: 2.5em;
padding-top: 0.6em;
padding-left: 0.2em;
font-size: 1.5em;
padding-right: 0.2em;
text-align: center;
border-radius: 5px;
font-weight: 400;
}
.review_item {
margin-top: 1em;
margin-bottom: 1em;
padding: 10px 10px 10px 0;
}
.review_user .icon-username {
position: relative;
display: inline-block;
font-size: 3em;
color: #6b6a6a;
bottom: -10px;
margin-right: 10px;
}
.review_datetime {
text-align: right;
font-size: 12px;
font-weight: 400;
padding-top: 15px;
}
.review-rating {
color: #f0cb2d;
}
.review_item .review_text {
margin: 1em 0 0 0.25em;
}
.review_group .alert.alert-warning {
background-color: #efe7b8;
padding: 30px;
margin-bottom: 30px;
border-radius: 3px;
border: none;
position: relative;
}
.review_text_not_login {
margin-top: 10px;
font-style: italic;
}
.review_group .btn {
margin-top: 20px;
border-color: #75a338;
background: #85ba40;
border: none;
border-radius: 30px;
line-height: 40px;
padding: 0 30px;
}
</style>
</head>
<body>
<div class="review_group container">
<div class="row">
<div class="col-md-10 col-sm-9 col-xs-9 review_header"><h3>FEATURED REVIEWS & RATINGS</h3></div>
<div class="col-md-2 col-sm-3 col-xs-3 review_write"><i class="fa fa-pencil"></i> เขียนรีวิว</div>
</div>
<div class="row review_item">
<div class="col-md-6 col-sm-12 col-xs-12 review_user">
<div class="icon-username">
<i class="fa fa-user-circle"></i>
</div>
สมปอง
<p></p>
<div class="review-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 review_datetime">
1 เดือนที่แล้ว
</div>
<div class="col-md-12 col-sm-12 col-xs-12 review_text">
ข่าวสารดีมากครับ
</div>
</div>
<div class="row review_item">
<div class="col-md-6 col-sm-12 col-xs-12 review_user">
<div class="icon-username">
<i class="fa fa-user-circle"></i>
</div>
สมชาย
<p></p>
<div class="review-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 review_datetime">
1 สัปดาห์ที่แล้ว
</div>
<div class="col-md-12 col-sm-12 col-xs-12 review_text">
อยากได้ข้อมูลมากกว่านี้ สอบถามเพิ่มเติมได้ที่ไหนครับ
</div>
</div>
<div class="row review_item">
<div class="col-md-6 col-sm-12 col-xs-12 review_user">
<div class="icon-username">
<i class="fa fa-user-circle"></i>
</div>
สมหมาย
<p></p>
<div class="review-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 review_datetime">
1 สัปดาห์ที่แล้ว
</div>
<div class="col-md-12 col-sm-12 col-xs-12 review_text">
เห็นด้วยครับ
</div>
</div>
<div id="jshop_review_write" class="review_text_not_login text-center alert alert-warning">
กรุณาเข้าระบบเพื่อเขียนความเห็น
<p>
<a href="#" class="btn btn-primary" role="button" data-toggle="modal" data-target="#login">
ลงทะเบียน / เข้าสู่ระบบ
</a>
</p>
</div>
</div>
</body>
</html>
ตัวอย่างการแสดงผล