演示网站 8种bootstrap样式代码
编写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap-4 Elements Pack</title>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Fontawesome CSS -->
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- Style CSS -->
<link rel="stylesheet" href="assets/css/member.css">
</head>
<body>
<!--====================================
= member style 1 =
=====================================-->
<section class="section member-1">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="section-heading text-center">Member Style1</h2>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-1__column">
<figure>
<img src="assets/images/member-1.png" class="img-fluid" alt="image">
</figure>
<div class="member-1__content text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
<ul class="list-unstyled text-center m-0">
<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-1__column">
<figure>
<img src="assets/images/member-2.png" class="img-fluid" alt="image">
</figure>
<div class="member-1__content text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
<ul class="list-unstyled text-center m-0">
<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-1__column">
<figure>
<img src="assets/images/member-3.png" class="img-fluid" alt="image">
</figure>
<div class="member-1__content text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
<ul class="list-unstyled text-center m-0">
<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==== End of member style 1 ====-->
<!--====================================
= member style 2 =
=====================================-->
<section class="section member-2 bg-color">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="section-heading text-center">Member Style2</h2>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-2__column">
<figure class="m-0">
<img src="assets/images/member-4.png" class="img-fluid" alt="image">
</figure>
<div class="member-2__content d-flex">
<ul class="list-unstyled text-center m-0 d-flex flex-column">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="member-2__designation d-flex justify-content-end flex-column">
<h3>John Doe</h3>
<p>Web Designer</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-2__column">
<figure class="m-0">
<img src="assets/images/member-5.png" class="img-fluid" alt="image">
</figure>
<div class="member-2__content d-flex">
<ul class="list-unstyled text-center m-0 d-flex flex-column">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="member-2__designation d-flex justify-content-end flex-column">
<h3>John Doe</h3>
<p>Web Designer</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-2__column">
<figure class="m-0">
<img src="assets/images/member-7.png" class="img-fluid" alt="image">
</figure>
<div class="member-2__content d-flex">
<ul class="list-unstyled text-center m-0 d-flex flex-column">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="member-2__designation d-flex justify-content-end flex-column">
<h3>John Doe</h3>
<p>Web Designer</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==== End of member style 2 ====-->
<!--====================================
= member style 3 =
=====================================-->
<section class="section member-3">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="section-heading text-center">Member Style3</h2>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-3__column">
<figure class="m-0">
<img src="assets/images/member-4.png" class="img-fluid" alt="image">
</figure>
<div class="member-3__content d-flex">
<ul class="list-unstyled text-center m-0 d-flex flex-column">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="member-3__designation d-flex justify-content-start text-left flex-column">
<h3>John Doe</h3>
<p>Web Designer</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-3__column">
<figure class="m-0">
<img src="assets/images/member-5.png" class="img-fluid" alt="image">
</figure>
<div class="member-3__content d-flex">
<ul class="list-unstyled text-center m-0 d-flex flex-column">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="member-3__designation d-flex justify-content-start text-left flex-column">
<h3>John Doe</h3>
<p>Web Designer</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-3__column">
<figure class="m-0">
<img src="assets/images/member-2.png" class="img-fluid" alt="image">
</figure>
<div class="member-3__content d-flex">
<ul class="list-unstyled text-center m-0 d-flex flex-column">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="member-3__designation d-flex justify-content-start text-left flex-column">
<h3>John Doe</h3>
<p>Web Designer</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==== End of member style 3 ====-->
<!--====================================
= member style 3 =
=====================================-->
<section class="section member-4 bg-color">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="section-heading text-center">Member Style4</h2>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-4__column">
<figure class="m-0">
<img src="assets/images/member-4.png" class="img-fluid" alt="image">
</figure>
<div class="member-4__content d-flex">
<ul class="list-unstyled text-center m-0 d-flex flex-column">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="member-4__designation text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-4__column">
<figure class="m-0">
<img src="assets/images/member-5.png" class="img-fluid" alt="image">
</figure>
<div class="member-4__content d-flex">
<ul class="list-unstyled text-center m-0 d-flex flex-column">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="member-4__designation text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-4__column">
<figure class="m-0">
<img src="assets/images/member-2.png" class="img-fluid" alt="image">
</figure>
<div class="member-4__content d-flex">
<ul class="list-unstyled text-center m-0 d-flex flex-column">
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
<div class="member-4__designation text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==== End of member style 4 ====-->
<!--====================================
= member style 5 =
=====================================-->
<section class="section member-5">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="section-heading text-center">Member Style5</h2>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-5__column">
<figure class="m-0">
<img src="assets/images/member-4.png" class="img-fluid" alt="image">
</figure>
<div class="member-5__content text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
<ul class="list-unstyled text-center m-0">
<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-5__column">
<figure class="m-0">
<img src="assets/images/member-5.png" class="img-fluid" alt="image">
</figure>
<div class="member-5__content text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
<ul class="list-unstyled text-center m-0">
<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-5__column">
<figure class="m-0">
<img src="assets/images/member-2.png" class="img-fluid" alt="image">
</figure>
<div class="member-5__content text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
<ul class="list-unstyled text-center m-0">
<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==== End of member style 5 ====-->
<!--====================================
= member style 6 =
=====================================-->
<section class="section member-6 bg-color">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="section-heading text-center">Member Style6</h2>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-6__column">
<figure class="m-0">
<img src="assets/images/member-4.png" class="img-fluid" alt="image">
</figure>
<div class="member-6__content text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
<ul class="list-unstyled text-center m-0">
<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-6__column">
<figure class="m-0">
<img src="assets/images/member-5.png" class="img-fluid" alt="image">
</figure>
<div class="member-6__content text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
<ul class="list-unstyled text-center m-0">
<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-6__column">
<figure class="m-0">
<img src="assets/images/member-2.png" class="img-fluid" alt="image">
</figure>
<div class="member-6__content text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
<ul class="list-unstyled text-center m-0">
<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==== End of member style 6 ====-->
<!--====================================
= member style 7 =
=====================================-->
<section class="section member-7">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="section-heading text-center">Member Style7</h2>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-7__column">
<span class="border-left-right"></span>
<figure class="m-0">
<img src="assets/images/member-4.png" class="img-fluid" alt="image">
</figure>
<div class="member-7__content text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
<ul class="list-unstyled text-center m-0">
<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-7__column">
<span class="border-left-right"></span>
<figure class="m-0">
<img src="assets/images/member-5.png" class="img-fluid" alt="image">
</figure>
<div class="member-7__content text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
<ul class="list-unstyled text-center m-0">
<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-7__column">
<span class="border-left-right"></span>
<figure class="m-0">
<img src="assets/images/member-2.png" class="img-fluid" alt="image">
</figure>
<div class="member-7__content text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
<ul class="list-unstyled text-center m-0">
<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==== End of member style 7 ====-->
<!--====================================
= member style 8 =
=====================================-->
<section class="section member-8 bg-color">
<div class="container">
<div class="row">
<div class="col-12">
<h2 class="section-heading text-center">Member Style8</h2>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-8__column">
<figure class="m-0">
<img src="assets/images/member-4.png" class="img-fluid" alt="image">
</figure>
<div class="member-8__content text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
<ul class="list-unstyled text-center m-0">
<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-8__column">
<figure class="m-0">
<img src="assets/images/member-5.png" class="img-fluid" alt="image">
</figure>
<div class="member-8__content text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
<ul class="list-unstyled text-center m-0">
<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 mt-5">
<div class="member-8__column">
<figure class="m-0">
<img src="assets/images/member-2.png" class="img-fluid" alt="image">
</figure>
<div class="member-8__content text-center">
<h3>John Doe</h3>
<p>Web Designer</p>
<ul class="list-unstyled text-center m-0">
<li class="list-inline-item"><a href="#"><i class="fa fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fa fa-linkedin"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<!--==== End of member style 6 ====-->
<!--JQuery-->
<script src="assets/js/jqyery.js"></script>
<!--Bootstrap js-->
<script src="assets/js/bootstrap.min.js"></script>
<!-- custom js -->
<script src="assets/js/custom.js"></script>
<script>
$('[data-toggle="elementscroll"]').on("click", function (event) {
if (this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800);
}
});
/*End Smooth scroll*/
</script>
<!--这行代码可以删除-->
<a style="display:none" href="https://www.smareoweoum.cn/">建站网</a>
</body>
</html>
注册免费下载
抱歉，隐藏内容须成功 评论本文 后刷新可见！
