twitter-bootstrap - 如何使用自定义(布局和表单)组件制作引导模式
问题描述
我正在制作一个自定义引导模式,包括一些表单组件,如选择标签和按钮,我仍在学习。
这是我到目前为止所做的: 在这里找到
代码:
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">CUSTOM LINK MAKER</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h5>Here you can make a custom link to send.</h5>
<small>(All custom links will stay active) </small>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
我想要达到的目标: 在这里找到
问题:我在设置布局时遇到问题。我不知道如何为布局编写代码并在 Modal 中添加表单组件。如果有人能提出建议,那将是很大的帮助。谢谢
解决方案
这是一个帮助您入门的示例:
Codepen 显示示例:https ://codepen.io/brooksrelyt/pen/MLpWrb
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">CUSTOM LINK MAKER</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>
</div>
推荐阅读
- ios - 自定义重置根 ViewController segue 不显示正确的导航栏标题和按钮
- excel - 在预定义的位置创建数据透视表
- xslt - 如何使用 XSLT 在 toc.ncx 中添加 playOrder?
- reactjs - Recaptcha 缺少必需的参数:sitekey
- javascript - 在最终形式重新初始化时保留脏表单值
- typescript - 如何遍历firebase中的子记录?
- python - 如何逐帧处理 Python 上的 RTSP 流?
- excel - VBA Excel - 带有 2 个关键字段的下拉列表
- python - 如何操作给定 json 输入文件中的数据并将其保存为所需格式
- r - 在 DT::renderDataTable 中添加下载按钮