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

慕课网上的Bootstrap学习(二)

表单首先<formroleform><form>,创建一个水平显示的表单。然后<divclassform

表单

首先 ,创建一个水平显示的表单。

然后

,网格系统,在有form-horizontal的条件下,form-group相当于row。

最后就是在网格系统里写东西了

表单的禁用状态,加disabled

想要整个域都禁用,在之后加

整个域禁用中,想要某一个不禁用,在这个控件外面包裹

 

表单验证状态

上再加:

1、.has-warning:警告状态(黄色)
2、.has-error:错误状态(红色)
3、.has-success:成功状态(绿色)
使用的时候只需要在form-group容器上对应添加状态类名。

很多时候,在表单验证的时候,不同的状态会提供不同的 icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。如果你想让表单在对应的状态下显示 icon 出来,只需要在对应的状态下添加类名“has-feedback”。请注意,此类名要与“has-error”、“has-warning”和“has-success”在一起.

 

平常在制作表单验证时,要提供不同的提示信息。在Bootstrap框架中也提供了这样的效果。使用了一个"help-block"样式,将提示信息以块状显示,并且显示在控件底部。

你输入的信息是正确的

 

有时候在制作按钮的时候需要按钮宽度充满整个父容器(width:100%),特别是在移动端的制作中。那么前面的方法我们都无法很好的实现,除非重新定义按钮的宽度。其实在Bootstrap中并不需要这样做,Bootstrap框架中提供了一个类名“btn-block”。按钮使用这个类名就可以让按钮充满整个容器,并且这个按钮不会有任何的paddingmargin值。在实际当中,常把这种按钮称为块状按钮。使用方法和前面的类似,只需要在原按钮类名上添加“.btn-block”类名,当然“.btn”类名是不可或缺的.

 

BT网格系统

不想让每一列紧挨,可以添加offset,让列向右移动,例:class=“col-md-2 col-md-offset-1”

向右浮动col-md-push-*,向左浮动col-md-pull-*

可以在列中嵌套网格

 

 

 

 

 

 

 

 

 

 

 


推荐阅读
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • Flutter 核心技术与混合开发模式深入解析
    本文深入探讨了 Flutter 的核心技术,特别是其混合开发模式,包括统一管理模式和三端分离模式,以及混合栈原理。通过对比不同模式的优缺点,帮助开发者选择最适合项目的混合开发策略。 ... [详细]
  • DirectShow Filter 开发指南
    本文总结了 DirectShow Filter 的开发经验,重点介绍了 Source Filter、In-Place Transform Filter 和 Render Filter 的实现方法。通过使用 DirectShow 提供的类,可以简化 Filter 的开发过程。 ... [详细]
  • 本文详细介绍了JavaScript中数组的转换方法、栈方法、队列方法、重排序方法及操作方法,包括toLocaleString()、toString()、valueOf()等基本转换方法,以及push()、pop()、shift()、unshift()等用于模拟栈和队列行为的方法。 ... [详细]
  • Git版本控制基础解析
    本文探讨了Git作为版本控制工具的基本概念及其重要性,不仅限于代码管理,还包括文件的历史记录与版本切换功能。通过对比Git与SVN,进一步阐述了分布式版本控制系统的独特优势。 ... [详细]
  • 本文总结了在多人协作开发环境中使用 Git 时常见的问题及其解决方案,包括错误合并分支的处理、使用 SourceTree 查找问题提交、Git 自动生成的提交信息解释、删除远程仓库文件夹而不删除本地文件的方法、合并冲突时的注意事项以及如何将多个提交合并为一个。 ... [详细]
  • 开发笔记:每篇半小时1天入门MongoDB——3.MongoDB可视化及shell详解
    开发笔记:每篇半小时1天入门MongoDB——3.MongoDB可视化及shell详解 ... [详细]
  • 题面:P3178[HAOI2015]树上操作好像其他人都嫌这道题太容易了懒得讲,好吧那我讲。题解:第一个操作和第二个操作本质上是一样的&# ... [详细]
  • Web开发实践:创建连连看小游戏
    本文详细介绍了如何在Web环境中开发一款连连看小游戏,适合初学者和技术爱好者参考。通过本文,您将了解游戏的基本结构、连线算法以及实现方法。 ... [详细]
  • 探索将Python Spyder与GitHub连接的方法,了解当前的技术状态及未来可能的发展方向。 ... [详细]
  • 本文探讨了如何利用Unicode编码及汉字拼音来实现数组内姓名的高效排序。具体而言,首先根据首字母的Unicode值对数字、字母进行排序,接着对中文姓名依据其拼音首字母进行排序。 ... [详细]
  • 将字符串中的嵌套列表转换回嵌套列表 ... [详细]
  • 本文将探讨如何在 Struts2 中使用 ActionContext 和 ServletActionContext 来获取请求参数和会话信息,同时解释它们的内部机制和最佳实践。 ... [详细]
  • 本文介绍了存储器的基本原理及其分类,包括不同类型的存储介质和存储方式,并详细解释了各种存储器的特点和应用场景。 ... [详细]
  • 本文总结了近年来在实际项目中使用消息中间件的经验和常见问题,旨在为Java初学者和中级开发者提供实用的参考。文章详细介绍了消息中间件在分布式系统中的作用,以及如何通过消息中间件实现高可用性和可扩展性。 ... [详细]
author-avatar
小王子loving
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有