1。基础表单

表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

在Bootstrap框架中，通过定制了一个类名`form-control`，也就是说，如果这几个元素使用了类名“form-control”，将会实现一些设计上的定制效果。

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

效果如下：

Bootstrap关于表单（一）的更多相关文章

  1. Bootstrap之表单控件状态

    Bootstrap中的表单控件状态主要有三种:焦点状态,禁用状态,验证状态.   一.焦点状态:该状态告诉用户可输入或选择东西 焦点状态通过伪类“:focus”以实现. bootstrap.css相应 ...

  2. BootStrap 智能表单系列 首页 (持续更新中...)

    背景:本码农.NET后端工程师,在项目开发中发现写了很多重复的代码, 于是自己整了一套根据配置来生成form表单的插件,针对表单的改动仅需要修改配置的json即可 使用中发现还是蛮实用的,于是开源出来 ...

  3. BootStrap 智能表单系列 十一 级联下拉的支持

    像省市县选择的这种,但凡是个人肯定都见过,实现方式有很多种 1.有在第一级选择的时候去加载或者从本地对象中拿第一级对应的数据源显示到列表中,第二级以此类推 2.也有将所有的项都加载到select中,然 ...

  4. BootStrap 智能表单系列 十 自动完成组件的支持

    web开发中,肯定遇到像百度.google这种搜索的功能吧,那智能表单中的自动完成可以做什么呢,下面来揭晓: 1.包含像google.百度等类似的简单搜索 2.复杂结构的支持,比如说 输入产品编号,需 ...

  5. BootStrap 智能表单系列 九 表单图片上传的支持

    本章介绍如何在生成表单后,可以支持上传图片后可以及时预览图片 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...

  6. BootStrap 智能表单系列 六 表单数据绑定(编辑页面的数据绑定)

    本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartF ...

  7. BootStrap 智能表单系列 八 表单配置json详解

    本章属于该系列的高级部分,将介绍表单中一些列的配置 1.config列的配置: 主要用于控制布局 :config:{autoLayout:true|'1,2,2,4'} true:根据配置项最里层的数 ...

  8. BootStrap 智能表单系列 七 验证的支持

    但凡是涉及到用户编辑信息然后保存的页面,都涉及到一个数据是否符合要求的检查,需要客服端和服务器端的校验的问题: 客服端的校验主要是为了提高用户体验,而服务器端的校验为了数据的合格性 该插件也为您支持到 ...

  9. BootStrap 智能表单系列 五 表单依赖插件处理

    这一章比较简单哦,主要就是生产表单元素后的一些后续处理操作,比如日期插件的渲染.一些autocomplete的处理等,在回调里面处理就可以了, demo: $("input.date-pic ...

  10. BootStrap 智能表单系列 四 表单布局介绍

    表单的布局分为自动布局和自定义布局两种: 自动布局就是根据配置项中第二级配置项中数组的长度来自动使用不同的bootstrap栅格,通过设置autoLayout为true可以实现自动布局 自动以布局就是 ...

随机推荐

  1. OC3大回调模式使用总结（三）block回调

    OC 3大回调模式使用总结(三)block回调 block 又称 代码块,闭包等 是一个匿名的函数,它能够当做一个对象来使用,仅仅只是这个对象非常特殊,是一段代码,他能够保存你写的一段预备性质代码,待 ...

  2. c++ 基于Policy 的 模板编程

    在没真正接触c++  模板编程之前.真的没有想到c++ 还能够这么用.最大的感触是:太灵活了,太强大了. 最初接触模板威力还是在Delta3d中,感觉里面的模板使用实在是灵活与方便,特别是dtAI中使 ...

  3. 如何注释ascx中的代码

    https://forums.asp.net/t/1783252.aspx?Commented+out+ascx+code+not+treated+as+commented+out+ <%--  ...

  4. java输出双引号

    java输出双引号 直接看例子 //输出双引号 public class Test { public static void main(String[] args) { System.out.prin ...

  5. form内部的button_to不submit

    创建: 2017/09/12 更新: 2018/03/17 修正因为博客迁移造成的格式问题 官方文档 http://railsdoc.com/references/button_to 参考文档 htt ...

  6. java 中接口的概念

    接口接口在java中是一个抽象的类型,是抽象方法的集合,接口通常使用interface来声明,一个类通过继承接口的方式从而继承接口的抽象方法.接口并不是类,编写接口的方式和类的很相似,但是他们属于不同 ...

  7. 网络简要<入门篇>对应配置代码

    交换机的配置 (1)交换机的模式: switch>    用户模式,可以查看设备的部分内容 SW-3ceng>enable SW-3ceng#          进入特权模式,可以查看更多 ...

  8. Dubbo的@Reference和@Service说明---1Reference用在消费者2Service用在提供者【import com.alibaba.dubbo.config.annotation.Service;】

    @Reference 用在消费端,表明使用的是服务端的什么服务@RestControllerpublic class RemoteUserController { @Reference(version ...

  9. Visual C++6.0的下载与安装

    1．Visual C++6.0的下载 本书中使用的Visual C++6.0的中文版,读者可以在网上搜索,下载合适的安装包. 2．Visual C++6.0的安装 Visual C++6.0的具体安装 ...

  10. 如何使windows系统ping通VMware下面的linux系统

    引用http://www.linuxidc.com/Linux/2012-11/73749p2.htm 很多人在开始接触Linux或者是嵌入式开发的时候都会遇到一个难题,就是如何在Linux下ping ...