欢迎光临
我们一直在努力

Bootstrap教程:基础表单操作教程

Bootstrap表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括:文本输入框下拉选择框、单选按钮、复选按钮文本域按钮等。其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同。

同样,表单也是Bootstrap框架中的核心内容,下面向大家介绍Bootstrap框架中表单的制作。

效果图:

表单源码查询

Bootstrap框架的表单,其源码占据了大量的代码,同样的,根据不同的Bootstrap版本,你可以轻松获取相应的源码:

编译后的Bootstrap版本,可以查阅bootstrap.css文件第1630行~第1991行

不过在样式表中,还对表单做了一些初始化,详细代码可以查阅bootstrap.css文件第110行~第178行。

对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldsetlegendlabel标签进行了定制。如:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础表单</title>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
</head>
<body>
<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">邮箱:</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">密码</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> 记住密码
    </label>
  </div>
  <button type="submit" class="btn btn-default">进入邮箱</button>
</form>	
</body>
</html>

CSS:

body {
  padding: 50px 100px;
}

 

赞(0) 打赏
未经允许不得转载:新起点博客 » Bootstrap教程:基础表单操作教程

评论 抢沙发

评论前必须登录!