Bootstrap5

Bootstrap5

快速开始

<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

布局

<div class="container-fluid">
  <h1>我的第一个 Bootstrap 页面</h1>
  <p>使用了 .container-fluid，100% 宽度，占据全部视口（viewport）的容器。</p> 
</div>

居中

<div class="container">
    

</div>

按钮

绿色的

class=“btn btn-success”

蓝色的

class=“btn btn-primary”

表格

 <table class="table table-hover">
        <thead>
        <tr>
            <th>会员卡号</th>
            <th>昵称</th>
            <th>申请时间</th>
            <th>最新购买商品</th>
        </tr>
        </thead>
        <!--xmlns:th="http://www.thymeleaf.org"-->
        <tr th:each="list:${list}">
            <td th:text="${list.id}"></td>
            <td th:text="${list.name}"></td>
            <td th:text="${list.interfaceLanguage}"></td>
            <td th:text="${list.softwareSize}"></td>
            <td th:text="${list.updateDate}"></td>
            <td th:text="${list.devId}"></td>
            <td th:text="${list.appInfo}"></td>
            <td th:text="${list.status}"></td>
            <td th:text="${list.onSaleDate}"></td>
            <td th:text="${list.offSaleDate}"></td>
            <td th:text="${list.flatformId}"></td>
            <td>
                <button th:onclick="'javascript:tg('+${list.id}+')' " class="btn btn-primary" >审核通过</button>
                <button th:onclick="'javascript:btg('+${list.id}+')' " class="btn btn-primary" >未通过</button>
                <button th:onclick="'javascript:sc('+${list.id}+')' " class="btn btn-primary" >删除</button>
            </td>
        </tr>
    </table>

导航栏

<!--白色主题-->  

<!--navbar navbar-expand-lg navbar-light bg-light rounded-->  

<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">  

  <!-- Brand -->  

  <a class="navbar-brand" href="#">Navbar</a>  

  <!-- Toggler/collapsibe Button -->  

  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar">  

  <span class="navbar-toggler-icon"></span>  

  </button>  

  <!-- Navbar links -->  

  <div class="collapse navbar-collapse" id="collapsibleNavbar">  

  <ul class="navbar-nav">  

  <li class="nav-item">  

  <a class="nav-link" href="#">Link</a>  

  </li>  

  <li class="nav-item">  

  <a class="nav-link" href="#">Link</a>  

  </li>  

  <li class="nav-item">  

  <a class="nav-link" href="#">Link</a>  

  </li>  

  </ul>  

  </div>  

</nav>





## 轮播图

<!-- 轮播 -->  

<div id="demo" class="carousel slide" data-bs-ride="carousel">  

  <!-- 指示符 -->  

  <div class="carousel-indicators">  

  <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>  

  <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>  

  <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>  

  </div>  

  <!-- 轮播图片 -->  

  <div class="carousel-inner">  

  <div class="carousel-item active">  

  <img src="[https://w.wallhaven.cc/full/pk/wallhaven-pkgkkp.png](https://w.wallhaven.cc/full/pk/wallhaven-pkgkkp.png)" class="d-block">  

  </div>  

  <div class="carousel-item">  

  <img src="[https://w.wallhaven.cc/full/72/wallhaven-72xyr3.jpg](https://w.wallhaven.cc/full/72/wallhaven-72xyr3.jpg)" class="d-block">  

  </div>  

  <div class="carousel-item">  

  <img src="[https://w.wallhaven.cc/full/m9/wallhaven-m9olo8.jpg](https://w.wallhaven.cc/full/m9/wallhaven-m9olo8.jpg)" class="d-block">  

  </div>  

  </div>  

  <!-- 左右切换按钮 -->  

  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">  

  <span class="carousel-control-prev-icon"></span>  

  </button>  

  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">  

  <span class="carousel-control-next-icon"></span>  

  </button>  

</div>

卡片浮动

<!--卡片浮动-->
<div class="card bg-secondary text-white" >
</div>

input

<input  class="form-control"  placeholder="地区">

placeholder

<input  class="form-control" id="id" th:value="${list.id}"><br>