用bootStrap开发一个index首页

最新推荐文章于 2023-12-12 00:53:03 发布
最新推荐文章于 2023-12-12 00:53:03 发布
阅读量2.1k 收藏 12
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41049260/article/details/90411522
版权

利用bootStrap的栅格系统给Blog首页开发一个首页的功能
数据有序的放入div中利用后台的交互用EL表达式取来放入其中

代码布局
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>博客首页</title>
<style text/css>
   body{
      padding-top:10px;
      padding-bottom:40px;
   }
</style>
</head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap3/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/bootstrap3/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/blog.css">
<script src="${pageContext.request.contextPath}/static/bootstrap3/js/jquery-1.11.2.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap3/js/bootstrap.min.js"></script>
<body>
  <div class="container">
		<div class="row" >
			<div class="col-md-4">
			   <img alt="开源博客系统" src="${pageContext.request.contextPath }/static/images/logo.png">
			</div>
			<div class="col-md-8">
			<iframe style="float: right;" width="420" scrolling="no" height="60" frameborder="0" allowtransparency="true" src="http://i.tianqi.com/index.php?c=code&id=12&icon=1&num=5"></iframe>
			</div>
			
		</div>
		<div class="row">
		<div class="col-md-12" style="padding-top:10px">
				<nav class="navbar navbar-default">
				  <div class="container-fluid">
				    <!-- Brand and toggle get grouped for better mobile display -->
				    <div class="navbar-header">
				      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				        <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="#"><strong><font color="black">首页</font></strong></a>
				       <a class="navbar-brand" href="#"><strong><font color="black">关于博主</font></strong></a>
				       <a class="navbar-brand" href="#"><strong><font color="black">本站源码下载 </font></strong></a>
				    </div>
				
				    <!-- Collect the nav links, forms, and other content for toggling -->
				    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				    
				      <form class="navbar-form navbar-right">
				        <div class="form-group">
				          <input type="text" class="form-control" placeholder="请输入要查询的关键字...">
				        </div>
				        <button type="submit" class="btn btn-default">搜索</button>
				      </form>
				      
				    </div><!-- /.navbar-collapse -->
				  </div><!-- /.container-fluid -->
				</nav>
		     </div>
		</div>
		<div class="row">
		<div class="col-md-9">
		   <div class="data_list">
		     <div class="data_list_title">
		       <img alt="最新博客" src="${pageContext.request.contextPath }/static/images/list_icon.png">
		       最新博客</div>
		       <div class="datas">
		       <li style="margin-bottom: 30px">
	  					<span class="date"><a href="${pageContext.request.contextPath}/blog/articles/52.html">2016年02月15日</a></span>
					  	<span class="title"><a href="${pageContext.request.contextPath}/blog/articles/52.html">使用CXF开发WebService客户端</a></span>
					  	<span class="summary">摘要: 前面一讲开发了webservice服务器端接口，今天的话，我们来开发webservice客户端，让大家来体验下过程；首先建一个Maven项目，项目名字，WS_Client；然后我们要用CXF给我们提供的工具wsdl2java 来根据请求的url生成客户端代码；wsdl2java工具在CXF开发包里；开发下载地...</span>
					  	<span class="img">
					  		
						  		<a href="/blog/articles/52.html"><img src="${pageContext.request.contextPath}/static/userImages/a.jpg" alt="1455539511890048174.jpg"></a>
						  		&nbsp;&nbsp;
					  		
						  		<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203213.jpg" src="${pageContext.request.contextPath}/static/userImages/b.jpg" title="1455539700734093102.jpg" width="667" height="264" style="width: 667px; height: 264px;"></a>
						  		&nbsp;&nbsp;
					  		
						  		<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203317.jpg" src="${pageContext.request.contextPath}/static/userImages/c.jpg" title="1455539761187019902.jpg"></a>
						  		&nbsp;&nbsp;
					  		
					  	</span>
					  	<span class="info">发表于 2016-02-15 21:06 阅读(71) 评论(5) </span>		
	  				</li>
	  				<hr style="height:5px;border:none;border-top:1px dashed gray;padding-bottom:  10px;" />
	  				
	  				<li style="margin-bottom: 30px">
	  					<span class="date"><a href="${pageContext.request.contextPath}/blog/articles/52.html">2016年02月15日</a></span>
					  	<span class="title"><a href="${pageContext.request.contextPath}/blog/articles/52.html">使用CXF开发WebService客户端</a></span>
					  	<span class="summary">摘要: 前面一讲开发了webservice服务器端接口，今天的话，我们来开发webservice客户端，让大家来体验下过程；首先建一个Maven项目，项目名字，WS_Client；然后我们要用CXF给我们提供的工具wsdl2java 来根据请求的url生成客户端代码；wsdl2java工具在CXF开发包里；开发下载地...</span>
					  	<span class="img">
					  		
						  		<a href="/blog/articles/52.html"><img src="${pageContext.request.contextPath}/static/userImages/a.jpg" alt="1455539511890048174.jpg"></a>
						  		&nbsp;&nbsp;
					  		
						  		<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203213.jpg" src="${pageContext.request.contextPath}/static/userImages/b.jpg" title="1455539700734093102.jpg" width="667" height="264" style="width: 667px; height: 264px;"></a>
						  		&nbsp;&nbsp;
					  		
						  		<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203317.jpg" src="${pageContext.request.contextPath}/static/userImages/c.jpg" title="1455539761187019902.jpg"></a>
						  		&nbsp;&nbsp;
					  		
					  	</span>
					  	<span class="info">发表于 2016-02-15 21:06 阅读(71) 评论(5) </span>
	  					
	  				</li>
	  				 <hr style="height:5px;border:none;border-top:1px dashed gray;padding-bottom:  10px;" />
	  				
	  				
	  				<li style="margin-bottom: 30px">
	  					<span class="date"><a href="${pageContext.request.contextPath}/blog/articles/52.html">2016年02月15日</a></span>
					  	<span class="title"><a href="${pageContext.request.contextPath}/blog/articles/52.html">使用CXF开发WebService客户端</a></span>
					  	<span class="summary">摘要: 前面一讲开发了webservice服务器端接口，今天的话，我们来开发webservice客户端，让大家来体验下过程；首先建一个Maven项目，项目名字，WS_Client；然后我们要用CXF给我们提供的工具wsdl2java 来根据请求的url生成客户端代码；wsdl2java工具在CXF开发包里；开发下载地...</span>
					  	<span class="img">
					  		
						  		<a href="/blog/articles/52.html"><img src="${pageContext.request.contextPath}/static/userImages/a.jpg" alt="1455539511890048174.jpg"></a>
						  		&nbsp;&nbsp;
					  		
						  		<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203213.jpg" src="${pageContext.request.contextPath}/static/userImages/b.jpg" title="1455539700734093102.jpg" width="667" height="264" style="width: 667px; height: 264px;"></a>
						  		&nbsp;&nbsp;
					  		
						  		<a href="/blog/articles/52.html"><img alt="QQ鎴浘20160215203317.jpg" src="${pageContext.request.contextPath}/static/userImages/c.jpg" title="1455539761187019902.jpg"></a>
						  		&nbsp;&nbsp;
					  		
					  	</span>
					  	<span class="info">发表于 2016-02-15 21:06 阅读(71) 评论(5) </span>
	  					
	  				</li>
	  				 <hr style="height:5px;border:none;border-top:1px dashed gray;padding-bottom:  10px;" />
	  				
	  			</ul>
		       </div>
		   </div>
		</div>
		<div class="col-md-3" >
				<div class="data_list">
					<div class="data_list_title">
						<img alt="博主信息"
							src="${pageContext.request.contextPath }/static/images/user_icon.png">
						博主信息
					</div>
					<div class="userImage">
						<img alt="博主照片"
							src="${pageContext.request.contextPath }/static/userImages/${blogger.imageName}">
					</div>
					<div class="nickName">${blogger.nickName }</div>
					<div class="userSign">(${blogger.sign})</div>

				</div>

			
			<div class="data_list">
			   <div class="data_list_title">
			     <img alt="按日志类别分类" src="${pageContext.request.contextPath }/static/images/byType_icon.png">
			     按日志类别
			   </div>
			   <div class="datas">
			      
					<ul>   
					    <c:forEach  var ="blogTypeCount" items="${blogTypeCountList }">
							<li><span><a href="http://www.java1234.com/" target="_blank">${blogTypeCount.typeName }(${blogTypeCount.blogCount })</a></span></li>
						</c:forEach>
						
						
					</ul>
			   </div>
			
			</div>
			<div class="data_list">
			   <div class="data_list_title">
			      <img alt="按日志日期" src="${pageContext.request.contextPath }/static/images/byDate_icon.png">
			     按日志日期
			   </div>
			   <div class="datas"> 
			       <ul>
			          <c:forEach var="blogCount" items="${blogCountList }">
			           <li><span><a href="#">${blogCount.releaseDateStr }( ${blogCount.blogCount })</a></span></li>  
			          </c:forEach>
						
					
			       </ul>
			   </div>
			
			</div>
			<div class="data_list">
			   <div class="data_list_title">
			       <img alt="友情链接" src="${pageContext.request.contextPath }/static/images/link_icon.png">
			      友情链接
			   </div>
			   <div class="datas">
			     <ul>
						<c:forEach var="link" items="${linkList }">
							<li><span><a href="${link.linkUrl }" target="_blank">${link.linkName }</a></span></li>
						</c:forEach>
						
						
					</ul>
			   </div>
			
			</div>
		
		</div>
		<div class="row">
		<div class="col-md-12">
		       <div align="center" style="padding-bottom:30px">
		          版权所有   powered by  2019-5-14 戚华锋
		       </div>
		</div>
		</div>
	</div>
</body>
</html>
谁偷了我的小松鼠
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
用bootstrap做的index框架 index
10-20
用bootstrap做的index框架
第一个项目--用bootstrap实现美工设计的首页
weixin_33686714的博客
04-15 316
主要介绍在首页实现中用到bootstrap实现效果的地方。 实现如下的效果： <li> <div role="group" style="padding-top: 17px;"> <a href="#">登录</a> | <a href="#">注册</a> </d...
bootstrap网站首页
weixin_44043233的博客
09-09 750
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="styles...
bootstrap实现首页排版
长镜头
02-11 659
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;导航条&lt;/title&gt; &lt;link rel="stylesheet" href="css/bootstrap.css" /&g
Bootstrap系列之Z-index
老__L的博客
05-06 838
Z-index
基于Bootstrap开发的一个登录页面
05-18
在“基于Bootstrap开发的一个登录页面”项目中，我们可以深入理解Bootstrap的核心概念以及如何利用它来构建用户界面。 1. **Bootstrap简介**：Bootstrap是由Twitter开发并开源的HTML、CSS和JavaScript框架，它的...
一个不错的Bootstrap模版.rar
03-13
例如，可能有一个"index.html"作为主页，包含头部、导航、主体内容和页脚。"about.html"可能是关于页面，"services.html"展示服务详情，而"contact.html"用于用户联系信息。每个HTML文件都可能包含Bootstrap的CSS和...
Bootstrap前端开发案例一
11-22
在本文中，我们将通过一个简单的案例来了解如何使用Bootstrap。 首先，要开始使用Bootstrap，你需要从官方网站（http://www.bootcss.com/）下载其压缩包。下载完成后，你会得到一个包含CSS、JavaScript和图像文件的...
使用Angular和ng-bootstrap创建一个输入地址
04-03
在本文中，我们将深入探讨如何使用Angular框架与ng-bootstrap库来创建一个输入地址的组件。Angular是一个强大的前端开发框架，而ng-bootstrap则是Angular生态中专为Bootstrap设计的库，提供了许多Bootstrap组件的...
bootstrap一个小案例
08-16
Bootstrap是一个流行的前端开发框架，由Twitter开发，它提供了一套响应式设计、移动设备优先的网页开发工具。在这个小案例中，我们将会深入探讨如何利用Bootstrap的组件来创建一个功能丰富的网页。 首先，我们来看...
简洁大气的Bootstrap前台框架（Jsp版）
08-31
纯手工原创 良心制作
超漂亮的bootstrap网站首页模板
05-03
一款非常好看的基于bootstrap的首页模板
经典的Bootstrap个人主页博客模板
10-18
一个经典的Bootstrap个人主页模板，含登录页面、图表，界面简洁大气。
bootstrap各种布局模板(html文件)
12-08
bootstrap各种布局模板(html文件)。下载后解压，打开文件夹找到index.html文件查看。然后根据自己想要的在文件夹中找到对应的文件用编辑器打开查看即可。
react结合bootstrap实现评论功能
10-15
主要为大家详细介绍了react结合bootstrap实现评论功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
使用BootStrap搭建主页
qq_1114382703的博客
05-04 1249
使用Bootstrap来搭建主页
Bootstrap02.制作主页
github_67177094的博客
05-06 231
回顾：https://blog.csdn.net/github_67177094/article/details/124573594?spm=1001.2014.3001.5501 目录 top.jsp index.jsp insert.jsp 首先导入bootstrap的css和js <link href="bootstrap5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="bootst.
Bootstrap02——主页搭建
weixin_65975275的博客
05-06 784
bootstrap——如何主页搭建
BootStrap实现商城index页面前端效果------商城项目前端
最新发布
春风若有怜花意，可否许我再少年
12-12 859
BootStrap实现商城index页面前端效果------商城项目前端
bootstrap 一个div盖在另外一个div上
06-06
如果要在Bootstrap中实现一个div盖在另外一个div上，可以使用CSS的z-index属性来控制各个元素的层次关系。z-index属性定义了一个元素的层次顺序，值越大的元素越在上层。 要将一个div盖在另外一个div上，可以通过...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值