如何使用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样式制作按钮组
猜你喜欢