Question

我一直在高低搜索一些Bootstrap 3 Alert盒子的例子，这些盒子从屏幕顶部飞进，在所有元素顶部的中心屏幕上结束。

我发现很多。模态，但我如何为警报框完成此行为？

Answer 1

你可以通过chipChocolate.py查看这个answer，以及他提供的小提琴here。它不是你正在寻找的，因为div从底部到顶部移动，但想法是一样的。创建三个div：主容器，警报容器，警报内容

<div class="main-container">
  <div class="alert-container">
  <!-- placeholder image -->
  <img class="inner_img" src="http://placehold.it/1000x1000" />
    <div class="alert-content">
      <div class="alert alert-danger">
         <strong>Danger!</strong> This alert box could indicate a dangerous or potentially negative action.
        </div>
    </div>
  </div>
</div>

然后应用此css

.main-container{
 position: relative; /* Set to absolute */
}
.alert-container {
 position: absolute; /* Set to absolute and positioned at top corner*/
 top: 0;
 left: 0;
}
.alert-content {
 position: absolute;   /* This moves it to the bottom (initial state) */
 bottom: 90%; 
 width: 100%;
 height: 10%;
 transition: bottom 1s;
}
.main-container:hover .alert-content {
  bottom: 50%;   /* This moves it to the middle (only on hover) */
}

我制作了一个带有引导警报的小提琴here，并从页面的顶部到中间进行了转换。你可以相应地调整它。

如何从屏幕顶部到中心制作Bootstrap 3 Alert

1 个答案: