bootstrap实现详情页d窗

bootstrap如何实现横向布局

Bootstrap学习笔记(二) 表单

源码分析：

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

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

效果：

在Bootstrap框架中实现内联表单,只需要在<form>元素中添加类名“form-inline”即可。

CSS之使用display:inline-block来布局

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

bootstrap栅栏系统css中的col-xs- 、col-sm- 、col-md-* 的意义以及 bootstrap一个标签中，同时有 col-xs , col-sm , col-md , col-lg的理解

可以响应式的设置大小。

Bootstrap标签（label）的使用

bootstrap图标库

通过 data 属性 ：如需添加一个d出框（popover），只需向一个锚/按钮标签添加 data-toggle="popover" 即可。锚的 title 即为d出框（popover）的文本。默认情况下，插件把d出框（popover）设置在顶部。

<a href="#" data-toggle="popover" title="Example popover"> 请悬停在我的上面</a>

通过 JavaScript： 通过 JavaScript 启用d出框（popover）：

$("[data-toggle='popover']").popover()

当trigger是hover的时候，只要鼠标离开元素，就会隐藏元素的d出框。但是有时候d出框里面包含button并且需要点击事件的时候，就没办法实现了。

现在，需求是，实现下面的效果：

1. trigger = hover , 当鼠标 hover 在元素上时触发 popover

2. 当鼠标不再 hover 在元素上且不在 popover d出的新层上时d层关闭

现在的情况：

1. 可以实现 hover 时出现d窗

2. 鼠标移出元素则关闭，即使鼠标移入到d窗层中。

有人在github上提出过这个问题，

得到了如下回答，

简单来说就是，1.设置延时，这种方法实现的效果是，鼠标移到d出框后d出框不会马上关闭，但是相应的，鼠标移开也是一样的效果。。。相当于没有解决。

2.不要用hover，推荐click触发，这样的话移动端也能使用。这种方法是比较简单的，但是，需求不是我们能改的。。。。

网上找了很多方法，效果都不是很理想，所以，自己动手吧。。。。

---