资讯新闻 Bootstarp 扁平化风格个人/工作室/物品 展示源码
基于Bootstrap 框架 自适应移动端端
预览界面：
预览截图
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>