Question

我想要Bootstrap警报和关闭按钮功能。我已经在我的页面头中包含了JQuery和Bootstrap javascript文件，但是不要在其中使用CSS，因为它覆盖了大量的样式。

目前我已将Bootstrap的这些部分添加到我自己的css中，以显示警告和关闭按钮。

.alert {
    padding: 8px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px
}

.alert h4 {
    margin-top: 0;
    color: inherit
}

.alert .alert-link {
    font-weight: 700
}

.alert>p,
.alert>ul {
    margin-bottom: 0
}

.alert>p+p {
    margin-top: 5px
}

.alert-dismissable,
.alert-dismissible {
    padding-right: 35px
}

.alert-dismissable .close,
.alert-dismissible .close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit
}

.alert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1
}

.alert-info hr {
    border-top-color: #a6e1ec
}

.alert-info .alert-link {
    color: #245269
}

.alert-danger {
    color: #a94442;
    background-color: #f2dede;
    border-color: #ebccd1
}

.alert-danger hr {
    border-top-color: #e4b9c0
}

.alert-danger .alert-link {
    color: #843534
}

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }
    to {
        background-position: 0 0
    }
}

@-o-keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }
    to {
        background-position: 0 0
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 40px 0
    }
    to {
        background-position: 0 0
    }
}

此CSS使警报按预期工作。以下部分用于关闭按钮。它的样式已经改变了一点，但我似乎缺少几行CSS。谁能告诉我哪些似乎找不到它们。

button.close { -webkit-appearance:none;padding:0;cursor:pointer;background:0;border:0}

目标HTML：

<% if (message.length > 0) { %>
    <div class="alert alert-info"><%= message %><button type="button" class="close" data-dismiss="alert">x</button></div>
<% } %>

Answer 1

HTML（已添加alert-dismissable课程，已将x更改为×）：

<div class="alert alert-info alert-dismissable">
  <button type="button" class="close" data-dismiss="alert">×</button>
  Message
</div>

CSS（为close类添加了基本样式）：

.close {
  float: right;
  font-size: 21px;
  font-weight: bold;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  filter: alpha(opacity=20);
  opacity: .2;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: .5;
}

没有CSS的Bootstrap警报和关闭按钮功能

1 个答案:

CODEPEN EXAMPLE