zoukankan      html  css  js  c++  java
  • 表单系列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- successhas-warninghas-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

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

  • 相关阅读:
    冒泡/快速排序
    Windows RT和WinRT
    UAC(User Access Control)操作小结(C++)
    将CHM文件转换为HTML文件
    WPF实现窗口比例恒定不变小结(2)
    用WinForm的ShowHelp()函数处理CHM文件
    Windows 8下对Microsoft Surface SDK 2.0的调查小结
    WPF实现窗口比例恒定不变小结(1)
    资源释放
    axis 1.4 使用及介绍
  • 原文地址:https://www.cnblogs.com/tianao/p/5071043.html
Copyright © 2011-2022 走看看