欢迎光临
我们一直在努力

Bootstrap教程:表单控件(输入框input)

其实每一个表单都是由表单控件组成。如果离开了控件,那么我们的表单也就失去了意义。接下来跟着Bootstrap教程一起简单的来了解Bootstrap框架中表单控件的相关知识。

Bootstrap教程
单行输入框,常见的文本输入框,也就是input的type属性值为text。在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type=“?”](其中?号代表type类型,比如说text类型,对应的是input[type=“text”])的形式来定义样式的。
为了让控件在各种表单风格中样式不出错,需要添加类名“form-control”,如:

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

 

代码运行效果如图:

Bootstrap教程

 

整体代码:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap教程:表单控件输入框input</title>
    <link rel="stylesheet" href="style.css">
    <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>

 

赞(0) 打赏
未经允许不得转载:新起点博客 » Bootstrap教程:表单控件(输入框input)

评论 抢沙发

评论前必须登录!