43.Bootstrap(中文教程)表单：Forms:核取方块与选项按钮-58码农网

ㄧ.Forms:核取方块与选项按钮

<body data-spy="scroll" data-target="#nav-demo">  <div class="component" id="demo" style="height: 300vh">    <div class="form-check form-check-inline">      <label class="form-check-label">        <input type="checkbox" class="form-check-input">        A      </label>    </div>     <div class="form-check form-check-inline">      <label class="form-check-label">        <input type="checkbox" class="form-check-input">        B      </label>    </div>     <div class="form-check form-check-inline">      <label class="form-check-label">        <input type="checkbox" class="form-check-input">        C      </label>    </div>         <div class="form-check form-check-inline">      <label class="form-check-label">        <input type="radio" name="demo" value="a" class="form-check-input">        A      </label>    </div>     <div class="form-check form-check-inline">      <label class="form-check-label">        <input type="radio" name="demo" value="b" class="form-check-input">        B      </label>    </div>     <div class="form-check form-check-inline">      <label class="form-check-label">        <input type="radio" name="demo" value="c" class="form-check-input">        C      </label>    </div>   </div></body>.demo.component{  padding: 50px;}

重点：

核取方块的结构为，父元素为.form-check -->再来第二层是label.form-check-label，里面包input.form-check-input.form-check-inline，让整个核取方块呈现一行选项按钮的功能主要是单选的选项，这里怎么点全部都能点到，所以选项按钮全部都要加name=".."以及value="a,b,c.."

codepen
参考：bootstrap4

给这篇文章的作者打赏

关于作者: 网站小编

相关文章

HBO Max vs.Netflix：当你负担不起两者时如何选择

课内笔记整理---作业系统实务(资安相关篇)

excel vba捞网页数据问题

热门文章

143.Bootstrap(中文教程)表单：Forms:核取方块与选项按钮

244.Bootstrap(中文教程)表单：Forms:核取方块与选项按钮(自定义)

345.Bootstrap(中文教程)表单：Forms:选择功能表

4Python入门（一）环境&资料结构

5Git 学习笔记_06(Git tag 标籤)

143.Bootstrap(中文教程)表单：Forms:核取方块与选项按钮

244.Bootstrap(中文教程)表单：Forms:核取方块与选项按钮(自定义)

345.Bootstrap(中文教程)表单：Forms:选择功能表