主要属性：
　　　　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_异常处理（Exception）

    异常:Exception try{ //捕获异常 }catch{ //处理异常 } 异常处理机制: 1.在try块中,如果捕获了异常,那么剩余的代码都不会执行,会直接跳到catch中, 2.在try之 ...

  2. PHP下的浮点运算不准的解决办法

    首先看一段代码: 首先看一段代码: <?php $a = 0.1; $b = 0.7; var_dump(($a + $b) == 0.8); 打印出来的值居然为 boolean false P ...

  3. XMPPManager 解析

    一.用户登录流程 用户登录流程.png 注意:XMPP核心文件,基于TCP的XML流的传输,XMPPFrame框架是通过代理的方式实现消息传递的 实现用户登录的步骤如下: 1.实例化XMPPStrea ...

  4. js 移动端获取当前用户的经纬度

    一.HTML5 geolocation的属性 if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(onSuccess ...

  5. ui4-5

    2016PS第4-5周 图像的高级编辑方法: 4-1.用变换将照片放入相框 1.打开素材文件01-1.jpg 2.执行:文件/置入,选素材01-2.jpg 3.执行:编辑/变换/缩放,缩小照片,暂不退 ...

  6. Hexo博客系列(三)-将Hexo v3.x个人博客发布到GitLab Pages

    [原文链接]:https://www.tecchen.xyz/blog-hexo-env-03.html 我的个人博客:https://www.tecchen.xyz,博文同步发布到博客园. 由于精力 ...

  7. HTML5创业的另一种可能

    当一种新的颠覆式技术出现,是投靠大平台还是坚持走独立的道路? HTML5(下称H5)火了.在多数人还没完全弄清楚什么是H5时,它已悄无声息地潜入移动端,并渐呈燎原之势火速席卷云寻觅云寻觅. 以前,H5 ...

  8. java常量类的实现方式_枚举类＿项目实践

    前言 众所周知,系统里有很多比如订单状态.审核状态:性别.结算方式.交易类型等属性,这些属性只有几个值,一般用0.1.2.3等的数字标识存入数据库,每次对这些属性所属对象的增删改操作,都会在代码里给状 ...

  9. 四大组件之Service

    1 通过startService 1.1 与调用者相对独立,没有返回,用于播放音乐,下载文件 1.2 如果是调用者自己直接退出而没有调用stopService的话,Service会一直在后台运行.下次 ...

  10. WPF DataTemplate與ControlTemplate

    一. 前言     什麼是DataTemplate? 什麼是ControlTemplate? 在stackoverflow有句簡短的解釋 "A DataTemplate, therefore ...