主要属性：
　　　　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. docker微服务部署之：二、搭建文章微服务项目

    docker微服务部署之:一,搭建Eureka微服务项目 一.新增demo_article模块,并编写代码 右键demo_parent->new->Module->Maven,选择M ...

  2. 2016级算法第六次上机-F.AlvinZH的学霸养成记VI

    1082 AlvinZH的学霸养成记VI 思路 难题,凸包. 分析问题,平面上给出两类点,问能否用一条直线将二者分离. 首先应该联想到这是一个凸包问题,分别计算两类点的凸包,如果存在符合题意的直线,那 ...

  3. yum安装软件所在目录的查询

    rpm -qa|grep 软件名 rpm -ql 上面语句返回的内容

  4. 对HTTP和TCP的理解

    1.TCP连接 手机能够使用联网功能是因为手机底层实现了TCP/IP协议,可以使手机终端通过无线网络建立TCP连接.TCP协议可以对上层网络提供接口,使上层网络数据的传输建立在“无差别”的网络之上. ...

  5. 踩方格 OpenJ_Bailian - 4103

    有一个方格矩阵,矩阵边界在无穷远处.我们做如下假设:a.    每走一步时,只能从当前方格移动一格,走到某个相邻的方格上:b.    走过的格子立即塌陷无法再走第二次:c.    只能向北.东.西三个 ...

  6. Apache Maven的入门使用之项目的基本构建（1）

    前言 最近在研究java框架struts2的相关漏洞,然后就去看了官方给出的文档.在看文档的过程中发现使用到了Apache Maven这个项目管理工具,我在网上搜索了一下,大多数文章都写得不是很系统, ...

  7. MySQL 连接注意事项

    外连接 A LEFT JOIN B join_condition 数据表B的结果集依赖数据表A 数据表A的结果集根据左连接条件依赖所有数据表 B表除外). 左外连接条件决定如何检索数据表B(在没有指定 ...

  8. Tomcat *的下载（绿色版和安装版都适用）

    不多说,直接干货! 1.先下载tomcat,到http://tomcat.apache.org/ 2.注意:下载可以下载zip格式或exe格式的,其中zip格式的只要解压缩再配置下环境变量就可以使用了 ...

  9. 让字体在div容器中垂直居中

    1. 只显示一行数据的话: 给容器设置height和line-height,并使两个值相等,再加上over-flow:hidden .test{ height:40px; line-height:40 ...

  10. Go语言学习笔记三： 常量

    Go语言学习笔记三: 常量 定义常量 常量就是在声明后不能再修改的量. const x int = 100 const y string = "abc" const z = &qu ...