bootstrap的好看的表单

Bootstrap_表单_表单样式

一.基础表单 <form > <div class="form-group"> <label>邮箱:</label> <input type="email" class="form-control" placeholder="请输入您的邮箱地址"> </div> <div class="form-group"> <la

MVC遇上bootstrap后的ajax表单验证使用bootstrap后他由他自带的样式has-error,想要使用它就会比较麻烦,往常使用jqueyr.validate的话只有使用他自己的样式了,而且有模型在使用模型验证更方便点.怎么解决呢? 当然你可以专门写一个针对此的jquery插件,我觉得蛮麻烦的,喜欢写插件的研究下吧. 首先Nuget获取一个 MVC EditorTemplates for Bootstrap 3 的组件,有了他以后就有了一些模版,比如比较简单的一个Text: @mo

Bootstrap系列 -- 12. 水平表单

Bootstrap框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右) 在Bootstrap框架中要实现水平表单效果,必须满足以下两个条件: 1.在<form>元素是使用类名“form-horizontal”. 2.配合Bootstrap框架的网格系统. 在<form>元素上使用类名“form-horizontal”主要有以下几个作用: 1.设置表单控件padding和margin值. 2.改变“form-group”的表现形式,类似于网格系统的

Bootstrap学习笔记(二) 表单

在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等. 在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果. 1.宽度变成了100% 2.设置了一个浅灰色(#ccc)的边框 3.具有4px的圆角 4.设置阴影效果,并且元素

Bootstrap -- 表格样式、表单布局

Bootstrap -- 表格样式.表单布局 1. 表格的一些样式举例: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <link rel="stylesheet

基于Bootstrap+jQuery.validate Form表单验证实践

基于Bootstrap jQuery.validate Form表单验证实践项目结构 : github 上源码地址:https://github.com/starzou/front-end-example 点击打开 1.form 表单代码 <!DOCTYPE html> <html> <head> <title>Bootstrap Form Template</title> <meta charset="utf

Bootstrap历练实例：表单帮助文件

Bootstrap表单控件可以在输入框input上有一个块级帮助文本,为了添加一个占用整个宽度的内容块,请在input后添加help-block. 实例: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:表单帮助文本<

Bootstrap历练实例：表单控件大小

表单控件大小您可以分别使用 class .input-lg 和 .col-lg-* 来设置表单的高度和宽度. 实例: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:表单控件大小</title> <met

Bootstrap历练实例：表单控件状态(禁用的字段集fieldset)

禁用的字段集 fieldset 对 <fieldset> 添加 disabled 属性来禁用 <fieldset> 内的所有控件. <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Bootstrap历练实例:表单控件状态(禁

Bootstrap历练实例：表单控件状态(禁用)

禁用的输入框 input 如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框,还会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Boots

Bootstrap历练实例：表单控件状态(焦点)

输入框焦点当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Bootstrap历练实例:表单控件状态(焦点)</title> <m

bootstrap基础学习【表单含按钮】（二）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[表单](二)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body style="padd

使用RequireJs和Bootstrap模态框实现表单提交

下面我将使用requirejs结合模态框实现三五行代码部署表单提交操作. 传统开发思路如下:

Bootstrap系列 -- 11. 基础表单

表单主要功能是用来与用户做交流的一个网页控件,良好的表单设计能够让网页与用户更好的沟通.表单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文本域和按钮等.其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同. <form role="form"> <div class="form-group"> <label for="exampleInputEmail1">邮箱

Bootstrap系列 -- 41. 带表单的导航条

有的导航条中会带有搜索表单,在Bootstrap框架中提供了一个“navbar-form”,使用方法很简单,在navbar容器中放置一个带有navbar-form类名的表单.navbar-left”让表单左浮动,更好实现对齐.在Bootstrap框架中,还提供了“navbar-right”样式,让元素在导航条靠右对齐. <div class="navbar navbar-default" role="navigation"> <div class=

Bootstrap知识记录：表单和图片

一．表单Bootstrap 提供了一些丰富的表单样式供开发者使用.1.基本格式//实现基本的表单样式<form><div class="form-group"><label>电子邮件</label><input type="email" class="form-control"placeholder="请输入您的电子邮件"></div><div cl

用jQuery Validate+layer插件实现好看的表单提交效果

作为初学者,以前做表单验证都是自己写的,目的是让自己更好的了解代码,加深自己对javascript的理解,但是其实在很久都知道有一个很好用的表单验证插件:jQuery Validate.js,一直都没时间去自己敲了练习一下,今天终于忍不住想试一试这个插件. 1,首先引入必要的js文件 <script src="jquery-2.1.4/jquery.min.js"></script> <script src="jquery-validation-

Bootstrap入门六：表单

表单主要包含表单域.输入框.下拉框.单选框.多选框和按钮等控件. 1.基本实例单独的表单控件会被自动赋予一些全局样式.所有设置了 .form-control 类的 <input>.<textarea>和 <select> 元素都将被默认设置宽度属性为 width: 100%;. 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列. <form> <div class="form-group"&

bootstrap学习笔记细化(表单)

主要属性: class="form-inline" 水平排列 class="form-group" 组键 form-control 圆角方框发光 input-lg 输入框变大 input-sm 输入框变小 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单</title> <link rel=&q

Bootstrap基础学习(二)—表单

一.表单 1.基本格式  <form> <div class="form-group"> <label>姓名 </label> <input type="text" class="form-control" placeholder="请输入您的姓名"/> </div> <div class="form-

Bootstrap之表格、表单应用

代码: <!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"/> <title>学生列表</title> <link href="bootstrap/css/bootstrap.css" rel=&qu