Bootstarp 扁平化风格个人/工作室/物品 展示源码

Bootstarp 扁平化风格个人/工作室/物品 展示源码

基于Bootstrap 框架 自适应移动端端

预览界面:

枫瑞UI扁平化风格个人/工作室/物品 展示

预览截图
Bootstarp 扁平化风格个人/工作室/物品 展示源码
index.html 源码:

js和css可以引用Bootstrap cnd方式接入


<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>UI 2</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<!--jq最先引入 防止报错-->
		<script src="js/jquery.slim.min.js"></script>
		<!--最后引入bootstrap-->
		<script src="js/bootstrap.min.js"></script>
		<script src="js/popper.min.js"></script>
		<style>
			.carousel-caption {
				bottom: 130px;
			}
			
			html,body{width:100%;height:100%} 
			textarea {height: 200px;}
			@media screen and (max-width: 768px) {
				.towzjdiv {
					display: none;
				}
				.form-control{width: 100%;}
				.towyc{display: none;}
				.con-top{margin-top: 5px;}
				.w-100{height: 150px;}
				.towdibuimg{margin-left: 1em;width: 3em;}
				.ydimg{margin-top: 60px;}
			}
		</style>
	</head>

	<body>
		<!--导航栏-->
		<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top" role="navigation">
			<a class="navbar-brand" href="#">Navbar w/ text</a>
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
			<div class="collapse navbar-collapse " id="navbarText">
				<ul class="navbar-nav mr-auto">
					<li class="nav-item active">
						<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#about">about</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#img">Img</a>
					</li>
					<li class="nav-item">
						<a class="nav-link" href="#contact">contact</a>
					</li>
				</ul>
			</div>
		</nav>
		<!--头部图片-->
		<div id="carouselExampleSlidesOnly home" class="carousel slide ydimg" data-ride="carousel">
			<div class="carousel-inner ">
				<div class="carousel-item active">
					<img class="d-block w-100" src="img/towimg.jpg" alt="First slide">
					<div class="carousel-caption d-none d-md-block" style="margin-top: -50px;">
						<h1>May I introduce myself?</h1>
						<hr color="#FFFFFF" width="40%">
						<p>Frontend Design UI Design</p>
					</div>
				</div>
			</div>
			<!--中间DIV-->
			<div class="towzjdiv">
				<div class="towzjdiv1">
					<center>
						<div style="color: #FFFFFF;font-size:2em;">BY:yinfengrui</div>
					</center>
				</div>
			</div>
		</div>
		<!--about-->
		<div  class="container towtop ">
			<!-- cardContent here -->
			<div id="about" class="card tyjuzhon">
				<div class="card-header">
					Quote
				</div>
				<div class="card-body">
					<blockquote class="blockquote mb-0">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
						<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
					</blockquote>
				</div>
			</div>
			<!--中间3个卡片-->
			<div class="container towtop">
			<div class="row">
				<div class="col-md-4" >
					<div class="card border-info mb-3 ">
					  <div class="card-header">Header</div>
					  <div class="card-body text-info">
					    <h5 class="card-title">Info card title</h5>
					    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
					  </div>
					</div>
				</div>
				<div class="col-md-4" >
					<div class="card border-primary mb-3">
					  <div class="card-header">Header</div>
					  <div class="card-body text-primary">
					    <h5 class="card-title">Primary card title</h5>
					    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
					  </div>
					</div>
				</div>
				<div class="col-md-4" >
					<div class="card border-success mb-3">
					  <div class="card-header">Header</div>
					  <div class="card-body text-success">
					    <h5 class="card-title">Success card title</h5>
					    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
					  </div>
					</div>
				</div>
			</div>
			<!--图片组-->
			<div id="img" class="container towtop">
				<h2>My Love Img</h2>
				<hr>
				<p> This Is Md Fuck</p>
				<div class="row">
					<div class="col-md-6" >
						<div class="card">
						  <img class="card-img-top" src="img/towimg1.png" alt="Card image cap">
						</div>
						<div class="card con-top">
						  <img class="card-img-top" src="img/towimg2.png" alt="Card image cap">
						</div>
					</div>
					<div class="col-md-6" >
						<div class="card" style="">
						  <img class="card-img-top" src="img/towimg3.png" alt="Card image cap">
						</div>
						<div class="card con-top">
						  <img class="card-img-top" src="img/towimg4.png" alt="Card image cap">
						</div>
					</div>
				</div>
			</div>
			<center><button type="button" class="btn btn-outline-success towwd">More </button></center>
			<!--联系头部-->
			<div class="con-top">
				<h2>Contact Me</h2>
				<hr>
				<p>The men don't do it</p>
			</div>
			<!--联系名字 地址 邮件 内容-->
			<div id="contact" class="container">
				<div class="row">
					<div class="col-md-6 con-top" > 
						<div class="input-group-prepend fele towyc">
						  <span class="input-group-text" id="basic-addon1">@</span>
						</div>
						<input type="text" class="form-control fele" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
					</div>
					<div class="col-md-6 con-top" >
						<input type="text" class="form-control fele" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
						<div class="input-group-append towyc">
						    <span class="input-group-text ri" id="basic-addon2">@example.com</span>
						</div>
					</div>
				</div>
				<div class="input-group con-top">
				  <div class="input-group-prepend towyc">
				    <span class="input-group-text">With textarea</span>
				  </div>
				  <textarea class="form-control" aria-label="With textarea" placeholder="With textarea"></textarea>
				</div>
			</div>	
		</div>
		</div>
		<!--网站底部-->
		<div class="towdibu">
			<div class="tyjuzhon towdibupa">
				<img class="towdibuimg" src="img/facebook3.png"  />
				<img class="towdibuimg" src="img/GitHub.png" />
				<img class="towdibuimg" src="img/twitter.png"/>
				<p class="towdibubanquan">COPYRIGHT 2018 yinfengrui UI设计</p>
			</div>
			<div >
				
			</div>
		</div>
	</body>
	<script  type="text/javascript">
		alert('展示版 Bootstrap UI Tow Bate0.1 \n \n \n【响应式网站更多样式请访问PC端】\n \n  1.代修复 导航栏渐变   \n \n 2.待添加 返回顶部按钮');

//      $(window).scroll(function () {
//          if ($(".navbar").offset().top > 50) {$(".navbar-fixed-top").addClass("top-nav");
//          }else {$(".navbar-fixed-top").removeClass("top-nav");}
//      })
	</script>
</SCRIPT> 
</html>

 

0
分享到:
掉头发中!小程序慢更新
没有账号? 忘记密码?
var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?18b345cf548f88d90a655d9ce1fa4140"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();