                        課程
                    
                        /前端開發(fā)
                        
                            /Bootstrap
                        
                        /玩轉(zhuǎn)Bootstrap（基礎(chǔ)）

這個區(qū)別由于什么造成的？有 class="form-control"的區(qū)別？

<!doctype html>

<html>

<head>

? ? <meta charset="UTF-8">

? ? <title>表單控件——輸入框input</title>

? ? <link rel="stylesheet" >

</head>

<body>

? <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-03-26

源自：玩轉(zhuǎn)Bootstrap（基礎(chǔ)） 3-4

關(guān)注問題我要回答

16514

操作

收起

1 回答

shangmingchao
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的圓角，還有其它樣式