使用twitter启动创建通知计数器 [英] Make a Notification counter with twitter bootstrap
本文介绍了使用twitter启动创建通知计数器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
到目前为止，我只是这样： http://jsfiddle.net/prongs/TcbSZ/3 / 。
What I have so far is this: http://jsfiddle.net/prongs/TcbSZ/3/.
<div id="top_navbar" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner" style="
">
<div class="container" style="
">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="/">Testimonial</a>
<div class="nav-collapse collapse">
<ul class="nav" style="
">
<li class="span6 offset1">
<form class="navbar-form form-search">
<div class="input-append">
<input class="span4 search-query" type="text" placeholder="Search...">
<button type="submit" class="btn">Search</button>
</div>
</form>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Notifications <span class="notif-surround"><span class="badge notif-background badge-important" id="notif_background"> </span><span id="num_notif" style="bottom: 0px;">0<br>1<br>2<br>3<br></span></span><b class="caret"></b></a>
<ul class="dropdown-menu" id="notif_list_node">
<li class="nav-header">Notifications</li><li><table class="table-hover"><tbody><tr><td><img src="https://graph.facebook.com/100001420427448/picture"></td><td>New Testimonial <span> from </span> <strong>James Potter</strong></td></tr></tbody></table></li><li><table class="table-hover"><tbody><tr><td><img src="https://graph.facebook.com/100001420427448/picture"></td><td>New Testimonial <span> from </span> <strong>James Potter</strong></td></tr></tbody></table></li><li><table class="table-hover"><tbody><tr><td><img src="https://graph.facebook.com/100001420427448/picture"></td><td>New Testimonial <span> from </span> <strong>James Potter</strong></td></tr></tbody></table></li><li><table class="table-hover"><tbody><tr><td><img src="https://graph.facebook.com/100001420427448/picture"></td><td>New Testimonial <span> from </span> <strong>James Potter</strong></td></tr></tbody></table></li><li><table class="table-hover"><tbody><tr><td><img src="https://graph.facebook.com/100001420427448/picture"></td><td>New Testimonial <span> from </span> <strong>James Potter</strong></td></tr></tbody></table></li><li><table class="table-hover"><tbody><tr><td><img src="https://graph.facebook.com/100001420427448/picture"></td><td>New Testimonial <span> from </span> <strong>James Potter</strong></td></tr></tbody></table></li>
<!-- <li><a href="#">Action</a></li> -->
<!-- <li><a href="#">Another action</a></li> -->
<!-- <li><a href="#">Something else here</a></li> -->
<!-- <li class="divider"></li> -->
<!-- <li class="nav-header">Messages</li> -->
<!-- <li><a href="#">Separated link</a></li> -->
<!-- <li><a href="#">One more separated link</a></li> -->
</ul>
</li>
<!-- <li><i class="icon-exclamation-sign icon-white"></i></li> -->
<li class="dropdown">
<img class="img-rounded img-profile inline" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/371739_100000191247312_1824268558_q.jpg">
<a href="#" class="dropdown-toggle profile-name" data-toggle="dropdown">Rajat Khandelwal <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="/auth/logout">Logout</a></li>
<!-- <li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li> -->
</ul>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
CSS：
CSS:
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.img-profile{
width:30px;
height:30px;
}
.profile-name{
display: inline-block !important;
padding-left: 1px !important;
}
.friend_row{
cursor:pointer;
}
body
{
padding-top: 60px;
padding-bottom: 40px;
}
.HelpPluginIcon{
background-image: url(../images/help_icon.png);
background-repeat: no-repeat;
background-position: center center;
width: 18px;
height: 18px;
}
.notif-background{
width:18px;
height:14px;
}
#num_notif{
position: relative;
float: right;
left: -24px;
color: #fff;
height:18px;
bottom: 0;
}
.notif-surround{
overflow:hidden;
display:inline-block;
}
ul#notif_list_node{
width: 350px;
}
ul#notif_list_node li table{
width:100%;
cursor:pointer;
}
ul#notif_list_node li table tr td{
text-align: left;
}
ul#notif_list_node li table tr td strong{
font-weight: bold;
}
.page {
font-family: 'Just Another Hand', cursive;
width: 700px;
position: relative;
margin: auto;
padding: 15px;
color: #212121;
-webkit-border-bottom-left-radius: 20px 500px;
-webkit-border-bottom-right-radius: 500px 30px;
-webkit-border-top-right-radius: 5px 100px;
-moz-border-radius-bottomleft: 20px 500px;
-moz-border-radius-bottomright: 500px 30px;
-moz-border-radius-topright: 5px 100px;
border-radius-bottomleft: 20px 500px;
border-radius-bottomright: 500px 30px;
border-radius-topright: 5px 100px;
background: #fcf59b;
background:
-webkit-gradient(
linear,
left top, left bottom,
from(#81cbbc),
color-stop(2%, #fcf59b)
);
background:
-moz-repeating-linear-gradient(
top,
#fcf59b,
#fcf59b 38px,
#81cbbc 40px
);
background:
repeating-linear-gradient(
top,
#fcf59b,
#fcf59b 38px,
#81cbbc 40px
);
-webkit-background-size: 100% 40px;
-webkit-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
-moz-box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
box-shadow: 0 2px 10px 1px rgba(0,0,0,.2);
}
.page:before {
content: ' ';
background: url(tape.png) no-repeat;
width: 129px;
height: 38px;
position: absolute;
top: -15px;
left: 40%;
display: block;
}
.page p {
padding: 0 100px;
line-height: 40px;
margin-bottom: 40px;
font-size: 30px;
}
在输出中可以看到的问题是水平对齐元素。
The issue, as you can see in the output, is the horizontal alignment of elements. How do I make them aligned?
推荐答案
将 span6 offset1 更改为 span7 并将 margin-top 添加到 brand
<li class="span7">
<form class="navbar-form form-search">
<div class="input-append">
<input class="span4 search-query" type="text" placeholder="Search...">
<button type="submit" class="btn">Search</button>
</div>
</form>
</li>
.navbar-inverse .brand {
margin-top: -5px;
}
这篇关于使用twitter启动创建通知计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
