标签:
1)单选框
单选框(radio)用于从多个选项中只选择一个。设置了 disabled
属性的单选或多选框都能被赋予合适的样式。对于和多选或单选框联合使用的 <label>
标签,如果也希望将悬停于上方的鼠标设置为“禁止点击”的样式,请将 .disabled
类赋予 .radio
、.radio-inline
。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="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://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="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="option1" checked> 选项1 </label> <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 选项2 </label> </div> <div class="radio disabled"> <label> <input type="radio" name="male" id="optionsRadios2" value="male" disabled> 选项3默认不可选 </label> </div> </div> </body> </html>
2)多选框
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="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://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="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=""> 选择1 </label> </div> <div class="checkbox disabled"> <label> <input type="checkbox" value="" disabled> 选择2 </label> </div> </body> </html>
通过将 .checkbox-inline
或 .radio-inline
类应用到一系列的多选框(checkbox)或单选框(radio)控件上,可以使这些控件排列在一行。
<label class="radio-inline"> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 选项1 </label> <label class="radio-inline"> <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"> 选项2 </label> <label class="radio-inline"> <input type="radio" name="male" id="optionsRadios2" value="male" disabled> 选项3默认不可选 </label> <hr> <label class="checkbox-inline"> <input type="checkbox" value=""> 选择1 </label> <label class="checkbox-inline"> <input type="checkbox" value="" disabled> 选择2 </label>
使用默认选项或添加 multiple
属性可以同时显示多个选项。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="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://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="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="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://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="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
标签:
原文地址:http://www.cnblogs.com/wangshuo1/p/5838559.html