900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > bootstrap 大小 表格 表单控件大小

bootstrap 大小 表格 表单控件大小

时间:2019-11-10 15:53:17

相关推荐

bootstrap 大小 表格 表单控件大小

前面看到的表单控件都正常的大小。可以通过设置控件的height,line-height,padding和font-size等属性来实现控件的高度设置。不过Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:

1、input-sm:让控件比正常大小更小

2、input-lg:让控件比正常大小更大

这两个类适用于表单中的input,textarea和select控件,具体使用如下:

运行效果如下或查看右侧结果窗口:

源码请查阅bootstrap.css文件第1795~第1824行:

.input-sm {

height: 30px;

padding: 5px 10px;

font-size: 12px;

line-height: 1.5;

border-radius: 3px;

}

select.input-sm {

height: 30px;

line-height: 30px;

}

textarea.input-sm,

select[multiple].input-sm {

height: auto;

}

.input-lg {

height: 46px;

padding: 10px 16px;

font-size: 18px;

line-height: 1.33;

border-radius: 6px;

}

select.input-lg {

height: 46px;

line-height: 46px;

}

textarea.input-lg,

select[multiple].input-lg {

height: auto;

}

从上面的源码中不难发现,不管是“input-sm”还是“input-lg”仅对控件高度做了处理。但往往很多时候,我们需要控件宽度也要做一定的变化处理。这个时候就要借住Bootstrap框架的网格系统。所以你要控制表单宽度,可以像下面这样使用:

注:网格布局在后面章节中会进行详细讲解。

运行效果如下或查看右侧结果窗口:

前面介绍水平表单时说过,如果表单使用了类名“form-horizontal”,其中“form-group”就相当于网格系统中的“row”。换句话说,如果没有这样做,要通过网格系统来控制表单控件宽度,就需要这样使用:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。