表单控件(文本域textarea)，玩转Bootstrap（基础）教程-慕课网

3-6 表单控件(文本域textarea)

本节编程练习不计算学习进度，请电脑登录imooc.com操作

表单控件(文本域textarea)

文本域和原始使用方法一样，设置rows可定义其高度，设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名，则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

<form role="form">
  <div class="form-group">
    <textarea class="form-control" rows="3"></textarea>
  </div>
</form>

运行效果如下或查看右侧结果窗口：

任务

我来试一试：把代码结果窗口设置为“全屏”，观查textarea宽度是否为100%。

index.html style.css

<!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"></textarea>
  </div>
</form>    
</body>
</html>

body {
  padding: 100px;
}