Question

嘿，我仍然习惯于创建网站，而我正试图弄清楚如何创建这样的东西：

<div class="alert alert-danger alert-dismissible fade in" role="alert">
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                 <span aria-hidden="true">&times;</span></button>
          <h4>This is an alert!</h4>
          <p>
                 <button class="btn btn-danger" type"button">Danger Action</button>
                 <button class="btn btn-default" type="button">Cancel</button>
          </p>
</div>

显示已分成行的整个jumbotron。我没有立即发出警报并接受建议。我需要能够将其他元素放入警报中，如果不透明，我希望能够看到背后的超大屏幕。

以下是我试图介绍的jumbotron示例：

<div class="jumbotron">

                <div class="container">
                <!--Row with two equal columns-->
                    <div class="row">
                        <div class="col-md-6">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
                        </div>
                        <div class="col-md-6">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a  target="_blank" class="btn btn-success btn-lg">Get started today</a></p><p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
                        </div>
                        <div class="col-md-6">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <p><a target="_blank" class="btn btn-success btn-lg">Get started today</a></p>
                        </div>
                    </div>
                </div>
            </div>

Answer 1

如果高度可以是动态的，那么您只需在警报上切换类。我稍微更改了你的html标记，以便更容易地添加/删除类。

这是full screen example

以下是JS-FIDDLE

function myAlert() {
    $(".jumbotron").addClass("alert alert-danger alert-dismissible fade in");
    $(".main").addClass("hidden");
    $(".myAlert").removeClass("hidden");
}

function danger() {
    alert("you just alerted some danger");
}

function cancel() {
    $(".jumbotron").removeClass("alert alert-danger alert-dismissible fade in");
    $(".main").removeClass("hidden");
    $(".myAlert").addClass("hidden");
}

麻烦制作Bootstrap警报覆盖带行的超大屏幕

1 个答案: