bootstrap输入框组右侧的按钮与输入框大小不一致

bootstrap输入框组右侧的按钮与输入框大小不一致,第1张

你把bootstrap的样式中.form-control类的height值改了。我也是这样的问题,我把我改掉的bootstrap的css文件删除了,重新添加一个未被修改过的CSS文件,就没问题了!

bootstrap中的椭圆形按钮的设置方法

在bootstrap中, 按钮(button)有不同的六种方式. 默认的button的样式是: btn. 这个是必要的样式. 还有其他的六种不同方式展现.

分别为: 默认, 主要, 成功, 信息, 警告, 危险, 链接.

1.默认: btn-default

2.主要: btn-primary

3.成功: btn-success

4.信息: btn-info

5.警告: btn-warning

6.危险: btn-danger

7.链接: btn-link

从上面的样式可以看出来, 其实, 在其他的一些标签也可以使用这个样式, 而且一样也可以达到我们想要的效果, 比方说, 我们用一个默认的样式, 来把"a"链接, 改成一个button. 当然一样span.一样也可以, 但是这里如果没有特殊情况, 推荐还是使用button.的这种方式.因为button这种方式, 更好的兼容不同的浏览器. 还要注意一点, 在官网上这样说道: "除去其他原因,这个Firefox的bug让我们无法为基于<input>标签的按钮设置line-height,这导致在Firefox上,他们与其它按钮的高度不一致"。 还是那句话能够用button就用button.

针对button的尺寸大小, bootstrap也定义了一些样式供我们使用.

样式定义如下:

.btn-lg: 最大的样式

.btn-sm: 平板的样式

.btn-xs: 手机版的样式

还有一个默认的样式, 就是什么不用btn-*的.

不同的样式从小到大

在移动端: 有时候我们需要让按钮占一行. 这样显示效果更加舒服好看. 这样就需要使用样式.btn-block, 它的作用是使其充满父节点100%的宽度,而且按钮也变为了块级(block)元素。

如何禁用按钮, 可以使用disabled="disabled", 但是需要注意一点, 就是这个属性, 在ie及更低的版本中, 会绘制一个灰色的背景, 然后还有阴影, 现在还没有办法解决这个问题.

一直在重复那句话, 就是说: 去做, 才能更好的掌握. 多尝试不同的组合方法, 只有遇到问题, 才能知道解决问题的方法, 在学习的时候,可以让自己出错.


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/bake/11573144.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-17
下一篇2023-05-17

发表评论

登录后才能评论

评论列表(0条)

    保存