以下是对给定表单的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 样式重写表单 form action=repair!publishsave method=post id=myform div class=post-input-wrap div class=note-title clearfix

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

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