bootstrap中select下拉框实现placeholder效果

引入bootstrap相关资源

<link rel="stylesheet" href="/bootstrap-3.3.7/css/bootstrap-select.css"/>

<script src="/bootstrap-3.3.7/js/bootstrap-select.js"></script>
<script src="/bootstrap-3.3.7/js/bootstrap-select-zh_cn.js"></script>

普通写法

<select class="selectpicker show-tick form-control"  name="type" >
                    <option value="1"> 单选</option>
                    <option value="0"> 多选</option>
                </select>

只需要加入title属性即可

<select class="selectpicker show-tick form-control" id="batch" name="batch" title="选项类型">
                    <option value="1"> 单选</option>
                    <option value="0"> 多选</option>
                </select>

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一个使用Bootstrap框架实现的简单表单,包括用户名、密码、性别、爱好(下拉框)、日期: ``` <form> <div class="form-group"> <label for="username">用户名</label> <input type="text" class="form-control" id="username" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="password">密码</label> <input type="password" class="form-control" id="password" placeholder="请输入密码"> </div> <div class="form-group"> <label for="gender">性别</label> <select class="form-control" id="gender"> <option>请选择性别</option> <option>男</option> <option>女</option> </select> </div> <div class="form-group"> <label for="hobby">爱好</label> <select multiple class="form-control" id="hobby"> <option>运动</option> <option>音乐</option> <option>旅游</option> <option>美食</option> </select> </div> <div class="form-group"> <label for="birthday">出生日期</label> <input type="date" class="form-control" id="birthday"> </div> <button type="submit" class="btn btn-primary">提交</button> </form> ``` 在上述代码,我们使用Bootstrap提供的`form-group`类来包裹每个表单元素,使其看起来更加美观。使用`label`元素来标记每个表单元素的名称,使用`input`元素来接收用户输入。下拉框使用`select`元素和`option`元素组合实现,多选下拉框需要添加`multiple`属性。出生日期使用`input`元素和`type="date"`属性实现。最后,添加一个提交按钮,使用`btn`类和`btn-primary`类来设置样式。 以上代码只是一个简单的示例,根据实际需要,我们可以对表单元素添加更多的属性和样式,使其更加符合需求。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值