这个区别 由于什么造成的?有 class="form-control"的区别?

来源:3-4 表单控件(输入框input)

墨涤

2015-03-26 20:15

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>表单控件——输入框input</title>

    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

</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>


写回答 关注

1回答

  • shangmingchao
    2015-11-09 09:57:22
    .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的圆角,还有其它样式

玩转Bootstrap(基础)

告诉你使用Bootstrap,并且能够独立定制出适合自己的Bootstrap

314531 学习 · 2275 问题

查看课程

相似问题