章节
问答
课签
笔记
评论
占位
占位

按钮插件--模拟单选择按钮

模拟单选择按钮是通过一组按钮来实现单选择操作。使用按钮组来模拟单选按钮组,能够让设计更具个性化,可以定制出更美观的单选按钮组。
在Bootstrap框架中按钮插件中,可以通过给按钮组自定义属性data-toggle="buttons",如下所示:

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options1">男
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options2">女
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options3">未知
    </label>
</div>

运行效果如下:

注:使用这种效果的时候,无需借助JavaScript代码来触发,因为默认Bootstrap就已经为用户初始化好了。

任务

我来试试:补充右侧代码以实现“单选择按钮模似单选按钮组的效果”

?不会了怎么办
<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options1">男
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options2">女
    </label>
    <label class="btn btn-primary">
        <input type="radio" name="options" id="options3">未知
    </label>
</div>
||
1
2
<!DOCTYPE HTML>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

最新回答 / jinboqian
去掉之后就没有模拟效果了,会出现原来单选的自带样式,就是纠结在这个地方

最赞回答 / qq_赢在行动_0
这段代码是让div 内容响应式水平居中<...code...>这段css是让div内容垂直居中<...code...>其实垂直居中方法实现有很多,这是我目前水平认知比较好的解决方案幸苦手码代码,望采纳!
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言