Bootstrap 4-自定义警报弹出框

雷尼尔大街

我正在尝试使用自举程序来设计警报消息卡。我的想法是使用，<div class="card">但是我不知道这是否是最好的想法。

这是我要实现的目标的图片

我的设计是警报的左侧部分具有背景颜色＃373C47，中间带有一个图标。右边是一些带有标题的文本。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card depth-5 card-alert-danger">
  <div class="card-body">
    <div class="row">
      <div class="col-md-3">
        <p>Icon background color</p>
      </div>
      <div class="col-md-9">
        <h4 class="card-title m-0">Title</h4>
        <p class="card-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
      </div>
    </div>

  </div>
</div>

我尝试使用列，但是这有点麻烦。我该如何实现？

Web开发助推器

您正在寻找的东西在Bootstrap 4中称为媒体对象。

这是一个仅使用本地Bootstrap 4类就非常接近您的图片的示例（单击下面的“运行代码段”按钮）：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
    body {
        background-color: grey;
    }
</style>

<div class="container">
    <div class="row mt-4">
        <div class="col">
            <div class="media bg-warning">
                <i class="fa fa-user-circle align-self-center m-4" style="font-size: 3rem;" aria-hidden="true"></i>
                <div class="media-body bg-light p-4">
                   <div class="row">
                       <div class="col">
                           <h5 class="mt-0">Media object heading</h5>
                       </div>
                       <div class="col-1 text-right">
                           <a href="#">&times;</a>
                       </div>
                   </div>
                    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla.
                </div>
            </div>
        </div>
    </div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。