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

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-dismissableclass，将x更改为×）：

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

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

.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;
}

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

Bootstrap alert and close button functionality without CSS

css

alert

button

twitter-bootstrap

CODEPEN EXAMPLE