如何使用Bootstrap中的checkbox样式制作按钮组

 时间:2024-10-12 18:56:29

1、第一步,在WebStorm下创建的Web项目,新建静态页面button_group.html,并引入Bootstrap相关的js和css文件,如下图所示:

如何使用Bootstrap中的checkbox样式制作按钮组

2、第二步,在<body></body>下插入三个div标签元素,设置对应的样式class;然后在最里面插入四个按钮,如下图所示:

如何使用Bootstrap中的checkbox样式制作按钮组

3、第三步,保存代码并预览页面,可以查看到四个按钮组合在一起,根据一年四季命名的,如下图所示:

如何使用Bootstrap中的checkbox样式制作按钮组

4、第四步,修改代码,将第二步中的按钮换成有label和checkbox组成的,如下图所示:

如何使用Bootstrap中的checkbox样式制作按钮组

5、第五步,再次保存代码并预览页面,发现每个按钮前面多了一个复选框,如下图所示:

如何使用Bootstrap中的checkbox样式制作按钮组

6、第六步,点击按钮可以选中,也可以全部选择按钮,由于复选框是可以多选的,这里制作的按钮组也可以多选,如下图所示:

如何使用Bootstrap中的checkbox样式制作按钮组
  • excel里数字过长显示不出来怎么办
  • Word怎么制作工资条
  • Excel打印文件调整页边距和页面设置
  • Word中怎么让中文字符旋转270度
  • office版本怎么查看
  • 热门搜索
    心脏彩超能检查什么 什么叫自贸区 刑克是什么意思 纣王最后封什么神 listen是什么意思 忧郁的意思 酷狗积分有什么用 不翼而飞的意思 起死回生的意思 什么叫紧急制动