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

WBOY
Lepaskan: 2016-06-07 15:37:30
asal
948 orang telah melayarinya

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嵌入表单的样式改变


Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan