Prompt Frontend.md
· 74 KiB · Markdown
Raw
我最近购买了一个 HTML 模板，打算用来优化一下我 ASP.NET Core 项目的前端。我写的 html 都是原生的 ASP.NET Core 的，都太丑了。
所以，在开始之前，我们先学习一下这个模板。它的仪表板页面长这样：
```html
<main class="content">
<div class="container-fluid p-0">
<div class="row mb-2 mb-xl-3">
<div class="col-auto d-none d-sm-block">
<h3>Dashboard</h3>
</div>
<div class="col-auto ms-auto text-end mt-n1">
<div class="dropdown me-2 d-inline-block position-relative">
<a class="btn btn-light bg-white shadow-sm dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle mt-n1" data-lucide="calendar"></i> Today
</a>
<div class="dropdown-menu dropdown-menu-end">
<h6 class="dropdown-header">Settings</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<button class="btn btn-primary shadow-sm">
<i class="align-middle" data-lucide="filter"> </i>
</button>
<button class="btn btn-primary shadow-sm">
<i class="align-middle" data-lucide="refresh-cw"> </i>
</button>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-xxl-3 d-flex">
<div class="card illustration flex-fill">
<div class="card-body p-0 d-flex flex-fill">
<div class="row g-0 w-100">
<div class="col-6">
<div class="illustration-text p-3 m-1">
<h4 class="illustration-text">Welcome Back, Chris!</h4>
<p class="mb-0">AppStack Dashboard</p>
</div>
</div>
<div class="col-6 align-self-end text-end">
<img src="img/illustrations/customer-support.png" alt="Customer Support" class="img-fluid illustration-img">
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-xxl-3 d-flex">
<div class="card flex-fill">
<div class="card-body py-4">
<div class="d-flex align-items-start">
<div class="flex-grow-1">
<h3 class="mb-2">$ 24.300</h3>
<p class="mb-2">Total Earnings</p>
<div class="mb-0">
<span class="badge badge-subtle-success me-2"> +5.35% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
<div class="d-inline-block ms-3">
<div class="stat">
<i class="align-middle text-success" data-lucide="dollar-sign"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-xxl-3 d-flex">
<div class="card flex-fill">
<div class="card-body py-4">
<div class="d-flex align-items-start">
<div class="flex-grow-1">
<h3 class="mb-2">43</h3>
<p class="mb-2">Pending Orders</p>
<div class="mb-0">
<span class="badge badge-subtle-danger me-2"> -4.25% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
<div class="d-inline-block ms-3">
<div class="stat">
<i class="align-middle text-danger" data-lucide="shopping-bag"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-xxl-3 d-flex">
<div class="card flex-fill">
<div class="card-body py-4">
<div class="d-flex align-items-start">
<div class="flex-grow-1">
<h3 class="mb-2">$ 18.700</h3>
<p class="mb-2">Total Revenue</p>
<div class="mb-0">
<span class="badge badge-subtle-success me-2"> +8.65% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
<div class="d-inline-block ms-3">
<div class="stat">
<i class="align-middle text-info" data-lucide="dollar-sign"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-8 d-flex">
<div class="card flex-fill w-100">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Sales / Revenue</h5>
</div>
<div class="card-body d-flex w-100">
<div class="align-self-center chart chart-lg">
<canvas id="chartjs-dashboard-bar"></canvas>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 d-flex">
<div class="card flex-fill w-100">
<div class="card-header">
<span class="badge bg-info float-end">Today</span>
<h5 class="card-title mb-0">Daily feed</h5>
</div>
<div class="card-body">
<div class="d-flex align-items-start">
<img src="img/avatars/avatar-5.jpg" width="36" height="36" class="rounded-circle me-2" alt="Ashley Briggs">
<div class="flex-grow-1">
<small class="float-end">5m ago</small>
<strong>Ashley Briggs</strong> started following <strong>Stacie Hall</strong><br />
<small class="text-muted">Today 7:51 pm</small><br />
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Chris Wood">
<div class="flex-grow-1">
<small class="float-end">30m ago</small>
<strong>Chris Wood</strong> posted something on <strong>Stacie Hall</strong>'s timeline<br />
<small class="text-muted">Today 7:21 pm</small>
<div class="border text-sm text-muted p-2 mt-1">
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing...
</div>
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Stacie Hall">
<div class="flex-grow-1">
<small class="float-end">1h ago</small>
<strong>Stacie Hall</strong> posted a new blog<br />
<small class="text-muted">Today 6:35 pm</small>
</div>
</div>
<hr />
<div class="d-grid">
<a href="#" class="btn btn-primary">Load more</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-6 col-xl-4 d-flex">
<div class="card flex-fill">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Calendar</h5>
</div>
<div class="card-body d-flex">
<div class="align-self-center w-100">
<div class="chart">
<div id="calendar-dashboard"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-4 d-none d-xl-flex">
<div class="card flex-fill w-100">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Weekly sales</h5>
</div>
<div class="card-body d-flex">
<div class="align-self-center w-100">
<div class="py-3">
<div class="chart chart-xs">
<canvas id="chartjs-dashboard-pie"></canvas>
</div>
</div>
<table class="table mb-0">
<thead>
<tr>
<th>Source</th>
<th class="text-end">Revenue</th>
<th class="text-end">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fas fa-square-full text-primary"></i> Direct</td>
<td class="text-end">$ 2602</td>
<td class="text-end text-success">+43%</td>
</tr>
<tr>
<td><i class="fas fa-square-full text-warning"></i> Affiliate</td>
<td class="text-end">$ 1253</td>
<td class="text-end text-success">+13%</td>
</tr>
<tr>
<td><i class="fas fa-square-full text-danger"></i> E-mail</td>
<td class="text-end">$ 541</td>
<td class="text-end text-success">+24%</td>
</tr>
<tr>
<td><i class="fas fa-square-full text-dark"></i> Other</td>
<td class="text-end">$ 1465</td>
<td class="text-end text-success">+11%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-4 d-flex">
<div class="card flex-fill w-100">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Appointments</h5>
</div>
<div class="card-body">
<ul class="timeline">
<li class="timeline-item">
<strong>Chat with Carl and Ashley</strong>
<span class="float-end text-muted text-sm">30m ago</span>
<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris...</p>
</li>
<li class="timeline-item">
<strong>The big launch</strong>
<span class="float-end text-muted text-sm">2h ago</span>
<p>Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum
nunc...</p>
</li>
<li class="timeline-item">
<strong>Coffee break</strong>
<span class="float-end text-muted text-sm">3h ago</span>
<p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada...</p>
</li>
<li class="timeline-item">
<strong>Chat with team</strong>
<span class="float-end text-muted text-sm">30m ago</span>
<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum...</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card flex-fill">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Latest Projects</h5>
</div>
<table class="table table-borderless my-0">
<thead>
<tr>
<th>Name</th>
<th class="d-none d-xxl-table-cell">Company</th>
<th class="d-none d-xl-table-cell">Author</th>
<th>Status</th>
<th class="d-none d-xl-table-cell text-end">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex">
<div class="flex-shrink-0">
<div class="bg-body-tertiary rounded-2">
<img class="p-2" src="img/brands/brand-1.svg">
</div>
</div>
<div class="flex-grow-1 ms-3">
<strong>Project Apollo</strong>
<div class="text-muted">
Web, UI/UX Design
</div>
</div>
</div>
</td>
<td class="d-none d-xxl-table-cell">
<strong>Gantos</strong>
<div class="text-muted">
Real Estate
</div>
</td>
<td class="d-none d-xl-table-cell">
<strong>Carl Jenkins</strong>
<div class="text-muted">
HTML, JS, React
</div>
</td>
<td>
<div class="d-flex flex-column w-100">
<span class="me-2 mb-1 text-muted">65%</span>
<div class="progress progress-sm w-100">
<div class="progress-bar bg-success" role="progressbar" style="width: 65%;"></div>
</div>
</div>
</td>
<td class="d-none d-xl-table-cell text-end">
<a href="#" class="btn btn-light">View</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="flex-shrink-0">
<div class="bg-body-tertiary rounded-2">
<img class="p-2" src="img/brands/brand-2.svg">
</div>
</div>
<div class="flex-grow-1 ms-3">
<strong>Project Bongo</strong>
<div class="text-muted">
Web
</div>
</div>
</div>
</td>
<td class="d-none d-xxl-table-cell">
<strong>Adray Transportation</strong>
<div class="text-muted">
Transportation
</div>
</td>
<td class="d-none d-xl-table-cell">
<strong>Bertha Martin</strong>
<div class="text-muted">
HTML, JS, Vue
</div>
</td>
<td>
<div class="d-flex flex-column w-100">
<span class="me-2 mb-1 text-muted">33%</span>
<div class="progress progress-sm w-100">
<div class="progress-bar bg-danger" role="progressbar" style="width: 33%;"></div>
</div>
</div>
</td>
<td class="d-none d-xl-table-cell text-end">
<a href="#" class="btn btn-light">View</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="flex-shrink-0">
<div class="bg-body-tertiary rounded-2">
<img class="p-2" src="img/brands/brand-3.svg">
</div>
</div>
<div class="flex-grow-1 ms-3">
<strong>Project Canary</strong>
<div class="text-muted">
Web, UI/UX Design
</div>
</div>
</div>
</td>
<td class="d-none d-xxl-table-cell">
<strong>Evans</strong>
<div class="text-muted">
Insurance
</div>
</td>
<td class="d-none d-xl-table-cell">
<strong>Stacie Hall</strong>
<div class="text-muted">
HTML, JS, Laravel
</div>
</td>
<td>
<div class="d-flex flex-column w-100">
<span class="me-2 mb-1 text-muted">50%</span>
<div class="progress progress-sm w-100">
<div class="progress-bar bg-warning" role="progressbar" style="width: 50%;"></div>
</div>
</div>
</td>
<td class="d-none d-xl-table-cell text-end">
<a href="#" class="btn btn-light">View</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="flex-shrink-0">
<div class="bg-body-tertiary rounded-2">
<img class="p-2" src="img/brands/brand-4.svg">
</div>
</div>
<div class="flex-grow-1 ms-3">
<strong>Project Edison</strong>
<div class="text-muted">
UI/UX Design
</div>
</div>
</div>
</td>
<td class="d-none d-xxl-table-cell">
<strong>Monsource Investment Group</strong>
<div class="text-muted">
Finance
</div>
</td>
<td class="d-none d-xl-table-cell">
<strong>Carl Jenkins</strong>
<div class="text-muted">
HTML, JS, React
</div>
</td>
<td>
<div class="d-flex flex-column w-100">
<span class="me-2 mb-1 text-muted">80%</span>
<div class="progress progress-sm w-100">
<div class="progress-bar bg-success" role="progressbar" style="width: 80%;"></div>
</div>
</div>
</td>
<td class="d-none d-xl-table-cell text-end">
<a href="#" class="btn btn-light">View</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="flex-shrink-0">
<div class="bg-body-tertiary rounded-2">
<img class="p-2" src="img/brands/brand-5.svg">
</div>
</div>
<div class="flex-grow-1 ms-3">
<strong>Project Indigo</strong>
<div class="text-muted">
Web, UI/UX Design
</div>
</div>
</div>
</td>
<td class="d-none d-xxl-table-cell">
<strong>Edwards</strong>
<div class="text-muted">
Retail
</div>
</td>
<td class="d-none d-xl-table-cell">
<strong>Ashley Briggs</strong>
<div class="text-muted">
HTML, JS, Vue
</div>
</td>
<td>
<div class="d-flex flex-column w-100">
<span class="me-2 mb-1 text-muted">78%</span>
<div class="progress progress-sm w-100">
<div class="progress-bar bg-primary" role="progressbar" style="width: 78%;"></div>
</div>
</div>
</td>
<td class="d-none d-xl-table-cell text-end">
<a href="#" class="btn btn-light">View</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
```
看得出来，上面是一个仪表板页面，展示了基本的控件。
它的个人资料页面长这样：
```html
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Profile</h1>
<div class="row">
<div class="col-md-4 col-xl-3">
<div class="card mb-3">
<div class="card-header">
<h5 class="card-title mb-0">Profile Details</h5>
</div>
<div class="card-body text-center">
<img src="img/avatars/avatar-4.jpg" alt="Stacie Hall" class="img-fluid rounded-circle mb-2" width="128" height="128" />
<h5 class="card-title mb-0">Stacie Hall</h5>
<div class="text-muted mb-2">Lead Developer</div>
<div>
<a class="btn btn-primary btn-sm" href="#">Follow</a>
<a class="btn btn-primary btn-sm" href="#"><span data-lucide="message-square"></span> Message</a>
</div>
</div>
<hr class="my-0" />
<div class="card-body">
<h5 class="h6 card-title">Skills</h5>
<a href="#" class="badge badge-subtle-primary me-1 my-1">HTML</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">JavaScript</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">Sass</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">Angular</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">Vue</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">React</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">Redux</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">UI</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">UX</a>
</div>
<hr class="my-0" />
<div class="card-body">
<h5 class="h6 card-title">About</h5>
<ul class="list-unstyled mb-0">
<li class="mb-1"><span data-lucide="home" class="lucide-sm me-1"></span> Lives in <a href="#">San Francisco, SA</a></li>
<li class="mb-1"><span data-lucide="briefcase" class="lucide-sm me-1"></span> Works at <a href="#">GitHub</a></li>
<li class="mb-1"><span data-lucide="map-pin" class="lucide-sm me-1"></span> From <a href="#">Boston</a></li>
</ul>
</div>
<hr class="my-0" />
<div class="card-body">
<h5 class="h6 card-title">Elsewhere</h5>
<ul class="list-unstyled mb-0">
<li class="mb-1"><span class="fas fa-globe fa-fw me-1"></span> <a href="#">staciehall.co</a></li>
<li class="mb-1"><span class="fab fa-twitter fa-fw me-1"></span> <a href="#">Twitter</a></li>
<li class="mb-1"><span class="fab fa-facebook fa-fw me-1"></span> <a href="#">Facebook</a></li>
<li class="mb-1"><span class="fab fa-instagram fa-fw me-1"></span> <a href="#">Instagram</a></li>
<li class="mb-1"><span class="fab fa-linkedin fa-fw me-1"></span> <a href="#">LinkedIn</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-8 col-xl-9">
<div class="card">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Activities</h5>
</div>
<div class="card-body h-100">
<div class="d-flex align-items-start">
<img src="img/avatars/avatar-5.jpg" width="36" height="36" class="rounded-circle me-2" alt="Ashley Briggs">
<div class="flex-grow-1">
<small class="float-end">5m ago</small>
<strong>Ashley Briggs</strong> started following <strong>Stacie Hall</strong><br />
<small class="text-muted">Today 7:51 pm</small><br />
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Chris Wood">
<div class="flex-grow-1">
<small class="float-end">30m ago</small>
<strong>Chris Wood</strong> posted something on <strong>Stacie Hall</strong>'s timeline<br />
<small class="text-muted">Today 7:21 pm</small>
<div class="border text-sm text-muted p-2 mt-1">
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus
pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
</div>
<a href="#" class="btn btn-sm btn-danger mt-1"><i class="lucide-sm" data-lucide="heart"></i> Like</a>
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Stacie Hall">
<div class="flex-grow-1">
<small class="float-end">1h ago</small>
<strong>Stacie Hall</strong> posted a new blog<br />
<small class="text-muted">Today 6:35 pm</small>
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="Carl Jenkins">
<div class="flex-grow-1">
<small class="float-end">3h ago</small>
<strong>Carl Jenkins</strong> posted two photos on <strong>Stacie Hall</strong>'s timeline<br />
<small class="text-muted">Today 5:12 pm</small>
<div class="row g-0 mt-1">
<div class="col-6 col-md-4 col-lg-4 col-xl-3">
<img src="img/photos/unsplash-1.jpg" class="img-fluid pe-2" alt="Unsplash">
</div>
<div class="col-6 col-md-4 col-lg-4 col-xl-3">
<img src="img/photos/unsplash-2.jpg" class="img-fluid pe-2" alt="Unsplash">
</div>
</div>
<a href="#" class="btn btn-sm btn-danger mt-1"><i class="lucide-sm" data-lucide="heart"></i> Like</a>
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="Carl Jenkins">
<div class="flex-grow-1">
<small class="float-end">1d ago</small>
<strong>Carl Jenkins</strong> started following <strong>Stacie Hall</strong><br />
<small class="text-muted">Yesterday 3:12 pm</small>
<div class="d-flex align-items-start mt-1">
<a class="pe-3" href="#">
<img src="img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Stacie Hall">
</a>
<div class="flex-grow-1">
<div class="border text-sm text-muted p-2 mt-1">
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Stacie Hall">
<div class="flex-grow-1">
<small class="float-end">1d ago</small>
<strong>Stacie Hall</strong> posted a new blog<br />
<small class="text-muted">Yesterday 2:43 pm</small>
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Chris Wood">
<div class="flex-grow-1">
<small class="float-end">1d ago</small>
<strong>Chris Wood</strong> started following <strong>Stacie Hall</strong><br />
<small class="text-muted">Yesterdag 1:51 pm</small>
</div>
</div>
<hr />
<div class="d-grid">
<a href="#" class="btn btn-primary">Load more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
看得出来这是一个漂亮的个人资料页面。
它的登录页面长这样：
<div class="auth-full-page d-flex">
<div class="auth-form p-3">
<div class="text-center">
<h1 class="h2">Welcome back!</h1>
<p class="lead">
Sign in to your account to continue
</p>
</div>
<div class="mb-3">
<div class="d-grid gap-2 mb-3">
<a class="btn btn-facebook btn-lg position-relative shadow" href="dashboard-default.html">
<i class="fab fa-fw fa-facebook fs-3 float-start"></i>
<span class="position-absolute mx-auto w-100 left-0">Continue with Facebook</span>
</a>
<a class="btn btn-google btn-lg position-relative shadow" href="dashboard-default.html">
<i class="fab fa-fw fa-google fa-google-colored fs-3 float-start"></i>
<span class="position-absolute mx-auto w-100 left-0">Continue with Google</span>
</a>
<a class="btn btn-apple btn-lg position-relative shadow" href="dashboard-default.html">
<i class="fab fa-fw fa-apple fs-3 float-start"></i>
<span class="position-absolute mx-auto w-100 left-0">Continue with Apple</span>
</a> </div>
<div class="row">
<div class="col">
<hr>
</div>
<div class="col-auto text-uppercase d-flex align-items-center">Or</div>
<div class="col">
<hr>
</div>
</div>
<form>
<div class="mb-3">
<label class="form-label">Email</label>
<input class="form-control form-control-lg" type="email" name="email" placeholder="Enter your email" />
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input class="form-control form-control-lg" type="password" name="password" placeholder="Enter your password" />
<small>
<a href="auth-reset-password.html">Forgot password?</a>
</small>
</div>
<div>
<div class="form-check align-items-center">
<input id="customControlInline" type="checkbox" class="form-check-input" value="remember-me" name="remember-me" checked>
<label class="form-check-label text-small" for="customControlInline">Remember me</label>
</div>
</div>
<div class="d-grid gap-2 mt-3">
<a href="dashboard-default.html" class="btn btn-lg btn-primary">Sign in</a>
</div>
</form>
</div>
<div class="text-center">
Don't have an account? <a href="auth-sign-up.html">Sign up</a>
</div>
</div>
</div>
```
看得出来是个标准的登录页面。
它还示范了文件管理器的做法：
```
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">File Manager</h1>
<div class="row">
<div class="col-sm-5 col-xl-3">
<div class="card">
<div class="card-body">
<div class="d-grid mb-3">
<button class="btn btn-primary btn-lg"><i data-lucide="upload"></i> Upload File</button>
</div>
<ul class="list-group list-group-flush mb-3">
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="upload" class="me-2"></i>My Files
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="folder" class="me-2"></i>My Drive
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="Computer" class="me-2"></i>Computer
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="share" class="me-2"></i>Shared with me
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="clock" class="me-2"></i>Recent
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="star" class="me-2"></i>Starred
</a>
</li>
</ul>
<ul class="list-group list-group-flush mb-5">
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="inbox" class="me-2"></i>Spam
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="archive" class="me-2"></i>Archive
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="trash" class="me-2"></i>Bin
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="database" class="me-2"></i>Storage
</a>
</li>
</ul>
<h6 class="text-uppercase">Storage</h6>
<div class="progress progress-sm mb-2">
<div class="progress-bar progress-lg bg-danger" role="progressbar" style="width: 73%" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted font-12 mb-0">72.6 GB (73%) of 100 GB used</p>
</div>
</div>
</div>
<div class="col-sm-7 col-xl-9">
<div class="card">
<div class="card-header pb-0">
<div class="float-end fs-5 mt-2">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Share</a>
<a class="dropdown-item" href="#">Organise</a>
<a class="dropdown-item" href="#">Details</a>
</div>
</div>
</div>
<h5 class="card-title mt-2">
My Files
</h5>
</div>
<div class="card-body pb-0">
<div class="row">
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-warning" data-lucide="paintbrush-2"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Design</a>
</h5>
<p class="text-muted mb-0 text-truncate">12 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">8GB</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-success" data-lucide="code"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Development</a>
</h5>
<p class="text-muted mb-0 text-truncate">108 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">12GB</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-primary" data-lucide="hexagon"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Branding</a>
</h5>
<p class="text-muted mb-0 text-truncate">34 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">2GB</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-danger" data-lucide="layout-grid"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Applications</a>
</h5>
<p class="text-muted mb-0 text-truncate">8 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">26GB</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-info" data-lucide="circle-dollar-sign"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Finance</a>
</h5>
<p class="text-muted mb-0 text-truncate">50 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">9GB</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-primary" data-lucide="book-type"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Translations</a>
</h5>
<p class="text-muted mb-0 text-truncate">40 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">2GB</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-success" data-lucide="luggage"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Travel</a>
</h5>
<p class="text-muted mb-0 text-truncate">60 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">5GB</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-secondary" data-lucide="archive"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Backups</a>
</h5>
<p class="text-muted mb-0 text-truncate">320 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">16GB</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header pb-0">
<div class="row">
<div class="col-md-7">
<h5 class="card-title mt-2">
Recent Files
</h5>
</div>
<div class="col-md-5 mb-md-0">
<div class="input-group input-group-search">
<input type="text" class="form-control" placeholder="Search files…">
<button class="btn" type="button">
<i class="align-middle" data-lucide="search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th class="w-50">Name</th>
<th>Date Modified</th>
<th>Size</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file-code" class="me-2"></i>app.js </a> </td>
<td>April 15, 2024</td>
<td>25 KB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file-json" class="me-2"></i>styles.css </a> </td>
<td>February 28, 2024</td>
<td>12 KB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file-spreadsheet" class="me-2"></i>data.xlsx </a> </td>
<td>March 12, 2024</td>
<td>1 MB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file-audio" class="me-2"></i>audio.mp3 </a> </td>
<td>May 1, 2024</td>
<td>3 MB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file-video" class="me-2"></i>video.mp4 </a> </td>
<td>December 18, 2023</td>
<td>50 MB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file" class="me-2"></i>report.pdf </a> </td>
<td>November 20, 2023</td>
<td>5 MB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file" class="me-2"></i>presentation.pptx </a> </td>
<td>September 3, 2023</td>
<td>10 MB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file-text" class="me-2"></i>index.html </a> </td>
<td>August 8, 2023</td>
<td>9 KB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
```
也给出了基础的设置页面：
```html
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Settings</h1>
<div class="row">
<div class="col-md-3 col-xl-2">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Profile Settings</h5>
</div>
<div class="list-group list-group-flush" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#account" role="tab">
Account
</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#password" role="tab">
Password
</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
Privacy and safety
</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
Email notifications
</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
Web notifications
</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
Widgets
</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
Your data
</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
Delete account
</a>
</div>
</div>
</div>
<div class="col-md-9 col-xl-10">
<div class="tab-content">
<div class="tab-pane fade show active" id="account" role="tabpanel">
<div class="card">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Public info</h5>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="col-md-8">
<div class="mb-3">
<label for="inputUsername" class="form-label">Username</label>
<input type="text" class="form-control" id="inputUsername" placeholder="Username">
</div>
<div class="mb-3">
<label for="inputUsername" class="form-label">Biography</label>
<textarea rows="2" class="form-control" id="inputBio" placeholder="Tell something about yourself"></textarea>
</div>
</div>
<div class="col-md-4">
<div class="text-center">
<img alt="Chris Wood" src="img/avatars/avatar.jpg" class="rounded-circle img-responsive mt-2" width="128" height="128" />
<div class="mt-2">
<span class="btn btn-primary"><i class="fas fa-upload"></i> Upload</span>
</div>
<small>For best results, use an image at least 128px by 128px in .jpg format</small>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Private info</h5>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="mb-3 col-md-6">
<label for="inputFirstName" class="form-label">First name</label>
<input type="text" class="form-control" id="inputFirstName" placeholder="First name">
</div>
<div class="mb-3 col-md-6">
<label for="inputLastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Last name">
</div>
</div>
<div class="mb-3">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="mb-3">
<label for="inputAddress" class="form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="mb-3">
<label for="inputAddress2" class="form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="row">
<div class="mb-3 col-md-6">
<label for="inputCity" class="form-label">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="mb-3 col-md-4">
<label for="inputState" class="form-label">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="mb-3 col-md-2">
<label for="inputZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
<div class="tab-pane fade" id="password" role="tabpanel">
<div class="card">
<div class="card-body">
<h5 class="card-title">Password</h5>
<form>
<div class="mb-3">
<label for="inputPasswordCurrent" class="form-label">Current password</label>
<input type="password" class="form-control" id="inputPasswordCurrent">
<small><a href="#">Forgot your password?</a></small>
</div>
<div class="mb-3">
<label for="inputPasswordNew" class="form-label">New password</label>
<input type="password" class="form-control" id="inputPasswordNew">
</div>
<div class="mb-3">
<label for="inputPasswordNew2" class="form-label">Verify password</label>
<input type="password" class="form-control" id="inputPasswordNew2">
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
```
这些页面，只要按照它的标准，就写出来都非常漂亮。我想你已经能想象出这些页面布局多么漂亮合理。
我们现在一起来学习一下它的使用范式。虽然我知道它是标准的bootstrap，但我们要理解它是如何建设审美以构建这么漂亮的仪表板的。
它之所以看起来美观、专业，是因为它遵循了一套现代前端设计的范式和原则。我们来一起拆解和学习它，这样你就能得心应手地将它应用到你的 ASP.NET Core 项目中了。
简单来说，这个模板的“审美”主要建立在以下几个核心支柱上：
* 坚实的框架基础：Bootstrap 5。它提供了响应式网格系统、预设样式的组件和强大的工具类。
* 模块化的内容组织：以 卡片 (Card) 作为信息承载的基本单元。
* 一致且充裕的间距：通过 工具类 (Utility Classes) 实现统一的内外边距和元素间隔。
* 清晰的视觉层级：利用字体大小、颜色和布局来引导用户的注意力。
* 现代化的图标系统：使用 Lucide Icons，风格统一、简洁清晰。
-------
现在，既然我已经购买了，为了使用而继续扩展我自己的项目，我需要严格尊重模板里的主题。请你扮演一位非常尊重上面设计范式的公司高级工程师，也非常精通 ASP.NET Core 的最佳实践，开始缜密的执行这项工作。
另外，我已经配好了 ASP.NET Core 里的 Layout，在编写视图（Views\Index.cshtml) 的时候，其内容会自动被 `<main class="content"></main>` 包起来，而正确出现在他模板的核心位置。无需反复包一次。
重构的时候，考虑到 CSHTML 里有服务器代码和本地化代码，例如localizer，也包含了一些 ASP.NET Core 的标签，例如asp-for，我们要继续坚持我们的项目是服务器渲染。所以要保持原有的服务器渲染的功能，我们买模板只是单纯为了好看，不要舍本逐末，丢了核心功能。
* 例如，如果你要增加卡片的header，你也需要优先尊重服务器代码的范式，也就是用 @Localizer包起来需要呈现的string。当然你可以自由增加、编辑、删除无关业务的描述性文字。毕竟我本来写的就很差劲，一大堆无意义的文字，反复介绍。只要增加的文字好看，标准就行。
* 例如，如果你要重构表单 form，你也需要优先尊重服务器代码的范式，也就是用 <form asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post"> 等作为基础。
重构的时候，注意：我们在生成真正用于使用的业务代码，而不是模板的示例代码。所以不要编出来不存在的页面，不要编出来不存在的表单参数。我们是在真正将模板落地企业项目生产，而不是在产出代码示例。
现在，基于这些原则，重构我下面的代码：
```razor
@using Aiursoft.WebTools
@using Aiursoft.CSTools.Tools
@model Aiursoft.StatHub.Models.DashboardViewModels.IndexViewModel
@{
var showLast30 = ViewBag.Last30Seconds as bool? ?? false;
var unit = showLast30 ? "/s" : string.Empty;
}
<div class="jumbotron">
<div class="container">
<h1 class="display-4">Welcome, Admin!</h1>
<p class="lead">Here you can manage your clients and view your clients' status.</p>
</div>
</div>
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-md-12 mt-3 mb-3">
<div class="card mb-2">
<div class="card-body">
<h5 class="card-title">Client status</h5>
<div class="d-flex justify-content-center">
@* Center *@
<div class="btn-group btn-group-toggle" data-toggle="buttons">
@{
var cumulativeActive = showLast30 ? "" : "active";
var last30Active = showLast30 ? "active" : "";
}
<a class="btn btn-secondary @cumulativeActive" asp-controller="Home" asp-action="Index" asp-route-Last30Seconds="false">
Cumulative
</a>
<a class="btn btn-secondary @last30Active" asp-controller="Home" asp-action="Index" asp-route-Last30Seconds="true">
Last 30 seconds
</a>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover table-sm datatable" id="logTable">
<thead>
<tr>
<th>IP</th>
<th>Name</th>
<th>SKU</th>
<th>Boot at</th>
<th>Avg Load</th>
<th>CPU Usage</th>
<th>Used at</th>
<th>RAM Usage</th>
@if(showLast30)
{
<th>Net Receiving</th>
<th>Net Sending</th>
<th>Disk Used</th>
<th>Disk Reading</th>
<th>Disk Writing</th>
}
else
{
<th>Net Received</th>
<th>Net Sent</th>
<th>Disk Used</th>
<th>Disk Read</th>
<th>Disk Written</th>
}
<th>OS</th>
<th>More</th>
@* <th>Last Update</th> *@
@* <th>Version</th> *@
</tr>
</thead>
<tbody>
@foreach (var client in Model.Clients)
{
<tr>
<td>
@{
// Identify
var isOutDated = client.LastUpdate < DateTime.UtcNow.AddMinutes(-1);
// Load
var load = client.GetLoad();
var loadRate = load.Load15M * 30; // Usually Load < 3.33 is safe.
var colorLoad =
loadRate < 10 ? "bg-success":
loadRate < 15 ? "bg-info":
loadRate < 30 ? "bg-secondary":
loadRate < 60 ? "bg-warning":
"bg-danger";
var promptTextLoad = $"Load:\n1 min: {load.Load1M}\n5 min: {load.Load5M}\n15 min: {load.Load15M}";
// CPU
var cpu = client.GetCpuUsage();
var cpuRate = cpu.Ratio;
var promptText = $"CPU Usage:\nUser: {cpu.Usr}%\nSystem: {cpu.Sys}%\nIdle: {cpu.Idl}%\nWait: {cpu.Wai}%\nSteal: {cpu.Stl}%";
var color =
cpuRate < 5 ? "bg-success":
cpuRate < 10 ? "bg-info":
cpuRate < 20 ? "bg-secondary":
cpuRate < 40 ? "bg-warning":
"bg-danger";
// RAM
var mem = client.GetMemUsed();
// NetWork
var net = showLast30 ? client.GetNetworkLast30Seconds() : client.GetNetwork();
// Disk
var disk = showLast30 ? client.GetDiskLast30Seconds() : client.GetDisk();
var diskUseRatio = client.UsedRoot / (double)client.TotalRoot;
var message = $"{client.UsedRoot}GB / {client.TotalRoot}GB";
var diskColor =
diskUseRatio < 0.6 ? "bg-success":
diskUseRatio < 0.7 ? "bg-warning":
"bg-danger";
// OS
var osFirstTwoWords = string.Join(" ", client.OsName.Split(' ').Take(2)).Trim();
// Overall
var reason = isOutDated ? "Server is out of sync. " : "";
reason += loadRate > 60 ? "Load critical. " : loadRate > 30 ? "Load warning. " : "";
reason += cpuRate > 40 ? "CPU usage critical. " : cpuRate > 20 ? "CPU usage warning. " : "";
reason += diskUseRatio > 0.7 ? "Disk space critical. " : diskUseRatio > 0.6 ? "Disk space warning. " : "";
}
@if (isOutDated)
{
<div class="dot dot-secondary" data-toggle="tooltip" data-placement="bottom" title="@reason"></div>
}
else if (loadRate > 60 || cpuRate > 40 || diskUseRatio > 0.7)
{
<div class="dot dot-danger" data-toggle="tooltip" data-placement="bottom" title="@reason"></div>
}
else if (loadRate > 30 || cpuRate > 20 || diskUseRatio > 0.6)
{
<div class="dot dot-warning" data-toggle="tooltip" data-placement="bottom" title="@reason"></div>
}
else
{
<div class="dot dot-success"></div>
}
@client.Ip
</td>
<td>
@client.Hostname
@if (!string.IsNullOrWhiteSpace(client.Motd))
{
<span data-toggle="tooltip" data-placement="bottom" title="@client.Motd">✉️</span>
}
</td>
<td data-sort="@client.GetSkuInNumber()">@client.GetSku()</td>
<td data-utc-time="@client.BootTime.ToHtmlDateTime()" data-sort="@client.BootTime.Ticks">
</td>
@* Load *@
<td data-sort="@loadRate">
<div class="progress">
<div class="progress-bar-striped progress-bar-animated @colorLoad"
role="progressbar" style="width: @(loadRate)%" aria-valuenow="loadRate" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom"
title="@promptTextLoad"></div>
</div>
</td>
@* CPU *@
<td data-sort="@cpuRate">
<div class="progress">
<div class="progress-bar-striped progress-bar-animated @color"
role="progressbar" style="width: @(cpuRate)%" aria-valuenow="@cpuRate" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom"
title="@promptText"></div>
</div>
</td>
<td>
@if (cpuRate < 30)
{
<span class="badge badge-secondary">@(client.Process)</span>
}
else
{
<span class="badge badge-danger">@(client.Process)</span>
}
</td>
@* RAM *@
<td data-sort="@mem.UsedRate">
<div class="progress">
<div class="progress-bar-striped bg-success" role="progressbar" style="width: @(mem.UsedRate)%" aria-valuenow="@(mem.UsedRate)" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom" title="Used RAM: @mem.Used.HumanReadableSize()"></div>
<div class="progress-bar-striped bg-info" role="progressbar" style="width: @(mem.BufRate)%" aria-valuenow="@(mem.BufRate)" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom" title="Buffer RAM: @mem.Buf.HumanReadableSize()"></div>
<div class="progress-bar-striped bg-warning" role="progressbar" style="width: @(mem.CacheRate)%" aria-valuenow="@(mem.CacheRate)" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom" title="Cache RAM: @mem.Cache.HumanReadableSize()"></div>
</div>
</td>
@* NetWork *@
<td data-sort="@net.Recv">
@net.Recv.HumanReadableSize()@unit
</td>
<td data-sort="@net.Send">
@net.Send.HumanReadableSize()@unit
</td>
@* Disk *@
<td data-sort="@diskUseRatio">
<div class="progress">
<div class="progress-bar @diskColor" role="progressbar" style="width: @(diskUseRatio * 100)%" aria-valuenow="@(diskUseRatio * 100)" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom" title="@message">@(client.UsedRoot)GB</div>
</div>
<td data-sort="@disk.Read">
@disk.Read.HumanReadableSize()@unit
</td>
<td data-sort="@disk.Writ">
@disk.Writ.HumanReadableSize()@unit
</td>
<td>@osFirstTwoWords</td>
<td>
<a class="btn btn-primary btn-sm" asp-controller="Home" asp-action="Details" asp-route-id="@client.ClientId">Details</a>
</td>
@* <td data-utc-time="@client.LastUpdate.ToHtmlDateTime()" data-sort="@client.LastUpdate.Ticks"> *@
@* </td> *@
@* <td>@client.Version</td> *@
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
```
现在请你开始编写这段razor吧！
我最近购买了一个 HTML 模板，打算用来优化一下我 ASP.NET Core 项目的前端。我写的 html 都是原生的 ASP.NET Core 的，都太丑了。
所以，在开始之前，我们先学习一下这个模板。它的仪表板页面长这样：
<main class="content">
<div class="container-fluid p-0">
<div class="row mb-2 mb-xl-3">
<div class="col-auto d-none d-sm-block">
<h3>Dashboard</h3>
</div>
<div class="col-auto ms-auto text-end mt-n1">
<div class="dropdown me-2 d-inline-block position-relative">
<a class="btn btn-light bg-white shadow-sm dropdown-toggle" href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle mt-n1" data-lucide="calendar"></i> Today
</a>
<div class="dropdown-menu dropdown-menu-end">
<h6 class="dropdown-header">Settings</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div>
<button class="btn btn-primary shadow-sm">
<i class="align-middle" data-lucide="filter"> </i>
</button>
<button class="btn btn-primary shadow-sm">
<i class="align-middle" data-lucide="refresh-cw"> </i>
</button>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-6 col-xxl-3 d-flex">
<div class="card illustration flex-fill">
<div class="card-body p-0 d-flex flex-fill">
<div class="row g-0 w-100">
<div class="col-6">
<div class="illustration-text p-3 m-1">
<h4 class="illustration-text">Welcome Back, Chris!</h4>
<p class="mb-0">AppStack Dashboard</p>
</div>
</div>
<div class="col-6 align-self-end text-end">
<img src="img/illustrations/customer-support.png" alt="Customer Support" class="img-fluid illustration-img">
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-xxl-3 d-flex">
<div class="card flex-fill">
<div class="card-body py-4">
<div class="d-flex align-items-start">
<div class="flex-grow-1">
<h3 class="mb-2">$ 24.300</h3>
<p class="mb-2">Total Earnings</p>
<div class="mb-0">
<span class="badge badge-subtle-success me-2"> +5.35% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
<div class="d-inline-block ms-3">
<div class="stat">
<i class="align-middle text-success" data-lucide="dollar-sign"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-xxl-3 d-flex">
<div class="card flex-fill">
<div class="card-body py-4">
<div class="d-flex align-items-start">
<div class="flex-grow-1">
<h3 class="mb-2">43</h3>
<p class="mb-2">Pending Orders</p>
<div class="mb-0">
<span class="badge badge-subtle-danger me-2"> -4.25% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
<div class="d-inline-block ms-3">
<div class="stat">
<i class="align-middle text-danger" data-lucide="shopping-bag"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-xxl-3 d-flex">
<div class="card flex-fill">
<div class="card-body py-4">
<div class="d-flex align-items-start">
<div class="flex-grow-1">
<h3 class="mb-2">$ 18.700</h3>
<p class="mb-2">Total Revenue</p>
<div class="mb-0">
<span class="badge badge-subtle-success me-2"> +8.65% </span>
<span class="text-muted">Since last week</span>
</div>
</div>
<div class="d-inline-block ms-3">
<div class="stat">
<i class="align-middle text-info" data-lucide="dollar-sign"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-8 d-flex">
<div class="card flex-fill w-100">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Sales / Revenue</h5>
</div>
<div class="card-body d-flex w-100">
<div class="align-self-center chart chart-lg">
<canvas id="chartjs-dashboard-bar"></canvas>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 d-flex">
<div class="card flex-fill w-100">
<div class="card-header">
<span class="badge bg-info float-end">Today</span>
<h5 class="card-title mb-0">Daily feed</h5>
</div>
<div class="card-body">
<div class="d-flex align-items-start">
<img src="img/avatars/avatar-5.jpg" width="36" height="36" class="rounded-circle me-2" alt="Ashley Briggs">
<div class="flex-grow-1">
<small class="float-end">5m ago</small>
<strong>Ashley Briggs</strong> started following <strong>Stacie Hall</strong><br />
<small class="text-muted">Today 7:51 pm</small><br />
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Chris Wood">
<div class="flex-grow-1">
<small class="float-end">30m ago</small>
<strong>Chris Wood</strong> posted something on <strong>Stacie Hall</strong>'s timeline<br />
<small class="text-muted">Today 7:21 pm</small>
<div class="border text-sm text-muted p-2 mt-1">
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing...
</div>
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Stacie Hall">
<div class="flex-grow-1">
<small class="float-end">1h ago</small>
<strong>Stacie Hall</strong> posted a new blog<br />
<small class="text-muted">Today 6:35 pm</small>
</div>
</div>
<hr />
<div class="d-grid">
<a href="#" class="btn btn-primary">Load more</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-6 col-xl-4 d-flex">
<div class="card flex-fill">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Calendar</h5>
</div>
<div class="card-body d-flex">
<div class="align-self-center w-100">
<div class="chart">
<div id="calendar-dashboard"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-xl-4 d-none d-xl-flex">
<div class="card flex-fill w-100">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Weekly sales</h5>
</div>
<div class="card-body d-flex">
<div class="align-self-center w-100">
<div class="py-3">
<div class="chart chart-xs">
<canvas id="chartjs-dashboard-pie"></canvas>
</div>
</div>
<table class="table mb-0">
<thead>
<tr>
<th>Source</th>
<th class="text-end">Revenue</th>
<th class="text-end">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td><i class="fas fa-square-full text-primary"></i> Direct</td>
<td class="text-end">$ 2602</td>
<td class="text-end text-success">+43%</td>
</tr>
<tr>
<td><i class="fas fa-square-full text-warning"></i> Affiliate</td>
<td class="text-end">$ 1253</td>
<td class="text-end text-success">+13%</td>
</tr>
<tr>
<td><i class="fas fa-square-full text-danger"></i> E-mail</td>
<td class="text-end">$ 541</td>
<td class="text-end text-success">+24%</td>
</tr>
<tr>
<td><i class="fas fa-square-full text-dark"></i> Other</td>
<td class="text-end">$ 1465</td>
<td class="text-end text-success">+11%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-4 d-flex">
<div class="card flex-fill w-100">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Appointments</h5>
</div>
<div class="card-body">
<ul class="timeline">
<li class="timeline-item">
<strong>Chat with Carl and Ashley</strong>
<span class="float-end text-muted text-sm">30m ago</span>
<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris...</p>
</li>
<li class="timeline-item">
<strong>The big launch</strong>
<span class="float-end text-muted text-sm">2h ago</span>
<p>Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum
nunc...</p>
</li>
<li class="timeline-item">
<strong>Coffee break</strong>
<span class="float-end text-muted text-sm">3h ago</span>
<p>Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada...</p>
</li>
<li class="timeline-item">
<strong>Chat with team</strong>
<span class="float-end text-muted text-sm">30m ago</span>
<p>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum...</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="card flex-fill">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Latest Projects</h5>
</div>
<table class="table table-borderless my-0">
<thead>
<tr>
<th>Name</th>
<th class="d-none d-xxl-table-cell">Company</th>
<th class="d-none d-xl-table-cell">Author</th>
<th>Status</th>
<th class="d-none d-xl-table-cell text-end">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="d-flex">
<div class="flex-shrink-0">
<div class="bg-body-tertiary rounded-2">
<img class="p-2" src="img/brands/brand-1.svg">
</div>
</div>
<div class="flex-grow-1 ms-3">
<strong>Project Apollo</strong>
<div class="text-muted">
Web, UI/UX Design
</div>
</div>
</div>
</td>
<td class="d-none d-xxl-table-cell">
<strong>Gantos</strong>
<div class="text-muted">
Real Estate
</div>
</td>
<td class="d-none d-xl-table-cell">
<strong>Carl Jenkins</strong>
<div class="text-muted">
HTML, JS, React
</div>
</td>
<td>
<div class="d-flex flex-column w-100">
<span class="me-2 mb-1 text-muted">65%</span>
<div class="progress progress-sm w-100">
<div class="progress-bar bg-success" role="progressbar" style="width: 65%;"></div>
</div>
</div>
</td>
<td class="d-none d-xl-table-cell text-end">
<a href="#" class="btn btn-light">View</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="flex-shrink-0">
<div class="bg-body-tertiary rounded-2">
<img class="p-2" src="img/brands/brand-2.svg">
</div>
</div>
<div class="flex-grow-1 ms-3">
<strong>Project Bongo</strong>
<div class="text-muted">
Web
</div>
</div>
</div>
</td>
<td class="d-none d-xxl-table-cell">
<strong>Adray Transportation</strong>
<div class="text-muted">
Transportation
</div>
</td>
<td class="d-none d-xl-table-cell">
<strong>Bertha Martin</strong>
<div class="text-muted">
HTML, JS, Vue
</div>
</td>
<td>
<div class="d-flex flex-column w-100">
<span class="me-2 mb-1 text-muted">33%</span>
<div class="progress progress-sm w-100">
<div class="progress-bar bg-danger" role="progressbar" style="width: 33%;"></div>
</div>
</div>
</td>
<td class="d-none d-xl-table-cell text-end">
<a href="#" class="btn btn-light">View</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="flex-shrink-0">
<div class="bg-body-tertiary rounded-2">
<img class="p-2" src="img/brands/brand-3.svg">
</div>
</div>
<div class="flex-grow-1 ms-3">
<strong>Project Canary</strong>
<div class="text-muted">
Web, UI/UX Design
</div>
</div>
</div>
</td>
<td class="d-none d-xxl-table-cell">
<strong>Evans</strong>
<div class="text-muted">
Insurance
</div>
</td>
<td class="d-none d-xl-table-cell">
<strong>Stacie Hall</strong>
<div class="text-muted">
HTML, JS, Laravel
</div>
</td>
<td>
<div class="d-flex flex-column w-100">
<span class="me-2 mb-1 text-muted">50%</span>
<div class="progress progress-sm w-100">
<div class="progress-bar bg-warning" role="progressbar" style="width: 50%;"></div>
</div>
</div>
</td>
<td class="d-none d-xl-table-cell text-end">
<a href="#" class="btn btn-light">View</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="flex-shrink-0">
<div class="bg-body-tertiary rounded-2">
<img class="p-2" src="img/brands/brand-4.svg">
</div>
</div>
<div class="flex-grow-1 ms-3">
<strong>Project Edison</strong>
<div class="text-muted">
UI/UX Design
</div>
</div>
</div>
</td>
<td class="d-none d-xxl-table-cell">
<strong>Monsource Investment Group</strong>
<div class="text-muted">
Finance
</div>
</td>
<td class="d-none d-xl-table-cell">
<strong>Carl Jenkins</strong>
<div class="text-muted">
HTML, JS, React
</div>
</td>
<td>
<div class="d-flex flex-column w-100">
<span class="me-2 mb-1 text-muted">80%</span>
<div class="progress progress-sm w-100">
<div class="progress-bar bg-success" role="progressbar" style="width: 80%;"></div>
</div>
</div>
</td>
<td class="d-none d-xl-table-cell text-end">
<a href="#" class="btn btn-light">View</a>
</td>
</tr>
<tr>
<td>
<div class="d-flex">
<div class="flex-shrink-0">
<div class="bg-body-tertiary rounded-2">
<img class="p-2" src="img/brands/brand-5.svg">
</div>
</div>
<div class="flex-grow-1 ms-3">
<strong>Project Indigo</strong>
<div class="text-muted">
Web, UI/UX Design
</div>
</div>
</div>
</td>
<td class="d-none d-xxl-table-cell">
<strong>Edwards</strong>
<div class="text-muted">
Retail
</div>
</td>
<td class="d-none d-xl-table-cell">
<strong>Ashley Briggs</strong>
<div class="text-muted">
HTML, JS, Vue
</div>
</td>
<td>
<div class="d-flex flex-column w-100">
<span class="me-2 mb-1 text-muted">78%</span>
<div class="progress progress-sm w-100">
<div class="progress-bar bg-primary" role="progressbar" style="width: 78%;"></div>
</div>
</div>
</td>
<td class="d-none d-xl-table-cell text-end">
<a href="#" class="btn btn-light">View</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</main>
看得出来，上面是一个仪表板页面，展示了基本的控件。
它的个人资料页面长这样：
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Profile</h1>
<div class="row">
<div class="col-md-4 col-xl-3">
<div class="card mb-3">
<div class="card-header">
<h5 class="card-title mb-0">Profile Details</h5>
</div>
<div class="card-body text-center">
<img src="img/avatars/avatar-4.jpg" alt="Stacie Hall" class="img-fluid rounded-circle mb-2" width="128" height="128" />
<h5 class="card-title mb-0">Stacie Hall</h5>
<div class="text-muted mb-2">Lead Developer</div>
<div>
<a class="btn btn-primary btn-sm" href="#">Follow</a>
<a class="btn btn-primary btn-sm" href="#"><span data-lucide="message-square"></span> Message</a>
</div>
</div>
<hr class="my-0" />
<div class="card-body">
<h5 class="h6 card-title">Skills</h5>
<a href="#" class="badge badge-subtle-primary me-1 my-1">HTML</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">JavaScript</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">Sass</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">Angular</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">Vue</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">React</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">Redux</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">UI</a>
<a href="#" class="badge badge-subtle-primary me-1 my-1">UX</a>
</div>
<hr class="my-0" />
<div class="card-body">
<h5 class="h6 card-title">About</h5>
<ul class="list-unstyled mb-0">
<li class="mb-1"><span data-lucide="home" class="lucide-sm me-1"></span> Lives in <a href="#">San Francisco, SA</a></li>
<li class="mb-1"><span data-lucide="briefcase" class="lucide-sm me-1"></span> Works at <a href="#">GitHub</a></li>
<li class="mb-1"><span data-lucide="map-pin" class="lucide-sm me-1"></span> From <a href="#">Boston</a></li>
</ul>
</div>
<hr class="my-0" />
<div class="card-body">
<h5 class="h6 card-title">Elsewhere</h5>
<ul class="list-unstyled mb-0">
<li class="mb-1"><span class="fas fa-globe fa-fw me-1"></span> <a href="#">staciehall.co</a></li>
<li class="mb-1"><span class="fab fa-twitter fa-fw me-1"></span> <a href="#">Twitter</a></li>
<li class="mb-1"><span class="fab fa-facebook fa-fw me-1"></span> <a href="#">Facebook</a></li>
<li class="mb-1"><span class="fab fa-instagram fa-fw me-1"></span> <a href="#">Instagram</a></li>
<li class="mb-1"><span class="fab fa-linkedin fa-fw me-1"></span> <a href="#">LinkedIn</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-8 col-xl-9">
<div class="card">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Activities</h5>
</div>
<div class="card-body h-100">
<div class="d-flex align-items-start">
<img src="img/avatars/avatar-5.jpg" width="36" height="36" class="rounded-circle me-2" alt="Ashley Briggs">
<div class="flex-grow-1">
<small class="float-end">5m ago</small>
<strong>Ashley Briggs</strong> started following <strong>Stacie Hall</strong><br />
<small class="text-muted">Today 7:51 pm</small><br />
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Chris Wood">
<div class="flex-grow-1">
<small class="float-end">30m ago</small>
<strong>Chris Wood</strong> posted something on <strong>Stacie Hall</strong>'s timeline<br />
<small class="text-muted">Today 7:21 pm</small>
<div class="border text-sm text-muted p-2 mt-1">
Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus
pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
</div>
<a href="#" class="btn btn-sm btn-danger mt-1"><i class="lucide-sm" data-lucide="heart"></i> Like</a>
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Stacie Hall">
<div class="flex-grow-1">
<small class="float-end">1h ago</small>
<strong>Stacie Hall</strong> posted a new blog<br />
<small class="text-muted">Today 6:35 pm</small>
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="Carl Jenkins">
<div class="flex-grow-1">
<small class="float-end">3h ago</small>
<strong>Carl Jenkins</strong> posted two photos on <strong>Stacie Hall</strong>'s timeline<br />
<small class="text-muted">Today 5:12 pm</small>
<div class="row g-0 mt-1">
<div class="col-6 col-md-4 col-lg-4 col-xl-3">
<img src="img/photos/unsplash-1.jpg" class="img-fluid pe-2" alt="Unsplash">
</div>
<div class="col-6 col-md-4 col-lg-4 col-xl-3">
<img src="img/photos/unsplash-2.jpg" class="img-fluid pe-2" alt="Unsplash">
</div>
</div>
<a href="#" class="btn btn-sm btn-danger mt-1"><i class="lucide-sm" data-lucide="heart"></i> Like</a>
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar-2.jpg" width="36" height="36" class="rounded-circle me-2" alt="Carl Jenkins">
<div class="flex-grow-1">
<small class="float-end">1d ago</small>
<strong>Carl Jenkins</strong> started following <strong>Stacie Hall</strong><br />
<small class="text-muted">Yesterday 3:12 pm</small>
<div class="d-flex align-items-start mt-1">
<a class="pe-3" href="#">
<img src="img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Stacie Hall">
</a>
<div class="flex-grow-1">
<div class="border text-sm text-muted p-2 mt-1">
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar-4.jpg" width="36" height="36" class="rounded-circle me-2" alt="Stacie Hall">
<div class="flex-grow-1">
<small class="float-end">1d ago</small>
<strong>Stacie Hall</strong> posted a new blog<br />
<small class="text-muted">Yesterday 2:43 pm</small>
</div>
</div>
<hr />
<div class="d-flex align-items-start">
<img src="img/avatars/avatar.jpg" width="36" height="36" class="rounded-circle me-2" alt="Chris Wood">
<div class="flex-grow-1">
<small class="float-end">1d ago</small>
<strong>Chris Wood</strong> started following <strong>Stacie Hall</strong><br />
<small class="text-muted">Yesterdag 1:51 pm</small>
</div>
</div>
<hr />
<div class="d-grid">
<a href="#" class="btn btn-primary">Load more</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
看得出来这是一个漂亮的个人资料页面。
它的登录页面长这样：
<div class="auth-full-page d-flex">
<div class="auth-form p-3">
<div class="text-center">
<h1 class="h2">Welcome back!</h1>
<p class="lead">
Sign in to your account to continue
</p>
</div>
<div class="mb-3">
<div class="d-grid gap-2 mb-3">
<a class="btn btn-facebook btn-lg position-relative shadow" href="dashboard-default.html">
<i class="fab fa-fw fa-facebook fs-3 float-start"></i>
<span class="position-absolute mx-auto w-100 left-0">Continue with Facebook</span>
</a>
<a class="btn btn-google btn-lg position-relative shadow" href="dashboard-default.html">
<i class="fab fa-fw fa-google fa-google-colored fs-3 float-start"></i>
<span class="position-absolute mx-auto w-100 left-0">Continue with Google</span>
</a>
<a class="btn btn-apple btn-lg position-relative shadow" href="dashboard-default.html">
<i class="fab fa-fw fa-apple fs-3 float-start"></i>
<span class="position-absolute mx-auto w-100 left-0">Continue with Apple</span>
</a> </div>
<div class="row">
<div class="col">
<hr>
</div>
<div class="col-auto text-uppercase d-flex align-items-center">Or</div>
<div class="col">
<hr>
</div>
</div>
<form>
<div class="mb-3">
<label class="form-label">Email</label>
<input class="form-control form-control-lg" type="email" name="email" placeholder="Enter your email" />
</div>
<div class="mb-3">
<label class="form-label">Password</label>
<input class="form-control form-control-lg" type="password" name="password" placeholder="Enter your password" />
<small>
<a href="auth-reset-password.html">Forgot password?</a>
</small>
</div>
<div>
<div class="form-check align-items-center">
<input id="customControlInline" type="checkbox" class="form-check-input" value="remember-me" name="remember-me" checked>
<label class="form-check-label text-small" for="customControlInline">Remember me</label>
</div>
</div>
<div class="d-grid gap-2 mt-3">
<a href="dashboard-default.html" class="btn btn-lg btn-primary">Sign in</a>
</div>
</form>
</div>
<div class="text-center">
Don't have an account? <a href="auth-sign-up.html">Sign up</a>
</div>
</div>
</div>
看得出来是个标准的登录页面。
它还示范了文件管理器的做法：
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">File Manager</h1>
<div class="row">
<div class="col-sm-5 col-xl-3">
<div class="card">
<div class="card-body">
<div class="d-grid mb-3">
<button class="btn btn-primary btn-lg"><i data-lucide="upload"></i> Upload File</button>
</div>
<ul class="list-group list-group-flush mb-3">
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="upload" class="me-2"></i>My Files
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="folder" class="me-2"></i>My Drive
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="Computer" class="me-2"></i>Computer
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="share" class="me-2"></i>Shared with me
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="clock" class="me-2"></i>Recent
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="star" class="me-2"></i>Starred
</a>
</li>
</ul>
<ul class="list-group list-group-flush mb-5">
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="inbox" class="me-2"></i>Spam
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="archive" class="me-2"></i>Archive
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="trash" class="me-2"></i>Bin
</a>
</li>
<li class="list-group-item px-2">
<a href="#" class="text-reset">
<i data-lucide="database" class="me-2"></i>Storage
</a>
</li>
</ul>
<h6 class="text-uppercase">Storage</h6>
<div class="progress progress-sm mb-2">
<div class="progress-bar progress-lg bg-danger" role="progressbar" style="width: 73%" aria-valuenow="73" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted font-12 mb-0">72.6 GB (73%) of 100 GB used</p>
</div>
</div>
</div>
<div class="col-sm-7 col-xl-9">
<div class="card">
<div class="card-header pb-0">
<div class="float-end fs-5 mt-2">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Share</a>
<a class="dropdown-item" href="#">Organise</a>
<a class="dropdown-item" href="#">Details</a>
</div>
</div>
</div>
<h5 class="card-title mt-2">
My Files
</h5>
</div>
<div class="card-body pb-0">
<div class="row">
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-warning" data-lucide="paintbrush-2"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Design</a>
</h5>
<p class="text-muted mb-0 text-truncate">12 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">8GB</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-success" data-lucide="code"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Development</a>
</h5>
<p class="text-muted mb-0 text-truncate">108 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">12GB</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-primary" data-lucide="hexagon"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Branding</a>
</h5>
<p class="text-muted mb-0 text-truncate">34 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">2GB</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-danger" data-lucide="layout-grid"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Applications</a>
</h5>
<p class="text-muted mb-0 text-truncate">8 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">26GB</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-info" data-lucide="circle-dollar-sign"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Finance</a>
</h5>
<p class="text-muted mb-0 text-truncate">50 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">9GB</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-primary" data-lucide="book-type"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Translations</a>
</h5>
<p class="text-muted mb-0 text-truncate">40 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">2GB</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-success" data-lucide="luggage"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Travel</a>
</h5>
<p class="text-muted mb-0 text-truncate">60 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">5GB</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-6 col-xxl-3">
<div class="card shadow-none border">
<div class="card-body p-3">
<div class="float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static" class="outline-0 text-reset">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Open</a>
<a class="dropdown-item" href="#">Edit</a>
<a class="dropdown-item" href="#">Delete</a>
</div>
</div>
</div>
<i class="align-middle fs-1 mb-3 text-secondary" data-lucide="archive"></i>
<div class="d-flex w-100">
<div class="overflow-hidden me-auto">
<h5 class="mb-1">
<a href="#" class="text-body text-truncate">Backups</a>
</h5>
<p class="text-muted mb-0 text-truncate">320 Files</p>
</div>
<div class="align-self-end ms-2">
<p class="text-muted mb-0">16GB</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header pb-0">
<div class="row">
<div class="col-md-7">
<h5 class="card-title mt-2">
Recent Files
</h5>
</div>
<div class="col-md-5 mb-md-0">
<div class="input-group input-group-search">
<input type="text" class="form-control" placeholder="Search files…">
<button class="btn" type="button">
<i class="align-middle" data-lucide="search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="card-body">
<table class="table">
<thead>
<tr>
<th class="w-50">Name</th>
<th>Date Modified</th>
<th>Size</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file-code" class="me-2"></i>app.js </a> </td>
<td>April 15, 2024</td>
<td>25 KB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file-json" class="me-2"></i>styles.css </a> </td>
<td>February 28, 2024</td>
<td>12 KB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file-spreadsheet" class="me-2"></i>data.xlsx </a> </td>
<td>March 12, 2024</td>
<td>1 MB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file-audio" class="me-2"></i>audio.mp3 </a> </td>
<td>May 1, 2024</td>
<td>3 MB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file-video" class="me-2"></i>video.mp4 </a> </td>
<td>December 18, 2023</td>
<td>50 MB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file" class="me-2"></i>report.pdf </a> </td>
<td>November 20, 2023</td>
<td>5 MB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file" class="me-2"></i>presentation.pptx </a> </td>
<td>September 3, 2023</td>
<td>10 MB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
<tr>
<td> <a href="#" class="text-reset"> <i data-lucide="file-text" class="me-2"></i>index.html </a> </td>
<td>August 8, 2023</td>
<td>9 KB</td>
<td class="text-end"> <button type="button" class="btn btn-light">View</button> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
也给出了基础的设置页面：
<main class="content">
<div class="container-fluid p-0">
<h1 class="h3 mb-3">Settings</h1>
<div class="row">
<div class="col-md-3 col-xl-2">
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">Profile Settings</h5>
</div>
<div class="list-group list-group-flush" role="tablist">
<a class="list-group-item list-group-item-action active" data-bs-toggle="list" href="#account" role="tab">
Account
</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#password" role="tab">
Password
</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
Privacy and safety
</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
Email notifications
</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
Web notifications
</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
Widgets
</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
Your data
</a>
<a class="list-group-item list-group-item-action" data-bs-toggle="list" href="#" role="tab">
Delete account
</a>
</div>
</div>
</div>
<div class="col-md-9 col-xl-10">
<div class="tab-content">
<div class="tab-pane fade show active" id="account" role="tabpanel">
<div class="card">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Public info</h5>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="col-md-8">
<div class="mb-3">
<label for="inputUsername" class="form-label">Username</label>
<input type="text" class="form-control" id="inputUsername" placeholder="Username">
</div>
<div class="mb-3">
<label for="inputUsername" class="form-label">Biography</label>
<textarea rows="2" class="form-control" id="inputBio" placeholder="Tell something about yourself"></textarea>
</div>
</div>
<div class="col-md-4">
<div class="text-center">
<img alt="Chris Wood" src="img/avatars/avatar.jpg" class="rounded-circle img-responsive mt-2" width="128" height="128" />
<div class="mt-2">
<span class="btn btn-primary"><i class="fas fa-upload"></i> Upload</span>
</div>
<small>For best results, use an image at least 128px by 128px in .jpg format</small>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
<div class="card">
<div class="card-header">
<div class="card-actions float-end">
<div class="dropdown position-relative">
<a href="#" data-bs-toggle="dropdown" data-bs-display="static">
<i class="align-middle" data-lucide="more-horizontal"></i>
</a>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<h5 class="card-title mb-0">Private info</h5>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="mb-3 col-md-6">
<label for="inputFirstName" class="form-label">First name</label>
<input type="text" class="form-control" id="inputFirstName" placeholder="First name">
</div>
<div class="mb-3 col-md-6">
<label for="inputLastName" class="form-label">Last name</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Last name">
</div>
</div>
<div class="mb-3">
<label for="inputEmail4" class="form-label">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="mb-3">
<label for="inputAddress" class="form-label">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="mb-3">
<label for="inputAddress2" class="form-label">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="row">
<div class="mb-3 col-md-6">
<label for="inputCity" class="form-label">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="mb-3 col-md-4">
<label for="inputState" class="form-label">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="mb-3 col-md-2">
<label for="inputZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
<div class="tab-pane fade" id="password" role="tabpanel">
<div class="card">
<div class="card-body">
<h5 class="card-title">Password</h5>
<form>
<div class="mb-3">
<label for="inputPasswordCurrent" class="form-label">Current password</label>
<input type="password" class="form-control" id="inputPasswordCurrent">
<small><a href="#">Forgot your password?</a></small>
</div>
<div class="mb-3">
<label for="inputPasswordNew" class="form-label">New password</label>
<input type="password" class="form-control" id="inputPasswordNew">
</div>
<div class="mb-3">
<label for="inputPasswordNew2" class="form-label">Verify password</label>
<input type="password" class="form-control" id="inputPasswordNew2">
</div>
<button type="submit" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
这些页面，只要按照它的标准，就写出来都非常漂亮。我想你已经能想象出这些页面布局多么漂亮合理。
我们现在一起来学习一下它的使用范式。虽然我知道它是标准的bootstrap，但我们要理解它是如何建设审美以构建这么漂亮的仪表板的。
它之所以看起来美观、专业，是因为它遵循了一套现代前端设计的范式和原则。我们来一起拆解和学习它，这样你就能得心应手地将它应用到你的 ASP.NET Core 项目中了。
简单来说，这个模板的“审美”主要建立在以下几个核心支柱上：
- 坚实的框架基础：Bootstrap 5。它提供了响应式网格系统、预设样式的组件和强大的工具类。
- 模块化的内容组织：以 卡片 (Card) 作为信息承载的基本单元。
- 一致且充裕的间距：通过 工具类 (Utility Classes) 实现统一的内外边距和元素间隔。
- 清晰的视觉层级：利用字体大小、颜色和布局来引导用户的注意力。
- 现代化的图标系统：使用 Lucide Icons，风格统一、简洁清晰。
现在，既然我已经购买了，为了使用而继续扩展我自己的项目，我需要严格尊重模板里的主题。请你扮演一位非常尊重上面设计范式的公司高级工程师，也非常精通 ASP.NET Core 的最佳实践，开始缜密的执行这项工作。
另外，我已经配好了 ASP.NET Core 里的 Layout，在编写视图（Views\Index.cshtml) 的时候，其内容会自动被 <main class="content"></main> 包起来，而正确出现在他模板的核心位置。无需反复包一次。
重构的时候，考虑到 CSHTML 里有服务器代码和本地化代码，例如localizer，也包含了一些 ASP.NET Core 的标签，例如asp-for，我们要继续坚持我们的项目是服务器渲染。所以要保持原有的服务器渲染的功能，我们买模板只是单纯为了好看，不要舍本逐末，丢了核心功能。
- 例如，如果你要增加卡片的header，你也需要优先尊重服务器代码的范式，也就是用 @Localizer包起来需要呈现的string。当然你可以自由增加、编辑、删除无关业务的描述性文字。毕竟我本来写的就很差劲，一大堆无意义的文字，反复介绍。只要增加的文字好看，标准就行。
- 例如，如果你要重构表单 form，你也需要优先尊重服务器代码的范式，也就是用 <form asp-controller="Account" asp-action="Login" asp-route-returnurl="@ViewData["ReturnUrl"]" method="post"> 等作为基础。
重构的时候，注意：我们在生成真正用于使用的业务代码，而不是模板的示例代码。所以不要编出来不存在的页面，不要编出来不存在的表单参数。我们是在真正将模板落地企业项目生产，而不是在产出代码示例。
现在，基于这些原则，重构我下面的代码：
@using Aiursoft.WebTools
@using Aiursoft.CSTools.Tools
@model Aiursoft.StatHub.Models.DashboardViewModels.IndexViewModel
@{
var showLast30 = ViewBag.Last30Seconds as bool? ?? false;
var unit = showLast30 ? "/s" : string.Empty;
}
<div class="jumbotron">
<div class="container">
<h1 class="display-4">Welcome, Admin!</h1>
<p class="lead">Here you can manage your clients and view your clients' status.</p>
</div>
</div>
<div class="container-fluid">
<div class="row no-gutters">
<div class="col-md-12 mt-3 mb-3">
<div class="card mb-2">
<div class="card-body">
<h5 class="card-title">Client status</h5>
<div class="d-flex justify-content-center">
@* Center *@
<div class="btn-group btn-group-toggle" data-toggle="buttons">
@{
var cumulativeActive = showLast30 ? "" : "active";
var last30Active = showLast30 ? "active" : "";
}
<a class="btn btn-secondary @cumulativeActive" asp-controller="Home" asp-action="Index" asp-route-Last30Seconds="false">
Cumulative
</a>
<a class="btn btn-secondary @last30Active" asp-controller="Home" asp-action="Index" asp-route-Last30Seconds="true">
Last 30 seconds
</a>
</div>
</div>
<div class="table-responsive">
<table class="table table-hover table-sm datatable" id="logTable">
<thead>
<tr>
<th>IP</th>
<th>Name</th>
<th>SKU</th>
<th>Boot at</th>
<th>Avg Load</th>
<th>CPU Usage</th>
<th>Used at</th>
<th>RAM Usage</th>
@if(showLast30)
{
<th>Net Receiving</th>
<th>Net Sending</th>
<th>Disk Used</th>
<th>Disk Reading</th>
<th>Disk Writing</th>
}
else
{
<th>Net Received</th>
<th>Net Sent</th>
<th>Disk Used</th>
<th>Disk Read</th>
<th>Disk Written</th>
}
<th>OS</th>
<th>More</th>
@* <th>Last Update</th> *@
@* <th>Version</th> *@
</tr>
</thead>
<tbody>
@foreach (var client in Model.Clients)
{
<tr>
<td>
@{
// Identify
var isOutDated = client.LastUpdate < DateTime.UtcNow.AddMinutes(-1);
// Load
var load = client.GetLoad();
var loadRate = load.Load15M * 30; // Usually Load < 3.33 is safe.
var colorLoad =
loadRate < 10 ? "bg-success":
loadRate < 15 ? "bg-info":
loadRate < 30 ? "bg-secondary":
loadRate < 60 ? "bg-warning":
"bg-danger";
var promptTextLoad = $"Load:\n1 min: {load.Load1M}\n5 min: {load.Load5M}\n15 min: {load.Load15M}";
// CPU
var cpu = client.GetCpuUsage();
var cpuRate = cpu.Ratio;
var promptText = $"CPU Usage:\nUser: {cpu.Usr}%\nSystem: {cpu.Sys}%\nIdle: {cpu.Idl}%\nWait: {cpu.Wai}%\nSteal: {cpu.Stl}%";
var color =
cpuRate < 5 ? "bg-success":
cpuRate < 10 ? "bg-info":
cpuRate < 20 ? "bg-secondary":
cpuRate < 40 ? "bg-warning":
"bg-danger";
// RAM
var mem = client.GetMemUsed();
// NetWork
var net = showLast30 ? client.GetNetworkLast30Seconds() : client.GetNetwork();
// Disk
var disk = showLast30 ? client.GetDiskLast30Seconds() : client.GetDisk();
var diskUseRatio = client.UsedRoot / (double)client.TotalRoot;
var message = $"{client.UsedRoot}GB / {client.TotalRoot}GB";
var diskColor =
diskUseRatio < 0.6 ? "bg-success":
diskUseRatio < 0.7 ? "bg-warning":
"bg-danger";
// OS
var osFirstTwoWords = string.Join(" ", client.OsName.Split(' ').Take(2)).Trim();
// Overall
var reason = isOutDated ? "Server is out of sync. " : "";
reason += loadRate > 60 ? "Load critical. " : loadRate > 30 ? "Load warning. " : "";
reason += cpuRate > 40 ? "CPU usage critical. " : cpuRate > 20 ? "CPU usage warning. " : "";
reason += diskUseRatio > 0.7 ? "Disk space critical. " : diskUseRatio > 0.6 ? "Disk space warning. " : "";
}
@if (isOutDated)
{
<div class="dot dot-secondary" data-toggle="tooltip" data-placement="bottom" title="@reason"></div>
}
else if (loadRate > 60 || cpuRate > 40 || diskUseRatio > 0.7)
{
<div class="dot dot-danger" data-toggle="tooltip" data-placement="bottom" title="@reason"></div>
}
else if (loadRate > 30 || cpuRate > 20 || diskUseRatio > 0.6)
{
<div class="dot dot-warning" data-toggle="tooltip" data-placement="bottom" title="@reason"></div>
}
else
{
<div class="dot dot-success"></div>
}
@client.Ip
</td>
<td>
@client.Hostname
@if (!string.IsNullOrWhiteSpace(client.Motd))
{
<span data-toggle="tooltip" data-placement="bottom" title="@client.Motd">✉️</span>
}
</td>
<td data-sort="@client.GetSkuInNumber()">@client.GetSku()</td>
<td data-utc-time="@client.BootTime.ToHtmlDateTime()" data-sort="@client.BootTime.Ticks">
</td>
@* Load *@
<td data-sort="@loadRate">
<div class="progress">
<div class="progress-bar-striped progress-bar-animated @colorLoad"
role="progressbar" style="width: @(loadRate)%" aria-valuenow="loadRate" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom"
title="@promptTextLoad"></div>
</div>
</td>
@* CPU *@
<td data-sort="@cpuRate">
<div class="progress">
<div class="progress-bar-striped progress-bar-animated @color"
role="progressbar" style="width: @(cpuRate)%" aria-valuenow="@cpuRate" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom"
title="@promptText"></div>
</div>
</td>
<td>
@if (cpuRate < 30)
{
<span class="badge badge-secondary">@(client.Process)</span>
}
else
{
<span class="badge badge-danger">@(client.Process)</span>
}
</td>
@* RAM *@
<td data-sort="@mem.UsedRate">
<div class="progress">
<div class="progress-bar-striped bg-success" role="progressbar" style="width: @(mem.UsedRate)%" aria-valuenow="@(mem.UsedRate)" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom" title="Used RAM: @mem.Used.HumanReadableSize()"></div>
<div class="progress-bar-striped bg-info" role="progressbar" style="width: @(mem.BufRate)%" aria-valuenow="@(mem.BufRate)" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom" title="Buffer RAM: @mem.Buf.HumanReadableSize()"></div>
<div class="progress-bar-striped bg-warning" role="progressbar" style="width: @(mem.CacheRate)%" aria-valuenow="@(mem.CacheRate)" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom" title="Cache RAM: @mem.Cache.HumanReadableSize()"></div>
</div>
</td>
@* NetWork *@
<td data-sort="@net.Recv">
@net.Recv.HumanReadableSize()@unit
</td>
<td data-sort="@net.Send">
@net.Send.HumanReadableSize()@unit
</td>
@* Disk *@
<td data-sort="@diskUseRatio">
<div class="progress">
<div class="progress-bar @diskColor" role="progressbar" style="width: @(diskUseRatio * 100)%" aria-valuenow="@(diskUseRatio * 100)" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip" data-placement="bottom" title="@message">@(client.UsedRoot)GB</div>
</div>
<td data-sort="@disk.Read">
@disk.Read.HumanReadableSize()@unit
</td>
<td data-sort="@disk.Writ">
@disk.Writ.HumanReadableSize()@unit
</td>
<td>@osFirstTwoWords</td>
<td>
<a class="btn btn-primary btn-sm" asp-controller="Home" asp-action="Details" asp-route-id="@client.ClientId">Details</a>
</td>
@* <td data-utc-time="@client.LastUpdate.ToHtmlDateTime()" data-sort="@client.LastUpdate.Ticks"> *@
@* </td> *@
@* <td>@client.Version</td> *@
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
现在请你开始编写这段razor吧！