无CSS的引导警报和关闭按钮功能

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

目前，我已经将引导的这些部分添加到我自己的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>
<% } %>

0）{%>
x

HTML（添加了

警报可解除类，将
x
更改为
×
）：

HTML（添加了可解除警报的
类，将
x
更改为
×
）：

将自定义css放在引导css之后的head部分。这样，您的css将覆盖引导css。它确实覆盖=）只是想知道我需要从引导css中准确地获得什么css行来模仿close buton。将自定义css放在引导css之后的head部分。这样，您的css将覆盖引导css。它确实覆盖=）只是想知道我需要从引导css中准确地了解什么样的css行来模仿close buton。这正是我想要的！关于如何在将来自己找到它的任何提示？最好的方法是使用例如Chrome中的Web Developer工具，检查引导文档中的元素，并检查应用于元素的样式。这正是我要找的！有没有关于将来如何自己找到它的提示？最好的方法是在Chrome中使用Web Developer工具，在Bootstrap文档中检查元素，并检查应用于元素的样式。
<div class="alert alert-info alert-dismissable">
  <button type="button" class="close" data-dismiss="alert">×</button>
  Message
</div>

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