Bootstrap4 表单
Bootstrap4 教程
· 2019-03-02 09:14:26
在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
表单元素 <input>, <textarea>, 和
<select> elements
在使用 .form-control 类的情况下，宽度都是设置为 100%。
Bootstrap4 表单布局
- 堆叠表单 (全屏宽度)：垂直方向
- 内联表单：水平方向
Bootstrap 提供了两种类型的表单布局:
堆叠表单
以下实例使用两个输入框，一个复选框，一个提交按钮来创建堆叠表单：
实例
<form>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
内联表单
所有内联表单中的元素都是左对齐的。
注意：在屏幕宽度小于 576px 时为垂直堆叠，如果屏幕宽度大于等于576px时表单元素才会显示在同一个水平线上。
内联表单需要在 <form> 元素上添加 .form-inline类。
以下实例使用两个输入框，一个复选框，一个提交按钮来创建内联表单：
实例
<form class="form-inline">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
点击查看所有 Bootstrap4 教程 文章: https://www.codercto.com/courses/l/26.html
文明之光（第四册）
吴军 / 人民邮电出版社 / 2017-3 / 69.00元
计算机科学家吴军博士继创作《浪潮之巅》、《数学之美》之后，将视角拉回到人类文明史，以他独具的观点从对人类文明产生了重大影响却在过去被忽略的历史故事里，选择了有意思的几十个片段特写，有机地展现了一幅人类文明发展的画卷。《文明之光》系列创作历经整整四年，本书为其第四卷。 作者所选的创作素材来自于十几年来在世界各地的所见所闻，对其内容都有着深刻的体会和认识。《文明之光》系列第四册每个章节依然相对独......一起来看看 《文明之光（第四册）》 这本书的介绍吧!
在线进制转换器
各进制数互转换器
图片转BASE64编码
在线图片转Base64编码工具