49 lines
1.7 KiB
HTML
49 lines
1.7 KiB
HTML
|
{% extends "base.html" %} {% block content %}
|
||
|
|
<main>
|
||
|
|
<div class="container py-4">
|
||
|
|
<div class="p-5 mb-4 bg-light rounded-3">
|
||
|
|
<div class="container-fluid py-5">
|
||
|
|
<h1 class="display-5 fw-bold">智互奥运</h1>
|
||
|
|
<p class="col-md-8 fs-4">
|
||
|
|
Using a series of utilities, you can create this jumbotron, just like
|
||
|
|
the one in previous versions of Bootstrap. Check out the examples
|
||
|
|
below for how you can remix and restyle it to your liking.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="row align-items-md-stretch">
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="h-100 p-5 text-white bg-darkblue rounded-3">
|
||
|
|
<h2>文章列表</h2>
|
||
|
|
<p>
|
||
|
|
Swap the background-color utility and add a `.text-*` color utility
|
||
|
|
to mix up the jumbotron look. Then, mix and match with additional
|
||
|
|
component themes and more.
|
||
|
|
</p>
|
||
|
|
<button class="btn btn-outline-light" type="button">
|
||
|
|
跳转
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="col-md-6">
|
||
|
|
<div class="h-100 p-5 bg-lightblue border rounded-3">
|
||
|
|
<h2>讨论区</h2>
|
||
|
|
<p>
|
||
|
|
Or, keep it light and add a border for some added definition to the
|
||
|
|
boundaries of your content. Be sure to look under the hood at the
|
||
|
|
source HTML here as we've adjusted the alignment and sizing of both
|
||
|
|
column's content for equal-height.
|
||
|
|
</p>
|
||
|
|
<button class="btn btn-outline-secondary" type="button">
|
||
|
|
跳转
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer class="pt-3 mt-4 text-muted border-top">© 2022</footer>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
{% endblock %}
|