Bootstrap快速学习笔记(2)表单系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之二

本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦:

  • 表单控件大小
  • 表单控件状态
  • 按钮
  • 图像

详细介绍

  • 表单控件大小表单控件大小可以通过给表单控件添加class类来实现,如果想要比较大,则添加input-lg类,如果想要比较小, 则添加input-sm类,但这仅是对高度进行了处理,如果要对宽度进行处理,需要在每个input控件外围添加div容器并带有col-xs-4类,并 且要在这组控件的外围添加带有row类或者form-group类(如果form标签添加了form-horizontal类的话)的div容器
  • 表单控件状态如果想对控件设置表单控件状态,比如获取焦点状态,需要给该控件添加form-control类;再比如禁用状态,只需 要在input控件的末尾添加disabled属性;还有验证属性,分为成功状态、警告状态和错误状态三种,可以分别通过class类has- success\has-warning\has-error来实现,并且这三种类要和form-group类在一起,如果想将各种状态的icon显示出 来,还要在has-success等类后面添加has-feedback类,并且要在input控件后边添加一个span元素:<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>;提示状态,就是在input控件后边添加文字提示,通过span元素 来实现,<span class="help-block">你输入的信息是正确的</span>,其中help-block类是必须的,文字内容可根据实 际情况修改
  • 按钮按钮可按照风格分为:btn btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link,以上class类分别对应不同的按钮样式和不同的用途,其中btn为每个类所必须的;按照大小可分为:btn-lg btn-sm btn-xs,分别对应大型按钮、小型按钮、超小型按钮;通过btn-block按钮让按钮充满整个父元素,即宽度设置为100%;按钮禁用的两种方法: 在按钮标签中添加disabled属性或者添加disabled类,其中添加disabled类不能禁用按钮的默认行为
  • 图像图像按照样式风格可分为:img-responsive img-rounded img-circle img-thumbnail,分别对应响应式图片、圆角图片、圆形图片、缩略图片;并且Bootstrap提供了200多个icon小图标,通 过<span class="glyphicon glyphicon-search"></span>来实现,其中的类名决定了使用哪个icon,这里使用的是搜索图标icon,详细 可查询http://getbootstrap.com/components/#glyphicons

注意:知识的积累是一个漫长的过程,请继续关注后续内容

时间: 2024-10-12 13:49:51

Bootstrap快速学习笔记(2)表单系列之二的相关文章

Bootstrap快速学习笔记(2)表单系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(2)表单系列之一 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: .form-control类 水平表单 内联表单 详细介绍 form-control类把该类直接添加到控件上: 1.宽度变成了100%:2.设置了一个浅灰色(#ccc)的边框:3.具有4px的圆角:4.设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化:5.设置了placeholder的颜色为#999 水平表单最外层form标签要

Bootstrap快速学习笔记(1)排版系列之二

欢迎收看大奥编写的Bootstrap快速学习笔记(1)排版系列之二 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 表格 表格行的类 详细介绍 表格表格是Bootstrap的基础组件之一,有一个基础样式和四个附加样式以及一个响应式样式,全部通过class类来实 现,.table:基础表格,这是无论哪种类型的表格都必不可少的类:.table-striped:斑马线表格,更具可读性:.table- bordered:带边框的表格:.table-hover:鼠

Bootstrap快速学习笔记(1)排版系列之一

欢迎收看大奥编写的Bootstrap快速学习笔记(1)排版系列之一 本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦: 标题 段落 强调内容 粗体和斜体 强调相关的类 文本对齐风格 列表 代码展示 详细介绍 标题 Bootstrap重写了h1-h6标题的样式属性并自定义了.h1-.h6类,并用small标签来显示副标题 段落 Bootstrap重写了p标签的样式属性 强调内容 .lead类改变文本样式 粗体和斜体 粗体<strong><b>斜体

[学习笔记]--Jfinal 表单提交附件

最近,项目里面用到了Jfinal 里面的上传附件.Jfinal 的Controller 里面提供了一个 getFile系列方法提供文件上传. 我这里呢,是文件上传和表单参数一起提交.页面类似下图: 这里form表单里面使用了 enctype="multipart/form-data" .先看看Jfinal手册的说明吧!大家看了就知道了 然后还有个问题 如果是表单提交 还不可以用ajax 提交,具体的原因呢也找到了 http://www.oschina.net/question/9410

Symfony2学习笔记之表单

对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最重要的内容. Symfony2 的Form组件是一个独立的类库,你可以在Symfony2项目之外使用它. 创建一个简单的表单:假设你要创建一个应用程序的todo列表,需要显示一些任务.因为你的用户需要编辑和创建任务,所以你需要创建一个表单.在你开始之前,首先来看通用的Task类,用来表示和存储一个单

Bootstrap 学习笔记 之表单(4 day)

Bootstrap学习到这里,理解了为什么它是一个框架,所谓的框架,目前看来就是它本身提供了一套完整的HTML结构和样式. 我们在使用的时候,只要按照这套规则来搭建HTML结构和加上相应的样式名后就可以了. 今天学习的是表单, Bootstrap 提供了下列类型的表单布局: 垂直表单(默认) 内联表单 水平表单 需要一提的就是表单的状态: 表单控件状态 除了 :focus 状态(即,用户点击 input 或使用 tab 键聚焦到 input 上),Bootstrap 还为禁用的输入框定义了样式,

Bootstrap学习笔记(四)表单input

单行输入框,常见的文本输入框,也就是input的type属性值为text.在Bootstrap中使用input时也必须添加type类型,如果没有指定type类型,将无法得到正确的样式,因为Bootstrap框架都是通过input[type="?"](其中?号代表type类型,比如说text类型,对应的是input[type="text"])的形式来定义样式的. <form role="form"> <div class=&quo

Codeigniter入门学习笔记14—表单的验证

很久很久以前学习Codeigniter的笔记记录,很随意,但都是自己记录的,希望对需要的人有所帮助. 本文使用word2013编辑并发布 Postbird | There I am , in the world more exciting! Postbird personal website : http://www.ptbird.cn 表单验证 1.add_user ????] 2.form_check() ???? 3. ? 1.加载 ????$this->load->library('f

[知了堂学习笔记]_Jquery_Validate 表单校验的使用

一.效果图: 二.JqueryValidate的好处 在做注册.或者类似以上的表单提交的时候,大家是不是都很烦那种,把数据拿到后台去判断, 可能经过了正则表达式之类的复杂判断,然后发现数据错误.接着通过request转发到页面上,再通过EL 表达式输出错误信息.实话实话,在没发现这个插件之前,我是这么干的,好痛苦的感觉. JqueryValidate的好处就在于,你不必经过servlet,就可以在页面上面判断用户输入的信息是否正确,它能够快速实现 表单的校验. 三.引入插件 顺序不能乱,此插件是