<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>内联表单</title>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<body>

<div class="container">

<form action="" role="form" class="form-inline">

<div class="form-group">

<label for="name" class="sr-only">名称</label>

<input type="text" class="form-control" id="name" placeholder="请输入名称">

</div>

<div class="form-group">

<label for="inputfile" class="sr-only">文件输入</label>

<input type="file" id="inputfile">

<p class="help-block">这里是块级帮助文本的实例。</p>

</div>

<div class="checkbox">

<label>

<input type="checkbox">请打勾

</label>

</div>

<button type="submit" class="btn btn-default">提交</button>

</form>

</div>

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

本文转自 素颜猪 51CTO博客,原文链接:http://blog.51cto.com/suyanzhu/1895700

bootstrap19-内联表单相关推荐

  1. layui数据表格(一:基础篇,数据展示、分页组件、表格内嵌表单和图片)

    表格展示神器之一:layui表格 前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...

  2. iview 的modal内form表单校验的坑

    在开发iview-admin时,在modal内进行表单校验,发现一个问题,因为新增和编辑modal是共用一个modal,在点击编辑,打开modal进行校验没有问题,之后关闭modal,在点击新增按钮, ...

  3. html中内联的form,bootstrap3.0教程之表单(form)使用详解

    本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单.本文主要来讲解一下内容: 1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 ...

  4. Bootstrap3 行内表单

    行内表单 为<form>元素添加.form-inline类,就可以创建一个表现为inline-block的行内表单.行内表单采用紧凑布局,它的所有控件都在一行内显示,标签和输入框使用左对齐 ...

  5. 4.4、Bootstrap V4自学之路------组件---表单

    为什么80%的码农都做不了架构师?>>>    表单控件 下面是一个Bootstrap支持的表控件以及自定义类的完整列表.额外的文档对每个组都是可用的. 类 作用 支持的变量 .fo ...

  6. 一步一步学习Bootstrap系列--表单布局

    前言:Bootstrap 属于前端 ui 库,通过现成的ui组件能够迅速搭建前端页面,简直是我们后端开发的福音,通过几个项目的锻炼有必要总结些常用的知识,本篇把常用的Bootstrap表单布局进行归纳 ...

  7. bootstrap学习(三)表单

    bootstrap学习(三)表单 基本实例: from-group:可以是其内的标签排列更好 from-control:使标签宽度为100% <form><div class=&qu ...

  8. Bootstrap全局css样式_表单

    <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

  9. Bootstrap学习笔记(四)-----Bootstrap每天必学之表单

    本文主要讲解的是表单,这个其实对于做过网站的人来说,并不陌生,而且可以说是最为常用的提交数据的Form表单.本文主要来讲解一下内容: 1.基本案例 2.内联表单 3.水平排列的表单 4.被支持的控件 ...

最新文章

  1. Linux下 制作本地yum安装源 openssl离线安装 gcc-c++离线安装
  2. JZOJ 5622. 【NOI2018模拟4.2】table
  3. HX720/HX711 数据采集及处理姿态解析(公式及源码)
  4. 工业RS485接口电路设计
  5. Eclipse反编译插件JadClipse安装及使用
  6. pythonfor循环遍历字典的属性_python-嵌套和for循环中的字典和列表中的项...
  7. windows hosts 作用以及常见问题解决
  8. oracle11g运行超慢,oracle11g安装后电脑启动很慢怎么解决
  9. 树算法系列之四:XGBoost
  10. 大泥王怎么调时区_卡西欧大泥王功能教学及怎么调时间
  11. 支付宝登录java和android
  12. 针对测试人员,这些业务安全漏洞你是否会测?
  13. linux勒索病毒分析,永恒之蓝的勒索病毒tasksche.exe样本分析
  14. python怎么绘制图例_用Python绘制图例
  15. 树的四种遍历 先序 中序 后序 层次
  16. Allegro PCB的5种形状Symbol类型
  17. 消失的阅读量:你家公众号还能活多久?
  18. php mysql 开发成本_Java凭什么比PHP+MYSQL开发的B2B软件值钱
  19. 如何将彩色文本打印到终端?
  20. 免费下载思科CCNP 642-802考试题库

热门文章

  1. 设计模式一:设计模式遵循的原则
  2. eBay测试老兵的修炼之道:如何从测试“小工”到测试“专家”?
  3. APP功能需求第一版
  4. tomcat(2)--集群
  5. i18n and L10n
  6. Hibernate Session的Flush模式
  7. Linux添加新硬盘、分区、格式化、自动挂载
  8. 高性能的MySQL(1)锁和MVCC
  9. 安卓 存储---SharedPreferences
  10. bottle+jquery 前后端分离