Home  >  Article  >  Database  >  bootstrap2.3 与 bootstrap3.3 modal嵌入表单的样式改变

bootstrap2.3 与 bootstrap3.3 modal嵌入表单的样式改变

WBOY
WBOYOriginal
2016-06-07 15:37:30945browse

2014年12月16日22:55:24 我在做一个ssh的案例的时候,想做一个新增用户的模态框。我用bower下载的bootstrap应该是最新的3.31版本来的,在官网copy了一段模态框效果的原生code,然后在modal-body里面添加如图(1)代码,发现的效果如图(1),行与行之间的input是没

2014年12月16日22:55:24

我在做一个ssh的案例的时候,想做一个新增用户的模态框。我用bower下载的bootstrap应该是最新的3.31版本来的,在官网copy了一段模态框效果的原生code,然后在modal-body里面添加如图(1)代码,发现的效果如图(1),行与行之间的input是没有间距,本来想在tr处添加style="margin-top:10px;",但是不起效果。后来在bootstrap的中文官网看了一下一些实用的案例,但是都没有找到。然后就尝试通过翻墙去bootstrap的英文官网看了一下,虽然行与行之间有了一定的间距,但是每一个Input的宽度都是占满整行,看起来非常不舒服(如图效果(2))。但是我修改之后,效果感觉还不错,如效果图(3),我简单说一下我修改的东西(如图(2)):

1、去掉每个input的class="form-control"这个类
2、通过全局控制样式给每个input添加width:250px,height:30px; line-height:30px
(宽高根据具体设置即可)

我觉真的学习了,分享给大家,希望对大家有帮助!!!



bootstrap2.3 与 bootstrap3.3 modal嵌入表单的样式改变bootstrap2.3 与 bootstrap3.3 modal嵌入表单的样式改变

bootstrap2.3 与 bootstrap3.3 modal嵌入表单的样式改变

bootstrap2.3 与 bootstrap3.3 modal嵌入表单的样式改变

bootstrap2.3 与 bootstrap3.3 modal嵌入表单的样式改变


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn