我想要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>
<% } %>
1 回答
HTML(添加
alert-dismissable
类,将x
更改为×
):CSS(为
close
类添加了基本样式):CODEPEN示例