首页 > 代码库 > 笔记《深入理解bootstrap》第3章(下) —— CSS布局

笔记《深入理解bootstrap》第3章(下) —— CSS布局

上一篇太长了,接下来,继续扯:

3.5.3横向表单,

横向表单不能在form元素上简单应用一个.form-horizontal样式,这是因为其本身没有做什么特殊的设置,只简单设置了一下相关的padding和margin值,源码:

技术分享

运行效果:

技术分享

所以,要实现横向表单,不仅要应用上述样式,还要使用bootstrap预设的栅格类,以便将label和控件水平布局,由于.form-horizontal样式改变了.form-group的行为,将其表现的像栅格系统中的行(row)一样,因此就无需再使用.row样式了,示例:

技术分享

3.5.4、表单控件

1、input

在使用input元素的时候,必须声明type类型,否则可能会引起其他问题,因为bootstrap在定义这些样式的时候,都指定了type类型,比如input[type="text"],

<input type="text" placeholder="请输入文本" />

2、select

下拉列表select的使用方式和原始的一致,多行选择设置multiple为multiple即可,bootstrap会为这些默认的元素提供统一风格的显示,示例:

<select multiple="multiple">  <option>1</option>  <option>2</option></select>

3、textarea元素

同样,在textarea元素里,定义了rows数字即可定义大文本框的高度,定义了cols可以大文本框的宽度,但是如果在该框架上应用了.form-control样式,则cols属性不起作用,因为.form-control样式的表单控件都设置了100%的宽度(或auto),所以大家在使用时,一旦设置了该样式,就不需要再设置cols属性了,

<textarea name="haha" rows="10" class="form-control" placeholder="请输入文本"></textarea>

4、checkbox和radio

通常在使用时配合label元素使用,但通常会出现左右边距对不起的问题,为此,bootstrap进行了标准设置:

技术分享

即使用的时候,每个input外部都要用label包住,并且在最外层用容器元素包住,并应用相应的.checkbox和.radio样式,源码:

技术分享

有些checkbox或者label元素中,文本很少,可能需要横向显示,为此,bootstrap也提供了,相应的内联样式,.checkbox-inline和.radio-inline,效果:

技术分享

使用方式:

技术分享

 

笔记《深入理解bootstrap》第3章(下) —— CSS布局