bootstrap 彈窗默認打開_bootstrap实现详情页弹窗

bootstrap如何实现一个详情页弹窗呢？

Modal-效果图

×

用户详情

用户名

年龄

性别

生日

学校

关闭

源码分析：

基础表单—— form-control，定制化设计效果

单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。

宽度变成了100%

设置了一个浅灰色(#ccc)的边框

具有4px的圆角

设置阴影效果，并且元素得到焦点之时，阴影和边框效果会有所变化

设置了placeholder的颜色为#999

水平表单—— form-horizontal

Bootstrap框架默认的表单是垂直显示风格，在Bootstrap框架中要实现水平表单效果，必须满足以下两个条件：

在

元素是使用类名“form-horizontal”。

配合Bootstrap框架的网格系统。

效果：

设置表单控件padding和margin值。

改变“form-group”的表现形式，类似于网格系统的“row”。

不使用form-hirizontal的情况

内联表单——form-inline

在Bootstrap框架中实现内联表单,只需要在

元素中添加类名“form-inline”即可。

kuan

使用

的效果

同一容器——form-group

在input前面添加一个label标签时，会导致input换行显示。如果你必须添加这样的一个label标签，并且不想让input换行，你需要将label标签也放在容器“form-group”中。

栅格系统——col-xs-*

可以响应式的设置大小。

栅格系统

label的样式

label的样式

图标的使用

用户详情

调用Modal模拟框

$('#userDetailsModal').modal('show');