我想添加像This one的动画到这个页面的背景下,但我不知道如何使用bootstrap 5,我在这里提供的图像,我想它是我的html页面的背景,我怎么能做到这一点吗?
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
我的模板:
<div class="container-fluid bg-light bg-body shadow-lg">
<div class="row">
<nav class="navbar navbar-expand-lg navbar-light bg-light bg-body shadow-sm">
<div class="container">
<a class="navbar-brand" href="#" style="color: dodgerblue; font-size: 20px;">DB</a>
<div class="navbar-nav">
<a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">About</a>
<a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Contact</a>
<a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Pricing</a>
<a class="nav-item btn btn-primary mx-lg-2 mx-0 my-lg-0 my-2" href="#">Disabled</a>
</div>
</div>
</nav>
<div class="col">
<div class="container p-5">
<h1>Landing Page</h1>
<br>
<h4>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur recusandae
accusamus enim dolorum sequi saepe unde minima</h4>
<br>
<a class="btn btn-primary shadow-lg bg-body text-dark" href="">Get Started</a>
</div>
</div>
<div class="col-md-6">
<div class="p-5">
<h2 class="text-center">Sign In</h2>
<br>
<form method="POST" action="{% url 'login' %}">
{% csrf_token %}
<div class="form-group">
<label class="text-primary text-dark font-weight-bold">Enter School Name</label>
<input type="text" class="form-control" name="username" placeholder="School Name">
</div>
<br>
<div class="form-group">
<label class="text-primary text-dark font-weight-bold">Enter School Password</label>
<input type="password" class="form-control" name="password" placeholder="Enter Password">
</div>
<br>
<button type="submit" class="btn btn-primary btn-block">Login</button>
</form>
</div>
</div>
</div>
</div>
1条答案
按热度按时间vsikbqxv1#
只需从fiddle(* compiled * css)中获取代码,并使用
bubbles
作为所需容器的类,在本例中,我使用fixed
div作为页面的背景。(Wait为它...)