Question

我刚开始学习Bootstrap并建立一个网站。

我想知道如何创建一个大的空文本输入框？这样有人可以输入某些内容，例如审查产品。

Answer 1

根据Bootstrap docs，您可以使用input- *类来调整输入的大小：

<input class="form-control input-sm" type="text"/>
<input class="form-control input-md" type="text"/>
<input class="form-control input-lg" type="text"/>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <form>
    <div class="form-group">
      <label for="inputdefault">Default input</label>
      <input class="form-control" id="inputdefault" type="text">
    </div>
    <div class="form-group">
      <label for="inputlg">input-lg</label>
      <input class="form-control input-lg" id="inputlg" type="text">
    </div>
    <div class="form-group">
      <label for="inputsm">input-sm</label>
      <input class="form-control input-sm" id="inputsm" type="text">
    </div>
  </form>
</body>

Answer 2

您可以使用textarea标签。

<textarea></textarea>

您可以在textarea标签中添加属性，也可以使用CSS来更改textarea的大小。

<textarea rows="5" cols="50"></textarea>

textarea { width : 100px; min-height : 50px;}

Answer 3

我认为这就是你要找的东西。

 <div class="form-group">
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="5" id="comment"></textarea>
</div>

  

  <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </head>
    <body>
      <form>
         <div class="form-group">
<h4>Text Area Below with 15 Rows </h4>
  <label for="comment">Comment:</label>
  <textarea class="form-control" rows="15" id="comment"></textarea>
</div>
      </form>
    </body>

如何使用Bootstrap创建一个空文本框？

3 个答案: