首页 > 代码库 > bootstrap学习总结-05 常用标签3
bootstrap学习总结-05 常用标签3
1 单选框，多选框
1）单选框
单选框（radio）用于从多个选项中只选择一个。设置了 disabled 属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 <label> 标签，如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式，请将 .disabled 类赋予 .radio、.radio-inline。
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href=http://www.mamicode.com/"css/index.css" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src=http://www.mamicode.com/"http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1 class="page-header">单选按钮</h1> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value=http://www.mamicode.com/"option1" checked> 选项1 </label> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value=http://www.mamicode.com/"option2"> 选项2 </label> </div> <div class="radio disabled"> <label> <input type="radio" name="male" id="optionsRadios2" value=http://www.mamicode.com/"male" disabled> 选项3默认不可选 </label> </div> </div> </body></html>
2）多选框
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href=http://www.mamicode.com/"css/index.css" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src=http://www.mamicode.com/"http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1 class="page-header">复选框</h1> <div class="checkbox"> <label> <input type="checkbox" value=http://www.mamicode.com/""> 选择1 </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" value=http://www.mamicode.com/"" disabled> 选择2 </label> </div> </body></html>
通过将 .checkbox-inline 或 .radio-inline 类应用到一系列的多选框（checkbox）或单选框（radio）控件上，可以使这些控件排列在一行。
<label class="radio-inline"> <input type="radio" name="optionsRadios" id="optionsRadios1" value=http://www.mamicode.com/"option1" checked> 选项1 </label> <label class="radio-inline"> <input type="radio" name="optionsRadios" id="optionsRadios2" value=http://www.mamicode.com/"option2"> 选项2 </label> <label class="radio-inline"> <input type="radio" name="male" id="optionsRadios2" value=http://www.mamicode.com/"male" disabled> 选项3默认不可选 </label> <hr> <label class="checkbox-inline"> <input type="checkbox" value=http://www.mamicode.com/""> 选择1 </label> <label class="checkbox-inline"> <input type="checkbox" value=http://www.mamicode.com/"" disabled> 选择2 </label>
2 下拉列表
使用默认选项或添加 multiple 属性可以同时显示多个选项。
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href=http://www.mamicode.com/"css/index.css" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src=http://www.mamicode.com/"http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1 class="page-header">选择列表</h1> <select class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <hr> <select multiple class="form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </body></html>
静态控件
如果需要在表单中将一行纯文本和 label 元素放置于同一行，为 <p> 元素添加 .form-control-static 类即可。
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href=http://www.mamicode.com/"css/index.css" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="stylesheet" href=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src=http://www.mamicode.com/"http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src=http://www.mamicode.com/"http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <form class="form-horizontal" role="form"> <div class="form-group"> <label class="col-sm-2 control-label">Email</label> <div class="col-sm-10"> <p class="form-control-static">email@example.com</p> </div> </div> <div class="form-group"> <label for="inputPassword" class="col-sm-2 control-label">Password</label> <div class="col-sm-10"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> </div> </form> </body></html>
被禁用的输入框
为输入框设置 disabled 属性可以防止用户输入，并能对外观做一些修改，使其更直观。
<div class="container"> <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled> </div>
只读输入框
为输入框设置 readonly 属性可以禁止用户输入，并且输入框的样式也是禁用状态。
<div class="container"> <input class="form-control" type="text" placeholder="Readonly input here…" readonly></div>
参考资料：
http://v3.bootcss.com/css/#buttons
bootstrap学习总结-05 常用标签3
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。