以下是对给定表单的 Bootstrap 样式重写:

<form action="repair!publishsave" method="post" id="myform">
    <div class="post-input-wrap">
        <div class="form-group">
            <label for="note-title">标题:</label>
            <input type="text" id="note-title" class="form-control" name="title" validate="required:true"/>
        </div>
        <div class="form-group">
            <label for="search-goods-type">维修类型:</label>
            <select name="cid" id="search-goods-type" class="form-control" validate="required:true">
                <option value="1" selected="selected">软件故障</option>
                <option value="2">硬件故障</option>
                <option value="3">系统维护、清理</option>
                <option value="4">其他问题</option>
            </select>
        </div>
        <div class="form-group">
            <label for="note-info-goods">需要维修的物品名称:</label>
            <input type="text" id="note-info-goods" name="name" class="form-control" validate="required:true"/>
        </div>
        <div class="form-group">
            <label for="note-info-address">您的位置(就近寻求帮助):</label>
            <input type="text" id="note-info-address" name="address" class="form-control" validate="required:true"/>
        </div>
        <div class="form-group">
            <label for="note-contact-phone">您的手机:</label>
            <input type="text" id="note-contact-phone" name="mobile" class="form-control" placeholder="请填写手机号码"
                   validate="required:true,mobile:true,minlength:2,maxlength:40"/>
        </div>
        <div class="form-group">
            <label for="note-contact-qq">您的QQ:</label>
            <input type="text" id="note-contact-qq" name="qq" class="form-control" placeholder="qq、手机请至少填写一个"/>
        </div>
        <input type='hidden' id='type' name='type' value='lost'/>
        <div class="form-group">
            <label for="note-content">详情描述:</label>
            <textarea id="note-content" name="info" class="form-control"></textarea>
        </div>
        <div class="form-group">
            <label for="note-info-extra">备注:</label>
            <input type="text" id="note-info-extra" name="remark" class="form-control">
        </div>
        <p class="text-right">
            <button type="submit" class="btn btn-primary" id="post-submitBotton">发布信息</button>
        </p>
    </div>
</form>

在上面的代码中,我使用了 Bootstrap 的 form-group 类来包装每个表单项,并使用了 form-control 类来设置表单项的样式。我还使用了 text-right 类将“发布信息”按钮右对齐。

Bootstrap 表单样式重写

原文地址: https://www.cveoy.top/t/topic/fz1z 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录