BootStrap 表单控件之单选按钮水平排列
2017-05-23 11:06
671 查看
1.运行效果如图所示
2.实现代码如下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>表单控件――单选按钮水平排列</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 可选的 Bootstrap 主题文件(一般不用引入) --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="external nofollow" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> </head> <body> <form role="form"> <div class="form-group"> <label class="radio-inline"> <input type="radio" value="option1" name="sex">男性 </label> <label class="radio-inline"> <input type="radio" value="option2" name="sex">女性 </label> <label class="radio-inline"> <input type="radio" value="option3" name="sex">中性 </label> </div> </form> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>
以上所述是小编给大家介绍的BootStrap 表单控件之单选按钮水平排列,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- bootstrap-表单控件——单选按钮水平排列
- bootstrap为水平排列的表单和内联表单设置可选的图标
- Bootstrap3 表单-水平排列的表单组的尺寸
- Bootstrap中水平排列的表单form-inline
- bootstrap 水平排列表单
- Bootstrap实现水平排列的表单
- 小知识点:复选框和单选按钮水平排列
- Bootstrap实现水平排列的表单
- bootstrap-为水平排列的表单和内联表单设置可选的图标
- html基础-表单控件、密码框、单选按钮、复选框、多行文本框、下拉列表、按钮(提交、图片、重置)
- Bootstrap3 表单-水平排列的表单
- 关于bootstrap--表单(下拉<select>、输入框<input>、文本域<textare>复选框<checkbox>和单选按钮<radio>)
- Bootstrap3 表单-水平排列的表单
- bootstrap-表单控件——块状按钮
- bootstrap-表单控件——复选框checkbox和单选择按钮radio
- bootstrap-表单控件——按钮
- BootStrap表单控件之复选框checkbox和单选择按钮radio
- 最近做老师作业遇到的问题关于单选按钮表单提交及验证码还有struts2乱码
- javascript简单布局实现单选按钮控件
- 表单美化-原生javascript和jQuery单选按钮(兼容IE6)