用Bootstrap美化 page language=java import=javautilcomhdfixmodelUser pageEncoding=UTF-8 div id=header div class=wrap clearfix head h1 class=fl logo font size=8维修互助平台font h1
使用Bootstrap美化上述代码,可以按照以下步骤进行操作:
- 在标签中引入Bootstrap的CSS文件:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
- 修改代码中的样式类名,使用Bootstrap提供的样式类:
- 将
<div class="wrap clearfix head">改为<div class="container-fluid"> - 将
<h1 class="fl logo">改为<h1 class="navbar-brand"> - 将
<div class="fl renrenlike">改为<div class="navbar-text"> - 将
<div id="searchBox-wrap" class="clearfix fr">改为<div id="searchBox-wrap" class="navbar-form navbar-right"> - 将
<form action="repair!search">改为<form class="navbar-form" action="repair!search"> - 将
<div id="searchBox" class="clearfix">改为<div id="searchBox" class="form-group"> - 将
<input type="text" name="key" class="fl" id="q" autocomplete="off" placeholder="搜索丢失/捡到的东西">改为<input type="text" name="key" class="form-control" id="q" autocomplete="off" placeholder="搜索丢失/捡到的东西"> - 将
<button type="submit" id="search-button" class="fl">搜索</button>改为<button type="submit" id="search-button" class="btn btn-default">搜索</button> - 将
<a href="repair!search" id="search-advanced" class="fr" target="_self">高级搜索</a>改为<a href="repair!search" id="search-advanced" class="btn btn-link">高级搜索</a> - 将
<div class="nav-wrap-outer">改为<div class="navbar-collapse collapse"> - 将
<div class="nav" id="nav">改为<ul class="nav navbar-nav"> - 将
<li class="nav-item"><a href="repair!index" class="nav-item-link">首页</a></li>改为<li><a href="repair!index">首页</a></li> - 将
<li class="nav-item"><a href="repair!publish?type=lost" class="nav-item-link nav-item-plus">发布寻物贴</a></li>改为<li><a href="repair!publish?type=lost">发布寻物贴</a></li> - 将
<li class="nav-item"><a href="repair!publish?type=find" class="nav-item-link nav-item-plus">发布招领贴</a></li>改为<li><a href="repair!publish?type=find">发布招领贴</a></li> - 将
<li class="nav-item"><a href="thanks!write" class="nav-item-link nav-item-plus">写感谢信</a></li>改为<li><a href="thanks!write">写感谢信</a></li> - 将
<li class="nav-item"><a href="repair!lost" class="nav-item-link">浏览寻物贴</a></li>改为<li><a href="repair!lost">浏览寻物贴</a></li> - 将
<li class="nav-item"><a href="repair!find" class="nav-item-link">查看招领贴</a></li>改为<li><a href="repair!find">查看招领贴</a></li> - 将
<li class="nav-item nav-item-last"><a href="goods!success" class="nav-item-link">成功案例</a></li>改为<li><a href="goods!success">成功案例</a></li> - 将
<li class="nav-item nav-item-last"><a href="thanks!list" class="nav-item-link">感谢信</a></li>改为<li><a href="thanks!list">感谢信</a></li> - 将
<li class="nav-item nav-item-last"><a href="user!mygoods" class="nav-item-link">用户中心</a></li>改为<li><a href="user!mygoods">用户中心</a></li> - 将
<ul class="nav-login fr">改为<ul class="nav navbar-nav navbar-right"> - 将
<li class="nav-login-item"><a href="login.jsp" class="nav-login-link" style="color: rgb(255, 255, 255); ">请登录</a></li>改为<li><a href="login.jsp">请登录</a></li> - 将
<li class="nav-login-item"><a href="reg.jsp" class="nav-login-link">10秒注册<span class="red">!</span></a></li>改为<li><a href="reg.jsp">10秒注册<span class="red">!</span></a></li> - 将
<ul class="nav-login fr">改为<ul class="nav navbar-nav navbar-right"> - 将
<li class="nav-login-item"><a href="user!mygoods" class="nav-login-link"><%=((User) session.getAttribute("user")).getUsername() %></a></li>改为<li><a href="user!mygoods"><%=((User) session.getAttribute("user")).getUsername() %></a></li> - 将
<li class="nav-login-item"><a href="updatepsw.jsp" class="nav-login-link">修改密码</a></li>改为<li><a href="updatepsw.jsp">修改密码</a></li> - 将
<li class="nav-login-item"><a onclick="return confirm('确定退出')" href="user!logout" class="nav-login-link">登出</a></li>改为<li><a onclick="return confirm('确定退出')" href="user!logout">登出</a></li>
- 在标签结束前引入Bootstrap的JS文件:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
最终的代码如下所示:
<%@ page language="java" import="java.util.*,com.hdfix.model.User" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>维修互助平台</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div id="header">
<div class="container-fluid">
<h1 class="navbar-brand">
<font size="8">维修互助平台</font>
</h1>
<div class="navbar-text"></div>
<div id="searchBox-wrap" class="navbar-form navbar-right">
<form class="navbar-form" action="repair!search">
<div id="searchBox" class="form-group">
<input type="text" name="key" class="form-control" id="q" autocomplete="off" placeholder="搜索丢失/捡到的东西">
<button type="submit" id="search-button" class="btn btn-default">搜索</button>
<a href="repair!search" id="search-advanced" class="btn btn-link">高级搜索</a>
</div>
</form>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="repair!index">首页</a></li>
<li><a href="repair!publish?type=lost">发布寻物贴</a></li>
<li><a href="repair!publish?type=find">发布招领贴</a></li>
<li><a href="thanks!write">写感谢信</a></li>
<li><a href="repair!lost">浏览寻物贴</a></li>
<li><a href="repair!find">查看招领贴</a></li>
<li><a href="goods!success">成功案例</a></li>
<li><a href="thanks!list">感谢信</a></li>
<li><a href="user!mygoods">用户中心</a></li>
</ul>
<%if (session.getAttribute("user") == null) { %>
<ul class="nav navbar-nav navbar-right">
<li><a href="login.jsp">请登录</a></li>
<li><a href="reg.jsp">10秒注册<span class="red">!</span></a></li>
</ul>
<%} else { %>
<ul class="nav navbar-nav navbar-right">
<li><a href="user!mygoods"><%=((User) session.getAttribute("user")).getUsername() %></a></li>
<li><a href="updatepsw.jsp">修改密码</a></li>
<li><a onclick="return confirm('确定退出')" href="user!logout">登出</a></li>
</ul>
<%} %>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
通过以上步骤,你可以使用Bootstrap美化你的页面
原文地址: https://www.cveoy.top/t/topic/hzNB 著作权归作者所有。请勿转载和采集!