八 表单控件
单行输入框，常见的文本输入框，也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型，如果没有指定type类型，
将无法得到正确的样式，因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型，比如说text类型，对应的是input[type=“text”])的形式来定义样式的
为了让控件在各种表单风格中样式不出错，需要添加类名“form-control”
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件——输入框input</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>
</body>
</html>
九 下拉选择框select
Bootstrap框架中的下拉选择框使用和原始的一致，多行选择设置multiple属性的值为multiple
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件——下拉选择框select元素</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
</body>
</html>
十 文本域textarea
文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单控件——下拉选择框select元素</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3">
bootstrap 表单一
猜你喜欢
转载自cfj.iteye.com/blog/2264621
今日推荐
周排行