bootstrap 布局
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.header {
height: 40px;
}
.input-group {
padding-top: 20px;
}
.aside {
/*background-color: #6666BB;*/
padding-top: 20px;
}
.text-small {
margin: 0;
padding: 0;
/*background-color: #8f5902;*/
}
</style>
</head>
<body>
<div class="container ">
<div class="row">
<div class="row header">
<div class="col-md-3">
<img src="logo.jpg" width="200" alt="">
</div>
<div class="col-md-6 col-md-offset-3 form-group">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
<input type="text" class="form-control" id="search" placeholder="搜索......"
onfocus="this.placeholder=''" onblur="this.placeholder='搜索......'">
<span class="input-group-btn">
<button class="btn btn-success">搜索</button>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs ">
<li><a href="#">首页</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">bootstrap</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-md-12 aside">
<div class="col-md-3">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
关于我
</h3>
</div>
<div class="panel-body">内容</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
学习记录
</h3>
</div>
<div class="panel-body">
<ul class="nav nav-tabs nav-stacked">
<li class="nav-tabs"><a href="">第一天</a></li>
<li class="nav-tabs"><a href="">第二天</a></li>
<li class="nav-tabs"><a href="">第三天</a></li>
<li class="nav-tabs"><a href="">第四天</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
<ul style="list-style: none">
<li>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
<a href="">HTML的相关文章或者列表</a>
</h3>
</div>
<div class="panel-body">
内容
<hr>
<div class="col-md-6 text-small">
<div class="col-md-3 text-small">
<a href="">
<span class="glyphicon glyphicon-calendar "></span>
<small>
<em>2017.12.23</em>
</small>
</a>
</div>
<div class="col-md-3 text-small"><a href="">
<span class="glyphicon glyphicon-comment"></span>
<small>
<em>3</em>条评论
</small>
</a></div>
<div class="col-md-3 text-small"><a href="">
<span class="glyphicon glyphicon-eye-open"></span>
<small>
<em>144</em>次阅读
</small>
</a></div>
<div class="col-md-3 text-small"><a href="">
<span class="glyphicon glyphicon-thumbs-up"></span>
<small>
<em>123</em>次点赞
</small>
</a></div>
</div>
<div class="col-md-2 col-md-offset-4">
<a href="">
<small>阅读全文</small>
<span class="glyphicon glyphicon-chevron-right "></span>
</a>
</div>
</div>
</div>
</li>
<li>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
<a href="">JavaScript的相关文章或者列表</a>
</h3>
</div>
<div class="panel-body">内容</div>
</div>
</li>
<li>
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
<a href="">jQuery的相关文章或者列表</a>
</h3>
</div>
<div class="panel-body">
内容
<hr>
<div class="col-md-2 text-small">
<a href="">
<span class="glyphicon glyphicon-calendar "></span>
<small>
<em>2017.12.23</em>
</small>
</a>
</div>
<div class="col-md-2 text-small">
<a href="">
<span class="glyphicon glyphicon-comment"></span>
<small>
<em>3</em>条评论
</small>
</a>
</div>
<div class="col-md-2 text-small">
<a href="">
<span class="glyphicon glyphicon-eye-open"></span>
<small>
<em>144</em>次阅读
</small>
</a>
</div>
<div class="col-md-2 text-small">
<a href="">
<span class="glyphicon glyphicon-thumbs-up"></span>
<small>
<em>123</em>次点赞
</small>
</a>
</div>
<div class="col-md-2 col-md-offset-2">
<a href="">
<small>阅读全文</small>
<span class="glyphicon glyphicon-chevron-right "></span>
</a>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>input中的placeholder在chorome中获取焦点后不消失，只有输入字符后才消失，所以加了简单的javascript代码来实现
<input type="text" class="form-control" id="search" placeholder="搜索......" onfocus="this.placeholder=''" onblur="this.placeholder='搜索......'">
input搜索框前面的图标之所以用了两个span，是为了对齐后面的input输入框。
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
LOGO时随便找的
HTML的相关文章或者列表下的日期评论跟jQuery下面的日期评论用了两种嵌套方法
感兴趣的可以自己把代码复制运行下
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
