<![CDATA[
<div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1PqNJ/e5988d6073ef6c729680db08b968b9652c9dd453" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1PqNJ/e5988d6073ef6c729680db08b968b9652c9dd453" data-origin-width="1543" data-origin-height="780"></div><p style="text-align: left;"><span style="color: #333333;" data-ke-size="size18"><!DOCTYPE html><br><html lang="en"<br>      xmlns:th="<a style="color: #333333;" href="http://www.thymeleaf.org" target="_top" class="ke-link">http://www.thymeleaf.org</a>"<br>      xmlns:layout="<a style="color: #333333;" href="http://www.ultraq.net.nz/thymeleaf/layout" target="_top" class="ke-link">http://www.ultraq.net.nz/thymeleaf/layout</a>"<br>      layout:decorate="~{layouts/layout1}"><br><br><th:block layout:fragment="script"><br>    <script th:src="@{/js/darkmodetoggle.js}"></script><br></th:block><br><th:block layout:fragment="css"><br>    <style><br>        @media (min-width: 767px){<br>            .user-menu {<br>                justify-content: center; <b>!important</b>;<br>                margin-top: 20px;<br>            }<br>        }<br>    </style><br></th:block><br><br><div layout:fragment="content"><br>    <header class="mb-5"><br>        <div class="d-flex justify-content-end"><br>            <div class="btn-group"><br>                <button class="btn btn-dark btn-sm" data-bs-theme-value="dark">Dark</button><br>                <button class="btn btn-light btn-sm" data-bs-theme-value="light">Light</button><br>            </div><br>        </div><br>        <h1 class="mb-4">Users</h1><br>        <div class="row"><br>            <div class="col-md-4"><br>                <input type="text" class="form-control form-control-lg" placeholder="Search Users"><br>            </div><br>            <div class="col-md-8 user-list d-flex justify-content-end align-item-center"><br>                <ul class="nav"><br>                    <li class="nav-item"><br>                        <a href="#" class="nav-link">Reputation</a><br>                    </li><br>                    <li class="nav-item"><br>                        <a href="#" class="nav-link text-bg-primary rounded-3">New Users</a><br>                    </li><br>                    <li class="nav-item"><br>                        <a href="#" class="nav-link">Editor</a><br>                    </li><br>                    <li class="nav-item"><br>                        <a href="#" class="nav-link">Moderators</a><br>                    </li><br>                </ul><br>            </div><br>        </div><br><br>    </header><br>    <main><br>        <div class="container"><br>            <div class="row"><br>                <div class="col-md-4"><br>                    <div class="card mb-3" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Email: john@gmail.com"><br>                        <div class="card-body"><br>                            <div class="d-flex gap-3"><br>                                <div class="user-img"><br>                                    <img src="<a style="color: #333333;" href="https://randomuser.me/api/portraits/men/75.jpg" target="_top" class="ke-link">https://randomuser.me/api/portraits/men/75.jpg</a>" alt="User Image" class="img-fluid rounded-circle"><br>                                </div><br>                                <div class="user-info"><br>                                    <h4>John Doe</h4><br>                                    <h6>Troy MI</h6><br>                                    <span class="badge bg-primary">Nature</span><br>                                    <span class="badge bg-primary">Travel</span><br>                                    <span class="badge bg-primary">Sports</span><br>                                </div><br>                            </div><br>                        </div><br>                    </div><br>                </div><br>                <div class="col-md-4"><br>                    <div class="card mb-3" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Email: lelah@gmail.com"><br>                        <div class="card-body"><br>                            <div class="d-flex gap-3"><br>                                <div class="user-img"><br>                                    <img src="<a style="color: #333333;" href="https://randomuser.me/api/portraits/women/75.jpg" target="_top" class="ke-link">https://randomuser.me/api/portraits/women/75.jpg</a>" alt="User Image" class="img-fluid rounded-circle"><br>                                </div><br>                                <div class="user-info"><br>                                    <h4>Lehla Nichols</h4><br>                                    <h6>Fort Worth, TX</h6><br>                                    <span class="badge bg-primary">Fashion</span><br>                                    <span class="badge bg-primary">STEM</span><br>                                    <span class="badge bg-primary">Architecher</span><br>                                </div><br>                            </div><br>                        </div><br>                    </div><br>                </div><br>                <div class="col-md-4"><br>                    <div class="card mb-3" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Email: annie@gmail.com"><br>                        <div class="card-body"><br>                            <div class="d-flex gap-3"><br>                                <div class="user-img"><br>                                    <img src="<a style="color: #333333;" href="https://randomuser.me/api/portraits/women/50.jpg" target="_top" class="ke-link">https://randomuser.me/api/portraits/women/50.jpg</a>" alt="User Image" class="img-fluid rounded-circle"><br>                                </div><br>                                <div class="user-info"><br>                                    <h4>Annie Rice</h4><br>                                    <h6>Tory, MI</h6><br>                                    <span class="badge bg-primary">Electronics</span><br>                                    <span class="badge bg-primary">Tech</span><br>                                    <span class="badge bg-primary">Music</span><br>                                </div><br>                            </div><br>                        </div><br>                    </div><br>                </div><br>            </div><br>            <!-- row2 --><br>            <div class="row"><br>                <div class="col-md-4"><br>                    <div class="card mb-3" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Email: thomas@gmail.com"><br>                        <div class="card-body"><br>                            <div class="d-flex gap-3"><br>                                <div class="user-img"><br>                                    <img src="<a style="color: #333333;" href="https://randomuser.me/api/portraits/men/15.jpg" target="_top" class="ke-link">https://randomuser.me/api/portraits/men/15.jpg</a>" alt="User Image" class="img-fluid rounded-circle"><br>                                </div><br>                                <div class="user-info"><br>                                    <h4>Thomas Sinew</h4><br>                                    <h6>Lynn, MA</h6><br>                                    <span class="badge bg-primary">Vintage</span><br>                                    <span class="badge bg-primary">Clothing</span><br>                                    <span class="badge bg-primary">Sports</span><br>                                </div><br>                            </div><br>                        </div><br>                    </div><br>                </div><br>                <div class="col-md-4"><br>                    <div class="card mb-3" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Email: brianna@gmail.com"><br>                        <div class="card-body"><br>                            <div class="d-flex gap-3"><br>                                <div class="user-img"><br>                                    <img src="<a style="color: #333333;" href="https://randomuser.me/api/portraits/women/10.jpg" target="_top" class="ke-link">https://randomuser.me/api/portraits/women/10.jpg</a>" alt="User Image" class="img-fluid rounded-circle"><br>                                </div><br>                                <div class="user-info"><br>                                    <h4>Brianna Haylee</h4><br>                                    <h6>Boston, MA</h6><br>                                    <span class="badge bg-primary">Software</span><br>                                    <span class="badge bg-primary">Design</span><br>                                    <span class="badge bg-primary">UI/UX</span><br>                                </div><br>                            </div><br>                        </div><br>                    </div><br>                </div><br>                <div class="col-md-4"><br>                    <div class="card mb-3" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Email: james@gmail.com"><br>                        <div class="card-body"><br>                            <div class="d-flex gap-3"><br>                                <div class="user-img"><br>                                    <img src="<a style="color: #333333;" href="https://randomuser.me/api/portraits/men/40.jpg" target="_top" class="ke-link">https://randomuser.me/api/portraits/men/40.jpg</a>" alt="User Image" class="img-fluid rounded-circle"><br>                                </div><br>                                <div class="user-info"><br>                                    <h4>James Hall</h4><br>                                    <h6>Austin, TX</h6><br>                                    <span class="badge bg-primary">Electronics</span><br>                                    <span class="badge bg-primary">Tech</span><br>                                    <span class="badge bg-primary">Music</span><br>                                </div><br>                            </div><br>                        </div><br>                    </div><br>                </div><br>            </div><br>        </div><br>    </main><br>    <script><br>        const <i>popoverTriggerList </i>= <i>document</i>.querySelectorAll('[data-bs-toggle="popover"]');<br>        const <i>popoverList </i>= [...<i>popoverTriggerList</i>].map(<br>            (popoverTriggerListEL) => new bootstrap.Popover(popoverTriggerListEL)<br>        );<br>    </script><br></div><br></html></span></p><p> </p>
<!-- -->
]]>
카페 게시글
CSS
bootstrap
Users 페이지
주인장
추천 0
조회 6
25.01.02 22:10
댓글 0
다음검색
