慕课网上的Bootstrap学习(二)
表单
首先<form role="form" class="form-horizontal"></form> ,创建一个水平显示的表单。
然后<div class="form-group"></div>,网格系统,在有form-horizontal的条件下,form-group相当于row。
最后就是在网格系统里写东西了
表单的禁用状态,加disabled
想要整个域都禁用,在<form>之后加<fieldset disabled></fieldset>
整个域禁用中,想要某一个不禁用,在这个控件外面包裹<legend></legend>
表单验证状态
在<div class="group">上再加:
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"样式,将提示信息以块状显示,并且显示在控件底部。

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

BT网格系统
不想让每一列紧挨,可以添加offset,让列向右移动,例:class=“col-md-2 col-md-offset-1”
向右浮动col-md-push-*,向左浮动col-md-pull-*
可以在列中嵌套网格
慕课网上的Bootstrap学习(二)的更多相关文章
- BootStrap学习(二)——重写首页之topbar
1.布局容器 帮助文档:http://v3.bootcss.com/css/#overview-container BootStrap需要为页面内容和栅栏系统包裹一个.container容器.提供的两 ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- bootstrap学习笔记<二>(标题,段落样式)
标题.样式:class="h1"~class="h6" bootstrap中重新定义了h1~h6标签,具体差别如下: 在bootstrap中其他任何标签使用cl ...
- bootstrap学习(二)页面
响应式图片: //当图片大的时候,逐渐缩小浏览器大小,图片会显示为自适应大小 ,img-responsive <div class="container"> <d ...
- Bootstrap学习笔记(一) 排版
Bootsrap是一款优秀的前端开发框架,我从慕课网上开始学习Bootstrap,以下我学习过程中的一些笔记及代码. 首先学习排版: 从Bootstrap网站下载Bootstrap3中文文档(V3.3 ...
- python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)
昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...
- bootstrap 学习笔记(部分)
这个课程中的boostrap是3.0+版本的.(2.0与3.0有区别) bootstrap中的JS是依赖于jquery的,所以需要事先引用jquery(1.9.0版本以上). <!DOCTYPE ...
- H5框架之Bootstrap(二)
H5框架之Bootstrap(二) 突然感觉不知道写啥子,脑子里面没水了,可能是因为今晚要出去浪,哈哈~~~提前提醒大家平安夜要回家哦,圣诞节生00000000000这么多蛋....继续 上一篇的已经 ...
- Bootstrap <基础二十九>面板(Panels)
Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...
随机推荐
- setuptools的使用
1.什么是setuptools setuptoolssetuptools是 Python Enterprise Application Kit(PEAK)的一个副项目,是Python distutil ...
- Visio Premium 2010密钥+破解激活方法
Visio Premium 2010密钥+破解激活方法: 在安装时能够使用下面密钥: GR24B-GC2XY-KRXRG-2TRJJ-4X7DC VWQ6G-37WBG-J7DJP-CY66Y-V27 ...
- hdu 4099 Revenge of Fibonacci 字典树+大数
将斐波那契的前100000个,每个的前40位都插入到字典树里(其他位数删掉),然后直接查询字典树就行. 此题坑点在于 1.字典树的深度不能太大,事实上,超过40在hdu就会MLE…… 2.若大数加法时 ...
- ${var}变量替换
${age},${name} 给定一个上下文 Map<String,String> context 使用上下文替换变量private static final Pattern VAR_PA ...
- setAnimationTransition:forView:cache: 运行动画时背景色问题
首先我描写叙述一下问题:当我从一个view到另外一个view的时候? 解答:这个问题的解决还须要看setAnimationTransition:forView:cache: 官方Api,官方是这样说的 ...
- 让你的PHP程序真正的实现多线程(PHP多线程类)(转)
通过WEB服务器来实现PHP多线程功能. 当然,对多线程有深入理解的人都知道通过WEB服务器实现的多线程只能模仿多线程的一些效果,并不是真正意义上的多线程. 但不管怎么样,它还是能满足我们的一些需要的 ...
- Programming Assignment 1: Percolation
问题描述可以详见:http://coursera.cs.princeton.edu/algs4/assignments/percolation.html 关于QuickFindUF的javadoc:h ...
- linux乱码问题
命令输入: export LANG=zh_CN.GBK grep 匹配时高亮 先执行:export GREP_OPTIONS='--color=auto'; 后执行:grep 匹配内容 文件; 描述: ...
- 琐碎-hadoop1.X和2.X的区别
1. jobtracker做了分离,分成了resourceManager和nodemanager: 2. MR变成了和HBase和Hive等一样的yarn上面的一个应用: 3. 1.x的默认块大 ...
- css笔记07:通配符选择器
通配符选择器: * { margin:10px ;//默认四个位置参数全为零 margin-top:10px;//分别设置四个参数 margin-left:10px; margin-right:0px ...