用 bootstrap 美化代码点此a获取楼主联系方式。要有交互效果div class=container div class= clearfix div id=note-detail div class=note-detail-title-wrap clearfix h2 class=note-detail-title fl

使用Bootstrap来美化这段代码，可以通过添加Bootstrap的样式类和一些交互效果来实现。

首先，在页面的头部引入Bootstrap的CSS和JS文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>

然后，对代码进行美化和添加交互效果：

<div class="container">
    <div class="clearfix">
        <div id="note-detail">
            <div class="note-detail-title-wrap clearfix">
                <h2 class="note-detail-title fl">
                    <span id="note-detail-title-pre">[<c:if test="${repair.typename == 'lost'}">求助</c:if><c:if test="${repair.typename == 'find'}">帮助</c:if>信息]</span>${repair.title}
                </h2>
                <span class="fr note-detail-author">
                    用户: ${repair.createuser.username} <br>发表于 <fmt:formatDate value="${repair.crearetime}" pattern="yyyy-MM-dd HH:mm:ss"/>
                </span>
            </div>
            <div class="note-detial-repair">
                <table class="table">
                    <tbody>
                    <tr>
                        <td width="80px">出问题的物品</td>
                        <td width="450px">${repair.name}</td>
                    </tr>
                    <tr>
                        <td>备注</td>
                        <td>${repair.remark}</td>
                    </tr>
                    <tr>
                        <td>详情</td>
                        <td>${repair.info}</td>
                    </tr>
                    <tr>
                        <td>结果</td>
                        <td id="Js_share_content">
                            <c:if test="${repair.state==0}">寻找中</c:if>
                            <c:if test="${repair.state==1}">
                                <c:if test="${repair.typename == 'lost'}">已找到</c:if>
                                <c:if test="${repair.typename == 'find'}">已招领</c:if>
                                ${repair.result}
                            </c:if>
                        </td>
                    </tr>
                    <tr>
                        <td>联系方式</td>
                        <td>
                            <a id="contact-lz-btn" href="javascript:;" data-bs-toggle="collapse" data-bs-target="#contact-lz">点此</a>获取楼主联系方式。
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

            <div id="contact-lz" class="collapse">
                <p id="contact-lz-close">收起>></p>
                <table class="table">
                    <tbody>
                    <tr>
                        <td>楼主昵称：</td>
                        <td>${repair.createuser.username}</td>
                    </tr>
                    <tr>
                        <td>楼主手机：</td>
                        <td>${repair.mobile}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

在上面的代码中，我们添加了Bootstrap的样式类和一些交互效果：

1. 为标题和作者信息添加了Bootstrap的样式类，使其看起来更美观。
2. 使用了Bootstrap的表格样式类，使表格更具可读性。
3. 使用了Bootstrap的折叠组件，通过data-bs-toggle="collapse"和data-bs-target="#contact-lz"属性实现点击按钮时展开或收起联系方式的内容。
4. 添加了一个收起按钮，通过点击按钮来收起联系方式的内容。

这样，使用Bootstrap美化后的代码就具有了更好的视觉效果和交互效果