文章目录
美食博客
作品文件
home页面效果
home页面相关代码
<div class="container">
<div class="banner-body-content">
<div class="col-xs-3 banner-body-left">
<div class="logo">
<h1><a href="index.html">Great <span>Taste</span></a></h1>
</div>
<div class="top-nav">
<nav class="navbar navbar-default">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
<nav class="stroke">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html"><i class="home"></i>Home</a></li>
<li><a href="photos.html" class="hvr-underline-from-left"><i class="picture1"></i>Photos</a></li>
<li><a href="blog.html" class="hvr-underline-from-left"><i class="edit1"></i>Blog</a></li>
<li><a href="short-codes.html" class="hvr-underline-from-left"><i class="text-size1"></i>Short Codes</a></li>
<li><a href="mail.html" class="hvr-underline-from-left"><i class="envelope1"></i>Mail US</a></li>
</ul>
</nav>
</div>
</nav>
</div>
</div>
photo页面效果
photo页面相关代码
<div class="latest-news">
<h2>Latest News</h2>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Michael Vol
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Andrew Rich
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Rita Rock
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry.
</div>
</div>
</div>
</div>
<div class="join">
<a href="single.html">Learn More</a>
</div>
<h3>Benefits</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
blog页面效果
blog页面相关代码
<div class="col-xs-9 banner-body-right">
<div class="gallery-head">
<h5>Blog</h5>
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born.</p>
</div>
<div class="blog">
<div class="blog-grid">
<div class="col-xs-4 blog-grid-left">
<a href="single.html"><img src="images/1.jpg" alt=" " class="img-responsive" /></a>
</div>
<div class="col-xs-8 blog-grid-right">
<h4><a href="single.html">sint occaecat cupidatat non proident</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation.</p>
<a href="single.html"><span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span></a>
</div>
<div class="clearfix"> </div>
</div>
<div class="blog-grid">
<div class="col-xs-4 blog-grid-left">
<a href="single.html"><img src="images/2.jpg" alt=" " class="img-responsive" /></a>
</div>
<div class="col-xs-8 blog-grid-right">
<h4><a href="single.html">Sed ut perspiciatis unde omnis iste natus</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation.</p>
<a href="single.html"><span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span></a>
</div>
<div class="clearfix"> </div>
</div>
<div class="blog-grid">
<div class="col-xs-4 blog-grid-left">
<a href="single.html"><img src="images/3.jpg" alt=" " class="img-responsive" /></a>
</div>
<div class="col-xs-8 blog-grid-right">
<h4><a href="single.html">At vero eos et accusamus et iusto odio</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation.</p>
<a href="single.html"><span class="glyphicon glyphicon-play-circle" aria-hidden="true"></span></a>
</div>
<div class="clearfix"> </div>
</div>
</div>
short codes页面效果
short codes页面相关代码
<div class="grid_3 grid_5">
<h3>Buttons</h3>
<h1>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h1>
<h2>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h2>
<h3>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h3>
<h4>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h4>
<h5>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h5>
<h6>
<a href="#"><span class="label label-default">Default</span></a>
<a href="#"><span class="label label-primary">Primary</span></a>
<a href="#"><span class="label label-success">Success</span></a>
<a href="#"><span class="label label-info">Info</span></a>
<a href="#"><span class="label label-warning">Warning</span></a>
<a href="#"><span class="label label-danger">Danger</span></a>
</h6>
</div>
mail页面效果
mail页面相关代码
<div class="mail">
<div class="mail-grid1">
<h3>Contact <span>Info</span></h3>
<p>Voluptatem accusantium doloremque laudantium.</p>
<ul>
<li><i class="glyphicon glyphicon-earphone" aria-hidden="true"></i>Phone<span>+8 (213) 746 820 82</span></li>
<li><i class="glyphicon glyphicon-envelope" aria-hidden="true"></i>Email<a href="mailto:[email protected]">[email protected]</a></li>
</ul>
<ul>
<li><i class="glyphicon glyphicon-map-marker" aria-hidden="true"></i>Address<span>PO Box 7784 Diamonds street, Los Angeles, California, US.</span></li>
</ul>
</div>
<div class="mail-grid1">
<h3>Send a <span>Message</span></h3>
<p>Voluptatem accusantium doloremque laudantium.</p>
<form>
<input type="text" placeholder="Name" required=" ">
<input type="email" placeholder="Email" required=" ">
<div class="clearfix"> </div>
<input type="text" placeholder="Subject" required=" ">
<textarea placeholder="Type Your Text Here...." required=" "></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
ps：由于篇幅较大无法全部展示，可关注微信公众号《月光作笺Y》获取源代码。该作品仅供学习参考
