使用Bootstrap美化上述代码,可以按照以下步骤进行操作:

  1. 在标签中引入Bootstrap的CSS文件:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  1. 修改代码中的样式类名,使用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>
  1. 在标签结束前引入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美化你的页面

用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

原文地址: https://www.cveoy.top/t/topic/hzNB 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录