這個區別 由于什么造成的？有 class="form-control"的區別？
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>表單控件——輸入框input</title>
? ? <link rel="stylesheet" >
</head>
<body>
<form role="form">
? <div>
? ? <input type="email" ?class="form-control"?placeholder="Enter email">
? ? <input type="text" ?class="form-control"?placeholder="userName">
?<input type="text" ?placeholder="userName">
? </div>
</form> ??
</body>
</html>
2015-11-09
.form-control?{ ??display:?block; ??width:?100%; ??height:?34px; ??padding:?6px?12px; ??font-size:?14px; ??line-height:?1.42857143; ??color:?#555; ??background-color:?#fff; ??background-image:?none; ??border:?1px?solid?#ccc; ??border-radius:?4px; ??-webkit-box-shadow:?inset?0?1px?1px?rgba(0,?0,?0,?.075); ??????????box-shadow:?inset?0?1px?1px?rgba(0,?0,?0,?.075); ??-webkit-transition:?border-color?ease-in-out?.15s,?-webkit-box-shadow?ease-in-out?.15s; ???????-o-transition:?border-color?ease-in-out?.15s,?box-shadow?ease-in-out?.15s; ??????????transition:?border-color?ease-in-out?.15s,?box-shadow?ease-in-out?.15s; } .form-control:focus?{ ??border-color:?#66afe9; ??outline:?0; ??-webkit-box-shadow:?inset?0?1px?1px?rgba(0,0,0,.075),?0?0?8px?rgba(102,?175,?233,?.6); ??????????box-shadow:?inset?0?1px?1px?rgba(0,0,0,.075),?0?0?8px?rgba(102,?175,?233,?.6); }你可以看一下CSS樣式就明白了，form-control寬100%，4px的圓角，還有其它樣式