📅  最后修改于: 2023-12-03 14:39:33.080000             🧑  作者: Mango
Bootstrap 是一个流行的前端框架,它提供了 HTML、CSS 和 JavaScript 库,可以帮助程序员快速开发响应式布局和交互性网站。
在 Bootstrap 中,有很多标签可供程序员使用,以下是其中一些常见的标签和用法:
使用 Bootstrap 的按钮标签可以轻松地创建具有特定样式和交互效果的按钮。以下是使用 Bootstrap 按钮标签的示例代码:
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
Bootstrap 的表单标签可以方便地创建表单元素,并提供了各种样式选项。以下是使用 Bootstrap 表单标签的示例代码:
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
Bootstrap 的模态框标签可以创建交互性弹出窗口,用于显示信息或收集用户输入。以下是使用 Bootstrap 模态框标签的示例代码:
<!-- 模态框触发按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Modal body text goes here.
</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>
</div>
以上是使用 Bootstrap 标签的三个示例,Bootstrap 提供了许多其他标签和工具,有助于程序员快速开发出具有专业外观和交互性的网站。