To beautify the interface using Bootstrap, you can add Bootstrap classes to the HTML elements. Here's an example of how you can modify the given code to use Bootstrap classes:

<div id="main" class="wrap clearfix">
    <div id="content" class="col-md-8">
        <div class="info-list-wrap clearfix" id="info-list-lost">
            <div class="info-title-wrap">
                <h2><a href="goods!lost">最新求助信息</a></h2>
                <span class="info-list-more pull-right">
                    <a href="goods!lost">查看所有>;&gt;</a>
                </span>
            </div>
            <ul class="info-list">
                <li class="clearfix">
                    <span class="event-goods-type">物品类别</span>
                    <span class="event-goods">物品名称</span>
                    <span class="event-time">丢失时间</span>
                    <span class="event-address">丢失地点</span>
                    <span class="event-title">标题</span>
                </li>
                <c:forEach items="${lostlist}" var="bean">
                    <li class="clearfix">
                        <span class="event-goods-type">${bean.category.cname }</span>
                        <span class="event-goods">${bean.name}</span>
                        <span class="event-time"><fmt:formatDate value="${bean.happentime}" pattern="yyyy-MM-dd"/></span>
                        <span class="event-address">${bean.address}</span>
                        <span class="event-title">
                            <a href="repair!view?id=${bean.id}">
                                ${fn:substring(bean.title,0,18)}<c:if test="${fn:length(bean.title)>18 }">...</c:if>
                            </a>
                        </span>
                    </li>
                </c:forEach>
            </ul>
        </div>
        <div class="info-list-wrap clearfix" id="info-list-found">
            <div class="info-title-wrap">
                <h2><a href="repair!find">最新维修工具耗材</a></h2>
                <span class="info-list-more pull-right">
                    <a href="repair!find">查看所有>;></a>
                </span>
            </div>
            <ul class="info-list">
                <li class="clearfix">
                    <span class="event-goods-type">物品类别</span>
                    <span class="event-goods">物品名称</span>
                    <span class="event-time">捡到时间</span>
                    <span class="event-address">捡到地点</span>
                    <span class="event-title">标题</span>
                </li>
                <c:forEach items="${findlist}" var="bean">
                    <li class="clearfix">
                        <span class="event-goods-type">${bean.category.cname }</span>
                        <span class="event-goods">${bean.name}</span>
                        <span class="event-time"><fmt:formatDate value="${bean.happentime}" pattern="yyyy-MM-dd"/></span>
                        <span class="event-address">${bean.address}</span>
                        <span class="event-title">
                            <a href="repair!view?id=${bean.id}">
                                ${fn:substring(bean.title,0,18)}<c:if test="${fn:length(bean.title)>18 }">...</c:if>
                            </a>
                        </span>
                    </li>
                </c:forEach>
            </ul>
        </div>
    </div>
    <div id="sidebar" class="col-md-4">
        <div id="publish">
            <img alt="" src="sta/pic/logo.jpg" class="img-responsive">
        </div>
        <div id="office" class="side-box">
            <div class="clearfix" id="office-title-wrap">
                <h3 id="office-title">教学楼失物招领地点</h3>
            </div>
            <ul id="office-content">
                <li class="office-item">
                    失物招领处:113室&nbsp;&nbsp;&nbsp;&nbsp;电话:812345678
                </li>
            </ul>
        </div>
        <div></div>
    </div>
</div>

In the above code, I have added Bootstrap classes like col-md-8 and col-md-4 to create a responsive layout with two columns for the content and sidebar. I have also used classes like pull-right and img-responsive to align elements and make the image responsive.

Remember to include the Bootstrap CSS and JS files in your HTML file for the styles and functionality to work properly

div id=main class=wrap clearfix div id=content class=fl div class=info-list-wrap clearfix id=info-list-lost div class=info-title-wrap h2a href=goods

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

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