Bootstrap基础学习(二)—表单

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

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

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

这篇学习网格系统(Grid System) Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 1.网格选项: 超小设备手机(<768px) 小型设备平板电脑(≥768px) 中型设备台式电脑(≥992px) 大型设备台式电脑(≥1200px) 网格行为一直是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的以折叠开始,断点以上是水平的最大容器宽度 None (auto) 750px…

Bootstrap学习笔记(二) 表单

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

Bootstrap <基础十二>下拉菜单（Dropdowns）

Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与下拉菜单(Dropdown) JavaScript 插件的互动来实现. 如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title> <li…

bootstrap基础学习【导航条、分页导航】（五）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[导航条.分页导航](五)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script src="http://libs.…

bootstrap基础学习【排版】（一）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>bootstrap基础学习(一)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script type="text/javascript&quo…

MVC遇上bootstrap后的ajax表单模型验证

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 -- 表格样式.表单布局 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…

Python入门基础学习二

Python入门基础学习二猜数字小游戏进阶版修改建议: 猜错的时候程序可以给出提示,告诉用户猜测的数字偏大还是偏小: 没运行一次程序只能猜测一次,应该提供多次机会给用户猜测: 每次运行程序,答案可以是随机的,因为程序答案是固定的话容易导致答案外泄. 针对第一条改进建议,就需要用到条件分支,判断猜测的数字和答案比是大还是小,Python的比较操作符跟C一样. 条件分支 if 条件: 条件为真(Ture)执行的操作 else: 条件为假(False)执行的操作不用大括号,用缩进,冒号后面会自…

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…

Flask基础(16)-->WTForms表单创建和简单验证

Flask基础(16)-->WTForms表单创建和简单验证前言:使用Flask_WTF需要配置参数SECRET_KEYCSRF_ENABLED是为了CSRF(跨站请求伪造)保护.SECRET_KEY用来生成加密令牌,当CSRF激活的时候,该设置会根据设置的秘钥生成加密令牌. 下一篇我再为大家详细叙述一下CSRF相关内容. 下面是为大家准备的一个示例案例: WTForms_test.py(视图页) from flask import Flask,render_template,request,…

Bootstrap基础学习 ---- 系列文章

[Bootstrap基础学习]05 Bootstrap学习总结 [Bootstrap基础学习]04 Bootstrap的HTML和CSS编码规范 [Bootstrap基础学习]03 Bootstrap插件示例 [Bootstrap基础学习]02 Bootstrap的布局组件应用示例 [Bootstrap基础学习]01 Bootstrap的CSS [Bootstrap基础学习]00 序 …

bootstrap基础学习【菜单、按钮、导航】（四）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[菜单.按钮.导航](四)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> <script src="http://libs.…

bootstrap基础学习【网格系统】（三）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>bootstrap基础学习[网格系统](三)</title> <link rel="stylesheet" href="css/bootstrap.min.css" /> </head> <body style="pa…

HTML基础：用表单写一个简易登录页面

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML基础:用表单编写登录页面</title> </head> <body> <form action="#" method="get"> <label>用户登录</label><br>…

Python基础学习二

Python基础学习二 1.编码 utf-8编码:自动将英文保存为1个字符,中文3个字符.ASCll编码被囊括在内. unicode:将所有字符保存为2给字符,容纳了世界上所有的编码. 2.字符串内置函数 replace()函数:替换字符串内字符 str1='a1234' str2=str1.replace('a','A') #将字符a替换为A 需要注意的是,在函数replace()的作用下,虽然修改了str1的内容,但是变量str1不变,其修改存储在str2中. ord()函数:获取字符的ut…

Go基础学习(二)

数组[array] 数组定义[定义后长度不可变] 12 symbol := [...]string{USD: "$", EUR: "€", GBP: "￡", RMB: "￥"}fmt.Println(RMB, symbol[RMB]) 指针数组 12345678910111213 var array3 [5]*intfor i := range array3 { array3[i] = new(int)}*array3[0]…

Bootstrap学习-排版-表单

1.标题 <h1>~<h6>,所有标题的行高都是1.1(也就是font-size的1.1倍). 2.副标题 <small>,行高都是1,灰色(#999) <h1>主标题 <small>副标题</small> </h1> 3.Body样式 body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px;…

bootstrap学习笔记(表单)

1.基础表单 :对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset.legend.label标签进行了定制. fieldset { min-width: 0; padding: 0; margin: 0; border: 0; } legend { display: block; width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: inherit; co…