主要属性：
　　　　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. Linux和Windows数据同步

    正在做一个小项目,关于Linux和Windows数据同步,新知识很兴奋,比赛很有信心,加油吧少年 项目进行中:今晚实验室包宿开整.

  2. javascriptdocument load 和document ready的区别

    页面加载完成有两种事件,一是ready , 表示文档结构已经加载完成(貋图片等非文字媒体文件),二是onload 指示页面包含图片等文件在内的所有元素都加载完成.   1.执行时间不同: 从字面的意思 ...

  3. 腾讯云服务器安装宝塔面板快速配置LNMP/LAMP网站系统

    我们在选择购买腾讯云服务器之后,有部分用户肯定是用来建站用途的.毕竟云服务器的性能和功能比虚拟主机优秀很多.腾讯云服务器拥有香港.北京.广州.上海.美国等多个机房,可以安装Linux和Windows系 ...

  4. rdlc报表函数

    字符串函数 使用串联运算符和      Visual Basic 常量可将多个字段组合在一起.以下表达式返回两个字段,它们分别位于同一文本框的不同行中: 复制代码 =Fields!FirstName. ...

  5. 微信小程序之蓝牙 BLE 踩坑记录

    前言 前段时间接手了一个微信小程序的开发,主要使用了小程序在今年 3 月开放的蓝牙 API ,此过程踩坑无数,特此记录一下跳坑过程.顺便开了另一个相关的小项目,欢迎 start 和 fork: BLE ...

  6. vue2.0用法技巧汇总

    1.class拼接: 2.select下拉截取: <template> <!--vip班支付报名页面--> <div id="payRecordMain&quo ...

  7. python全栈开发_day13_迭代器和生成器

    一:迭代器 1)可迭代对象 具有内置函数__iter__的数据就是可迭代对象 2)迭代器对象 具有内置函数__next__的数据就是迭代器对象 迭代器对象一定是可迭代对象,可迭代对象不一定是迭代器对象 ...

  8. ASP.NET MVC利用ActionLink实现动态组合查询

    一个文件传输数据表,内有日期.传输协议.传输方向(上传或下载).文件名等信息,完整的表内容显示如下: 现在需要分类查询,即按照协议和传输方向查询.单独的分类查询问题并不大,比如,按协议查询,在View ...

  9. (转)【干货】MySQL 5.7 多实例（多进程）配置教程

    原文:https://blog.csdn.net/zougen/article/details/79567744 https://klionsec.github.io/2017/09/20/mysql ...

  10. CentOS 开启安装EPEL YUM源

    我们用yum安装软件时,经常发现我们的yum源里面没有该软件,需要自己去wget,然后configure,make,make install,太折腾了. 其实,CentOS 还有一个源叫做 EPEL ...