《Vue.js BootstrapWeb开发案例教程（在线实训版）》课件 15.pptx

Vue+Bootstrap 2021.06Vue+Bootstrap主讲：温谦第15章 Bootstrap的表单样式表单控件样式表单布局表单验证样式第15章 Bootstrap的表单样式 第15章 Bootstrap的表单样式表单控件样式Bootstrap对表单相关的样式进行了一层抽象，使用预定义的类，可以在浏览器和设备之间提供更一致的呈现。表单相关的CSS类都是以“form-”开头，针对不同的表单控件，Bootstrap提供了对应的类，下面分别介绍。第15章 Bootstrap的表单样式表单控件样式输入框——常规用法?<div?class="mb-3">?<label?for="email"?class="form-label">邮箱</label>?<input?type="email"?class="form-control"?id="email"?placeholder="name@">?<div?class="form-text">您的邮箱不会被公开。</div>?</div>第15章 Bootstrap的表单样式表单控件样式输入框——不同状态<input?type="email"?class="form-control"?id="email1"?disabled><input?type="email"?class="form-control"?id="email2"?readonly><input?type="email"?class="form-control-plaintext"?id="email3" readonly>第15章 Bootstrap的表单样式表单控件样式输入框——大小<input?type="email"?class="form-control-sm"?id="email1"><input?type="email"?class="form-control"?id="email2"><input?type="email"?class="form-control-lg"?id="email3">第15章 Bootstrap的表单样式表单控件样式选择框??<label?for="single"?class="form-label">申请的职位</label>?<select?class="form-select"?id="single">?<option?selected>--请选择--</option>?</select>第15章 Bootstrap的表单样式表单控件样式单选框与复选框——常规用法<div?class="form-check">?<input?class="form-check-input"?type="checkbox"?id="checkbox">?<label?class="form-check-label"?for="checkbox">?Default?checkbox?</label></div>第15章 Bootstrap的表单样式表单控件样式单选框与复选框——设置开关样式<div?class="form-check?form-switch">?<input?class="form-check-input"?type="checkbox"?id="checked">?<label?class="form-check-label"?for="checked">新消息通知</label></div>第15章 Bootstrap的表单样式表单控件样式单选框与复选框——行内布局<div?class="form-check?form-check-inline">?<input?class="form-check-input"?type="checkbox">?<label?class="form-check-label"?for="inline1">足球</label></div>第15章 Bootstrap的表单样式表单控件样式滑动输入<input?type="range"?class="form-range"?min="0"?max="5"?step="1">第15章 Bootstrap的表单样式表单控件样式输入组，输入组是指将输入项和按钮、图标或文本组合起来，在网页中也经常用到，比如搜索引擎的搜索框。在Bootstrap中，输入组需要使用“.input-group”类将两者包裹起来，示例如下。<div?class="input-group?mb-3">?<input?type="text"?class="form-control">?<button?class="btn?btn-primary"?type="button">搜索</button><