主要属性：
　　　　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. 人工鱼群算法超详细解析附带JAVA代码

    01 前言 本着学习的心态,还是想把这个算法写一写,给大家科普一下的吧. 02 人工鱼群算法 2.1 定义 人工鱼群算法为山东大学副教授李晓磊2002年从鱼找寻食物的现象中表现的种种移动寻觅特点中得到 ...

  2. 考试题 T2

    题意分析 首先 要求起点终点不连通 再结合数据范围 就是最小割了 首先我们可以建一个图出来 如果\(x\)可以到\(y\)的话 那么我们就从\(x\)向\(y\)连一条代价为\(h[x]-h[y]+1 ...

  3. [原创]SSH 隧道转发

    目录 简介 本地SSH隧道 远程SSH隧道 FAQ 免密码登陆 自动重连 简介 建立ssh隧道常用于, 通过一台公网的主机或者是大家都可以访问的主机做跳转机,来访问内部或者外部不能直接访问的机器. 项 ...

  4. go 语言学习 1

    Go语言命名 Go语言关键字 1.Go语言有25个关键字: 2.关键字用途: var :用于变量的声明const :用于常量的声明type :用于声明类型func :用于声明函数和方法package ...

  5. Sci-Hub

    提到Sci-Hub这个文献下载利器,大家肯定都不陌生.你在各大SCI杂志上看到的英文文献,90%以上都能免费下载.因为它严重侵犯了爱思唯尔.施普林格.Wiley等各大出版商的利益,遭到起诉与封杀. 不 ...

  6. 3.1）DFM-塑胶件设计总章

    本章目的:各种塑胶工艺了解,DFM-塑胶件的设计准则是依据哪种工艺. 1.塑胶概念 塑胶的定义(美国塑料工业协会): 塑胶主要由碳.氧.氢和氮及其他有机或无机元素所构成,成品为固体,在制造过程中是熔融 ...

  7. MongoDB学习笔记(二)

    MongoDB的其他方法: 显示指定数目的数据: 1.在mongodb中查询指定数目的记录,可以使用: db.collectionname.find().limit(number); 2.在mongo ...

  8. ArduinoNano卡在上传，无法烧录

    卡在“上传...”.过了很久被告知失败. 上午在开发版管理器中将Arduino AVR Boards从1.6.20升级到1.6.22,出现这个问题. 再安装回1.6.20,问题未被解决. 查阅资料无果 ...

  9. docker相关命令

    1. 进入docker容器 ① 查看运行的容器:docker ps -a ②  进入容器:docker exec -ti [容器id] bash ③ 退出容器:eixt

  10. Fedora 24 python3.5 安装M2Crypto

    安装M2Crypto#python3 -m pip install M2Crypto 出现错误 gcc: /usr/lib/rpm/redhat/redhat-hardened-cc1:Nosuch ...