<head th:fragment="header">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>bootdo面向学习型的开源框架</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/blog/clean-blog.css" rel="stylesheet">
<link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
	@media (max-width:768px){
		.side{ display:none;  }
		}
	@media (min-width:768px){
		.side{ display:block;  }
		}
	.side{
		position: fixed;
	    width: 50px;
	    right: 5%;
	    bottom: 15%;
	    z-index: 100;
	}
	.side ul{
		list-style:none;
	}
	.side ul li {
	    width: 35px;
	    height: 35px;
	    float: left;
	    position: relative;
	    margin-top: 9px;
	}
	.side ul li .qqbdimg {
	    padding: 7px;
	    margin-top: 5px;
	    margin-bottom: 1px;
	    /* margin-left: 22px; */
	    position: absolute;
	    width: 53px;
	    height: 54px;
	    /* margin-left: 9px; */
	    bottom: 0;
	    right: -7px;
	    transition: all 0.3s;
	    background: #fff;
	    opacity: 0;
	    filter: Alpha(opacity=80);
	    color: #fff;
	    font: 14px/54px "微软雅黑";
	    overflow: hidden;
	}
	.side ul li .qqbdimg:hover{
		overflow:hidden;
		padding: 7px;
	    margin-top: 5px;
	    width:124px;
	    height:124px;
	    opacity:1;
	    z-index:100;
	    right:0;
	    background:rgb(142, 142, 142);
	}
	.side ul li img {
	    width: 100%;
	    height: 100%;
	}
	.side ul li .sidetop {
	    height: 100%;
	    display: block;
	    background: #2f4050;
	    padding: 2px 0px;
	    text-align: center;
	    color: #fff;
	    border-radius: 50%;
	    opacity: .5;
	}
</style>
</head>
<nav th:fragment="nav">
	<div class="container">
		<div class="navbar-header page-scroll">
			<button type="button" class="navbar-toggle" 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>
			<a class="navbar-brand" href="/" style="font-size: 24px;">BootDo</a>
		</div>
		<div class="collapse navbar-collapse"
			id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav navbar-right">
				<li><a href="/">主页</a></li>
				<li><a href="/blog/open/page/about">关于</a></li>
				<li><a href="/blog/open/page/communication">交流</a></li>
				<li><a href="/login">登录</a></li>
			</ul>
		</div>
	</div>
</nav>
<div th:fragment="footer">
	<footer>
		<div class="container">
			<div class="row">
				<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
					<ul class="list-inline text-center">
						<li><a href="https://jq.qq.com/?_wv=1027&k=5ICuFaQ"> <span
								class="fa-stack fa-lg"> <i
									class="fa fa-circle fa-stack-2x"></i> <i
									class="fa fa-qq fa-stack-1x fa-inverse"></i>
							</span>
						</a></li>
						<li><a href="https://www.oschina.net/p/bootdo"> <span
								class="fa-stack fa-lg"> <i
									class="fa fa-circle fa-stack-2x"></i> <i
									class="fa fa-home fa-stack-1x fa-inverse"></i>
							</span>
						</a></li>
						<li><a href="https://github.com/lcg0124/bootdo.git"> <span
								class="fa-stack fa-lg"> <i
									class="fa fa-circle fa-stack-2x"></i> <i
									class="fa fa-github fa-stack-1x fa-inverse"></i>
							</span>
						</a></li>
					</ul>
					<p class="copyright text-muted">Copyright &copy; bootdo.com
						2017</p>
					<p class="copyright text-muted">鲁ICP备17042918号</p>

				</div>
			</div>
		</div>
	</footer>
	<div class="side" >
		<ul>
			<li>
				<div class="qqbdimg">
					<img src="/img/blog/qqbootdo.png" title="学习交流"/>
				</div>
				<a class="sidetop" id="qqbd" href="javascript:scroll(0,0)" title="学习交流"><i
					class="fa fa-qq"></i></a>
			</li>
			<li>
				<a class="sidetop" href="javascript:scroll(0,0)" title="返回顶部"><i
					class="fa fa-arrow-up"></i></a>
					
			</li>
		</ul>
	</div>
	<script src="/js/jquery.min.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/plugins/layer/layer.js"></script>
	<script src="/js/ajax-util.js"></script>
	<script src="/js/appjs/blog/clean-blog.min.js"></script>
	<script src="/js/plugins/summernote/summernote.min.js"></script>
	<script src="/js/plugins/summernote/summernote-zh-CN.js"></script>
</div>

