热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

深入学习Bootstrap表单

这篇文章主要为大家详细介绍了Bootstrap表单的基础知识,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文知识点借鉴来自http://www.runoob.com/bootstrap/bootstrap-forms.html,里面写的比较详细还给出了例子,这里总结一下重点方便记忆。

一、表单布局

1.垂直表单(默认)

        向父 元素添加 role="form"。
        把标签和控件放在一个带有 class .form-group 的

中。这是获取最佳间距所必需的。
        向所有的文本元素

3.复选框(Checkbox)和单选框(Radio)        
    当创建表单时,如果您想让用户从列表中选择若干个选项时,请使用 checkbox。如果您限制用户只能选择一个选项,请使用 radio。       
    对一系列复选框和单选框使用 .checkbox-inline 或 .radio-inline class,控制它们显示在同一行上。

篮球
音乐
绘画

 4.选择框(Select)        

    使用

 5.静态控件        

当您需要在一个水平表单内的表单标签后放置纯文本时,请在

上使用 class .form-control-static。

email@example.com

三、表单控件状态

1.输入框焦点        

当输入框 input 接收到 :focus 时,输入框的轮廓会被移除,同时应用 box-shadow。   

2.禁用的输入框 input        

如果您想要禁用一个输入框 input,只需要简单地添加 disabled 属性,这不仅会禁用输入框还,会改变输入框的样式以及当鼠标的指针悬停在元素上时鼠标指针的样式。

姓名:

3.禁用的字段集 fieldset        

添加 disabled 属性来禁用
内的所有控件。

4.验证状态        

Bootstrap 包含了错误、警告和成功消息的验证样式。只需要对父元素简单地添加适当的class(.has-warning、 .has-error 或 .has-success)即可使用验证状态。

姓名:
姓名:

 5.表单控件大小    

分别使用 class .input-lg(或.input-sm) 和 .col-lg-* 来设置表单的高度和宽度

姓名: 姓名: 姓名:

 6.表单帮助文本

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。    为了添加一个占用整个宽度的内容块,请在 后使用 .help-block。

Bootstrap 表单控件可以在输入框 input 上有一个块级帮助文本。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 精选15款免费扁平化界面设计资源
    高质量的网页和移动元素是任何Web或移动项目的基础。优秀的UI设计组件不仅能够提升用户体验,还能显著缩短设计师的工作时间,帮助他们快速创建出引人注目的作品。本文将分享一系列免费的扁平化设计素材。 ... [详细]
  • 在使用 MUI 框架进行应用开发时,开发者常常会遇到 mui.init() 和 mui.plusReady() 这两个方法。本文将详细解释它们的区别及其在不同开发环境下的应用。 ... [详细]
  • 本文介绍了一段使用jQuery实现的用户注册页面表单验证代码,适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript,确保用户输入的数据格式正确。 ... [详细]
  • 本文介绍了多个适用于用户界面设计的Canvas框架,帮助开发者选择最适合的工具。 ... [详细]
  • 本文详细介绍了Ionic框架的使用方法及其与Angular的集成。Ionic框架是一个强大的前端开发工具,适用于构建跨平台的移动应用程序。文章将探讨如何引入必要的CSS和JavaScript文件,并解释bundle.js中包含的核心功能,如路由等。 ... [详细]
  • 深入解析Java虚拟机(JVM)架构与原理
    本文旨在为读者提供对Java虚拟机(JVM)的全面理解,涵盖其主要组成部分、工作原理及其在不同平台上的实现。通过详细探讨JVM的结构和内部机制,帮助开发者更好地掌握Java编程的核心技术。 ... [详细]
  • 深入理解ExtJS:从入门到精通
    本文详细介绍了ExtJS的功能及其在大型企业前端开发中的应用。通过实例和详细的文件结构解析,帮助初学者快速掌握ExtJS的核心概念,并提供实用技巧和最佳实践。 ... [详细]
  • 本文汇集了一系列具有强烈设计感的网站模板,特别是来自知名平台WrapBootstrap的响应式网站模板。这些模板不仅美观,而且功能强大,适合各种类型的网站建设需求。 ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • CSS 布局:液态三栏混合宽度布局
    本文介绍了如何使用 CSS 实现液态的三栏布局,其中各栏具有不同的宽度设置。通过调整容器和内容区域的属性,可以实现灵活且响应式的网页设计。 ... [详细]
  • 本文探讨了如何像程序员一样思考,强调了将复杂问题分解为更小模块的重要性,并讨论了如何通过妥善管理和复用已有代码来提高编程效率。 ... [详细]
  • 本文详细介绍了如何解决Uploadify插件在Internet Explorer(IE)9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码,确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]
  • 本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态,以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]
  • python的交互模式怎么输出名文汉字[python常见问题]
    在命令行模式下敲命令python,就看到类似如下的一堆文本输出,然后就进入到Python交互模式,它的提示符是>>>,此时我们可以使用print() ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
author-avatar
ppqq21
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有