问答详情
源自:3-4 表单控件(输入框input)

关于bootstrap中的类名form-control

bootstrap中通过类名form-control表单控件验证是如何使用的,怎么样才能看到效果?

提问者:无所畏惧小小小 2016-11-05 15:02

个回答

  • 秋风5LIFE
    2016-11-05 16:18:14
    已采纳

    不能代替  这里的form-control只是控制表单的样式,正则验证的问题还是要通过form表单调用submit事件解决,课程里面讲的通过通过添加类名达到的效果一般都是对页面样式的改变。

  • 秋风5LIFE
    2016-11-05 15:23:33

    form-control 是将表单元素相对于外围元素100%显示  就是例如输入框的宽度啥的 

    <!doctype html>
    <html>
    <head>
    	<meta charset="utf-8">
    	<title>form</title>
    	<link rel="stylesheet" href="bs/css/bootstrap.min.css">
    </head>
    <body>
    	<div class="container">
    		<!-- form-control 设置宽度为100% -->
    			<form action="table.html" method="post" role="form">
    				<div class="form-group">
    					<label>用户名:</label>
    					<input type="text" class="form-control" placeholder="请输入用户名">
    				</div>
    				<div class="form-group">
    					<label>密码:</label>
    					<input type="password" class="form-control" placeholder="请输入密码">
    				</div>
    				<div class="form-group">
    					<label>文件:</label>
    					<input type="file">
    				</div>
    				<div class="form-group">
    					<label>兴趣:</label>
    					<input type="checkbox"value="篮球">篮球
    				</div>
    					<div class="form-group">
    					<label>性别:</label>
    					<input type="radio" name="sex"value="男">男
    					<input type="radio" name="sex"value="女">女
    
    				</div>
    
    				<div class="form-group">
    					<select class="form-control">
    						<option value="">--请选择--</option>
    						<option value="1">1</option>
    						<option value="2">2</option>
    
    
    					</select>
    				</div>
    
    				<div class=" form-group">
    					<textarea class="form-control">
    						dfgdfg
    					</textarea>
    				</div>
    				<input type="submit" class="btn btn-success" value="提交">
    				<input type="reset" class="btn btn-info" value="重置">
    			</form>
    	</div>
    </body>
    </html>