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. Hyperledger Fabric1.4 安装

    Hyperledger Fabric 依赖的软件版本查看官方 github 地址 https://github.com/hyperledger/fabric 下文件 /docs/source/prer ...

  2. EntityFramework Core一劳永逸动态加载模型,我们要知道些什么呢?

    前言 这篇文章源于一位问我的童鞋:在EntityFramework Core中如何动态加载模型呢?在学习EntityFramwork时关于这个问题已有对应园友给出答案,故没有过多研究,虽然最后解决了这 ...

  3. Redis系列(一):Redis简介及环境安装

    提到Redis,大家肯定都听过,并且应该都在项目中或多或少的使用过,也许你觉得Redis用起来挺简单的呀,但如果有人问你下面的几个问题(比如同事或者面试官),你能回答的上来吗? 什么是Redis? R ...

  4. Codeforces - A. Watermelon

    A. Watermelon time limit per test 1 second memory limit per test 64 megabytes input standard input o ...

  5. 5、调试显示应该使用 DebuggerDisplay 而不是误用 ToString

    using System.Diagnostics; namespace ShouldCode.Console { [DebuggerDisplay("Prop1:{Prop1};Prop2: ...

  6. sql server 新建用户 18456

    麻辣各级,今天阴沟里翻船 了,自己在家创建sqlserver新的用户名,一直报错  18456 邮件添加用户名这一套下来是没错. 重要是这样===>要重新启动一下sql server,就ok了. ...

  7. LeetCode 第98题--验证二叉搜索树

    1. 题目 2.题目分析与思路 3.代码 1. 题目 给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数.节点的右子树只包含大于当 ...

  8. threding.local

    作用:为每一个线程开辟一个独立的内存空间 示例 from threading import Thread, local import time obj = local() def test(i): o ...

  9. mysql 行增删改查

    一.增 ); ),(); insert into student(name, age) select name, age from info; 二.删 delete from db1; delete ...

  10. Java单体应用 - 导读

    原文地址:http://www.work100.net/training/monolithic 更多教程:光束云 - 免费课程 Java单体应用 本阶段课程将学习如何进行Java单体Web应用开发,经 ...