主要属性：
　　　　class="form-inline" 　　水平排列

　　　　class="form-group"　　　组键
　　　　form-control　　 　　　　圆角方框发光
　　　　input-lg　　 　　　　　　 输入框变大

　　　　input-sm　　　　 　　　　 输入框变小
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>表单</title>

        <link rel="stylesheet" href="css/bootstrap.min.css" />

    </head>

    <body>

        <form class="form-inline">

            <div class="form-group has-success" >

                <script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>

                <script type="text/javascript" src="js/bootstrap.min.js" ></script>

                <label class="control-label" for="">这是一个输入框：</label>

                <input type="text" class="form-control" placeholder="这是一个输入框" input-lg>

            </div>

            <div class="form-group">

                <label class="form-label" for="">这是一个输入框：</label>

                <select class="form-control" name="" id="">

                    <option value="">北京</option>

                    <option value="">北京</option>

                    <option value="">北京</option>

                </select>

            </div>

            <div class="form-group has-error" >

                <label class="form-label" for="">这是一个输入框：</label>

                <textarea class="form-control" name="" id="" cols="30" rows="10"></textarea>

            </div>

        </form>

    </body>

</html>

源码

效果图：

　　　　

 

bootstrap学习笔记细化(表单)的更多相关文章

  1. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

  2. AngularJS 1.2.x 学习笔记（表单校验篇）

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

  3. vue学习笔记(六)表单输入绑定

    前言 在上一章vue学习笔记(四)事件处理器这一篇博客的内容中,我们已经了解vue是如何绑定事件的,而本篇博客主要讲解的是vue中表单输入的绑定,通常我们自己提交信息的时候都是通过表单将信息到服务器的 ...

  4. Symfony2学习笔记之表单

    对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最 ...

  5. bootstrap学习笔记细化(按钮)

    button:btn 圆角灰色按钮 button:btn btn-default 圆角灰色边框按钮 button:btn btn-success 绿色 button:btn btn-primary 蓝 ...

  6. [学习笔记]--Jfinal 表单提交附件

    近期.项目里面用到了Jfinal 里面的上传附件. Jfinal 的Controller 里面提供了一个 getFile系列方法提供文件上传. 我这里呢,是文件上传和表单參数一起提交. 页面类似下图: ...

  7. 20151223jquery学习笔记--Ajax表单提交

    传统的表单提交, 需要多次跳转页面, 极大的消耗资源也缺乏良好的用户体验. 而这款form.js 表单的 Ajax 提交插件将解决这个问题.一． 核心方法官方网站: http://malsup.com ...

  8. angular2 学习笔记 ( Form 表单 )

    refer : https://angular.cn/docs/ts/latest/guide/forms.html https://angular.cn/docs/ts/latest/cookboo ...

  9. [知了堂学习笔记]_Jquery_Validate 表单校验的使用

    一.效果图: 二.JqueryValidate的好处 在做注册.或者类似以上的表单提交的时候,大家是不是都很烦那种,把数据拿到后台去判断, 可能经过了正则表达式之类的复杂判断,然后发现数据错误.接着通 ...

随机推荐

  1. 架构师养成记--21.netty编码解码

    背景 作为网络传输框架,免不了哟啊传输对象,对象在传输之前就要序列化,这个序列化的过程就是编码过程.接收到编码后的数据就需要解码,还原传输的数据. 代码 工厂类 import io.netty.han ...

  2. Java NIO学习与记录（一）：初识NIO

    初识 工作中有些地方用到了netty,netty是一个NIO框架,对于NIO却不是那么熟悉,这个系列的文章是我在学习NIO时的一个记录,也期待自己可以更好的掌握NIO. 一.NIO是什么? 非阻塞式I ...

  3. 快速沃尔什变换 FWT 学习笔记【多项式】

    〇.前言 之前看到异或就担心是 FWT,然后才开始想别的. 这次学了 FWT 以后,以后判断应该就很快了吧? 参考资料 FWT 详解 知识点 by neither_nor 集训队论文 2015 集合幂 ...

  4. Apache Maven的入门使用之常用操作以及核心概念介绍（2）

    我们接着上篇文章,来继续介绍Maven中几个核心的概念: POM (Project Object Model) Maven 插件 Maven 生命周期 Maven 依赖管理 Maven 库 POM ( ...

  5. js 实现星级评分

    最近的项目中有一个星级评分的需求,  自己就写了一下, 由于可能一个页面要用到多个,就采用了面向对象的写法. 用到的png图片也放到这里.    js要用到jquery. css: .sr-star{ ...

  6. 【Maven学习】maven中依赖的配置详解

    根元素project下的dependencies可以包含一个或者多个dependency元素,以声明一个或多个项目依赖.每个依赖可以包含的元素有: groupId,artifactId和version ...

  7. EasyMock set方法报错: java.lang.AssertionError

    有返回值的方法没问题, 直接andReturn就行了. EasyMock.expect(info.getWebTitle()).andReturn(StringUtils.EMPTY).anyTime ...

  8. jenkins创建构建任务

    构建项目类型 点击 Jenkins 首页 “创建一个新任务” 的链接, 输入任务名称 Jenkins 提供了六种类型的任务. 构建一个自由风格的软件项目 这是Jenkins的主要功能.Jenkins ...

  9. MapReduce原理——分而治之

    一.MapReduce简介 二.MapReduce并行处理的基本过程 三.MapReduce实际处理流程 四.一个job的运行流程 一.MapReduce简介 MapReduce是一种并行可扩展计算模 ...

  10. a+b+c的N次方展开

    今天在给儿子看笔记本上的照片的时候,偶然发现了2009年手绘的一张a+b+c的N次方展开图,故写下面的博客以记之,为年轻时代的我点个赞! 20年前的我,一个充满激情的且富有专注力的数学发烧友! 10年 ...