bootstrap 表单类

表单美化

用法: 向父元素 <form role="form"></form>     添加 role="form"

   把标签和控件放在   .form-control 类的div里面

   向所有的文本元素   input  textarea   seclect   添加类   .form-control

  

三种表单布局类:  垂直表单(默认)    内联表单     水平表单

摘自菜鸟教程 
默认表单
<form role="form">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<label for="inputfile">文件输入</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> 内联表单 需要对里面的元素宽度进行设置

bootstrap 表单类的更多相关文章

  1. 详解Bootstrap表单组件

    表单常见的元素主要包括:文本输入框.下拉选择框.单选框.复选框.文本域.按钮等.下面是不同的bootstrap版本: LESS:  forms.less SASS:  _forms.scss boot ...

  2. 第二百三十四节,Bootstrap表单和图片

    Bootstrap表单和图片 学习要点: 1.表单 2.图片 本节课我们主要学习一下 Bootstrap 表单和图片功能,通过内置的 CSS 定义,显示各 种丰富的效果. 一.表单 Bootstrap ...

  3. Bootstrap表单

    Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) -> 这个不好看,都是手机版了,PC版占一排不好看: 内联表单 -> 我相信这个才是你想要的,PC版响应横排,手机版响应竖 ...

  4. bootstrapValidator.js,最好用的bootstrap表单验证插件

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

  5. bootstrap表单带验证

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  6. bootstrap 表单控件 控件状态 控件大小 help-block

    bootstrap 表单控件 控件状态 控件大小 help-block <!DOCTYPE html> <html lang="en"> <head& ...

  7. 基于Bootstrap表单验证

    基于Bootstrap表单验证 GitHub地址:https://github.com/chentangchun/FormValidate 使用方式: 1.CSS样式 .valierror { bor ...

  8. web(四)html表单类标签

    表单类标签 操作者用于输入信息,并将信息提交给服务器的标签集合. 表单标签介绍 form标签:表单元素(其余标签)标签的容器标签 input标签:用于用户信息输入的标签. button标签:按钮标签. ...

  9. Python的Django框架中forms表单类的使用方法详解

    用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...

随机推荐

  1. 通过例子学习C++(三)最大公约数,并知其然

    本文是通过例子学习C++的第三篇,通过这个例子可以快速入门c++相关的语法. 题目要求:输入两个整数,求其大公约数. 解答方法一:两个数的最大公约数,是这两个数中的小数,或者是这2个数的公约数中的最大 ...

  2. EntityFramework Core表名原理解析,让我来,揭开你神秘的面纱

    前言 上一节我们针对最开始抛出的异常只是进行了浅尝辄止的解析,是不是有点意犹未尽的感觉,是的,我也有这种感觉,看到这里相信您和我会有一些疑惑,要是我们接下来通过注解.Fluent APi.DbSet分 ...

  3. MongoDB Community 的安装和卸载

    MongoDB在他们的仓库中提供官方支持的包,该仓库包括以下软件包 mongodb-org:自动安装下面的四个组件安装包 a.mongodb-org-server:mongod的守护进程和相关的配置以 ...

  4. .net Core 使用IHttpClientFactory请求

            导读:本文已添加在晨曦微服务之旅,现在自己在尝试微服务架构,一边学边做项目快速的进入状态.当然在学习的过程中会将自己学到的知识进行分享. 一.为什么不用HttpClient       ...

  5. Spring Boot2 系列教程 (十一) | 整合数据缓存 Cache

    如题,今天介绍 SpringBoot 的数据缓存.做过开发的都知道程序的瓶颈在于数据库,我们也知道内存的速度是大大快于硬盘的,当需要重复获取相同数据时,一次又一次的请求数据库或者远程服务,导致大量时间 ...

  6. log日志拦截

    简介 主要记录一下项目中的日志拦截和异常拦截,由于之前公司项目为单体项目,所使用的日志拦截较为简单,只是用拦截器进行前后对日志的拦截,异常拦截直接使用@ExceptionHandler,而现在公司接口 ...

  7. vue实现checked 全选功能

    记录一下 module.data = {  result: {}, items: [] //初始化全选按钮, 默认不选 ,isCheckedAll: false};module.vue = new V ...

  8. LeetCode 第20题--括号匹配

    1. 题目 2.题目分析与思路 3.代码 1. 题目 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须用相同类型的右括号闭 ...

  9. “Your build settings specify a provisioning profile with the UUID “”, however, no such provisioning profile was found”

    解决方法: 终端命令行输入下面语句,删除所有的Profilescd ~/Library/MobileDevice/Provisioning\ Profiles/rm *.mobileprovision

  10. git 工作中实用合并分支

    合并分支 .克隆远程分支 git clone -b dev1. url .创建本地分支,并关联远程分支 git checkout -b dev_wt orgin/dev_wt .合并某分支到当前分支 ...