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>
声明：
1.本站大部分内容均收集于网络!若内容若侵犯到您的权益，请发送邮件至：ceo@zunw.cn，我们将第一时间处理！
2.资源所需价格并非资源售卖价格，是收集、整理、编辑详情以及本站运营的适当补贴，并且本站不提供任何免费技术支持
3.所有资源仅限于参考和学习，版权归原作者所有，更多请阅读网站声明。
