【发布时间】:2022-01-09 15:23:49
【问题描述】:
所以我刚刚开始使用引导模式,并且我在不同的页面上有一个注册/登录作为索引。我认为模式可能是一个好主意,我尝试将登录/注册表单导入模式,但知道这是在模式内部,所有输入都不可点击,但如果我按下选项卡,我会进入输入。当然,我忘记了一些东西,但我不知道,因为我将它与模态示例进行比较,我没有发现任何遗漏。
我的模态代码:
<div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="login" aria-hidden="true">
<div class="modal-dialog p-3 radius bg-secondary" role="document">
<div class="row d-flex align-items-center justify-content-center m-2">
<div class="col-11 formBorderBigger bg-success">
<div class="row d-flex justify-content-center align-items-center">
<div class="col">
<div class="row">
<div class="col">
<h2 class="text-center text-white p-2">INICIAR SESIÓN</h2>
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center align-items-center">
<div class="col-11 formBorderBigger my-2 bg-primary">
<div class="row d-flex justify-content-center align-items-center">
<div class="col-11 bg-white my-4 py-3 formBorderSmaller ">
<form>
<div class="row d-flex justify-content-center align-items-center">
<div class="col-12">
<div class="form-group row">
<div class="col-12 justify-content-center align-items-center">
<div class="row justify-content-center align-items-center">
<div class="col py-2 justify-content-center align-items-center">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="bi bi-person-fill"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Nombre">
</div>
</div>
</div>
<div class="row justify-content-center align-items-center">
<div class="col py-2 justify-content-center align-items-center">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
</div>
<input type="password" class="form-control" id="inlineFormInputGroup" placeholder="Contraseña">
</div>
</div><br>
</div>
</div>
<div class="col-12">
<div class="row d-flex justify-content-center align-items-center py-2">
<div class="col">
<h2 class="text-center">Captcha</h2>
</div>
</div>
<div class="row d-flex justify-content-center align-items-center py-2">
<div class="col d-flex justify-content-center align-items-center">
<div class="captcha bg-black py-2"></div>
</div>
</div>
<div class="row d-flex justify-content-center align-items-center py-2">
<div class="col d-flex justify-content-center align-items-center">
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><i class="bi bi-arrow-clockwise"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup">
</div>
</div>
</div>
</div>
<div class="row d-flex justify-content-center align-items-center py-2">
<div class="col-5 d-flex justify-content-center align-items-center">
<button class="btn text-white btn-nav rounded-1" type="submit">Entrar</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这对我有什么作用:
【问题讨论】:
标签: javascript html bootstrap-4 bootstrap-modal bootstrap-5