1.设计进度条、文字前面的圆点和图片

2.思路:

(1)设计进度条

(a) 进度条有滚动效果,要加上类.active

(b)进度条的颜色通过类.progress-bar-success来写,可以写成.progress-bar-danger,或者.progress-bar-warning

(c)进度条有条纹,要加上类.progress-striped

(2)设计文字前面的圆点

(3)设计文字前面的图片

源码:

HTML:

<li>
<a href="#" class="dropdown-toggle notification-icon" data-toggle="dropdown">
<i class="fa fa-envelope"></i>
<span class="badge">5</span>
</a>
<ul class="dropdown-menu">
<li class="dropdown-menu-header">
<strong>Messages</strong>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60%</span>
</div>
</div>
</li>
<li class="avatar">
<a href="page-inbox.html">
<img class="avatar" src="assets/img/avatar1.jpg" alt="">
<div><div class="point point-primary point-lg"></div>New Message</div>
<span><small>1 minute ago</small></span>
</a>
</li>
<li class="avatar">
<a href="page-inbox.html">
<img class="avatar" src="assets/img/avatar2.jpg" alt="">
<div><div class="point point-primary point-lg"></div>New Message</div>
<span><small>3 minutes ago</small></span>
</a>
</li>
<li class="avatar">
<a href="page-inbox.html">
<img class="avatar" src="assets/img/avatar3.jpg" alt="">
<div><div class="point point-primary point-lg"></div>New Message</div>
<span><small>4 minutes ago</small></span>
</a>
</li>
<li class="avatar">
<a href="page-inbox.html">
<img class="avatar" src="assets/img/avatar4.jpg" alt="">
<div><div class="point point-primary point-lg"></div>New Message</div>
<span><small>30 minute ago</small></span>
</a>
</li>
<li class="avatar">
<a href="page-inbox.html">
<img class="avatar" src="assets/img/avatar5.jpg" alt="">
<div><div class="point point-primary point-lg"></div>New Message</div>
<span><small>1 hour ago</small></span>
</a>
</li>
<li class="dropdown-menu-footer text-center">
<a href="page-inbox.html">View all messages</a>
</li>
</ul>
</li>

  

CSS:

/* progress
=================================================================== */
.progress {
background: #474453;
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.4);
}
.progress-xs, .progress-xs .progress-bar {
border-radius: 3px;
}
.progress-xs {
height: 7px;
}
.navbar .notifications li .dropdown-menu li.avatar {
min-width: 250px;
height: 50px;
padding: 0px 15px;
border-bottom: 1px solid #eeeeee;
}
.navbar .notifications li .dropdown-menu li.avatar a {
line-height: 50px;
height: 50px;
padding: 0px 15px;
}
.navbar .notifications li a img {
width: 40px;
border-radius:;
-webkit-border-radius:;
-moz-border-radius:;
margin: 0 10px 0 0;
}
/*
把图片变成圆形的小图片
*/
.navbar .notifications li .dropdown-menu li a img.avatar {
height: 40px;
border-radius: 50em;
-webkit-border-radius: 50em;
-moz-border-radius: 50em;
border: 1px solid #d4d4d4;
margin: 0px 10px 0 -5px;
float: left;
}
/*
设计圆点
*/
.point {
display: inline-block;
width: 5px;
height: 5px;
border-radius: 500px;
margin: 0px 0.5em;/*调整圆点的位置*/
background-color: #ddd;
vertical-align: baseline;
}
.point-lg {
width: 8px;
height: 8px;
}
.point-primary {
background-color: #3498db;
}
.navbar .notifications li .dropdown-menu li a div {
font-size: 14px;
line-height: 25px;
font-weight:;
}
.navbar .notifications li .dropdown-menu li a small {
color: #ACACAC;
display: block;
line-height: 12px;
font-size: 10px;
margin-top: -3px;/*往上移*/
font-style: italic;
}
.navbar .notifications li .dropdown-menu li.dropdown-menu-footer {
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}

bootstrap设计进度条和圆点的更多相关文章

  1. bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现

    bootstrap导航条在手机上默认展开二级目录,必须用setTimeout才能实现 $(document).ready(function() { $('.dropdown').hover(funct ...

  2. Bootstrap进度条

    前面的话 在网页中,进度条的效果并不少见,比如一个评分系统,比如加载状态等,通过简单.灵活的进度条,可以为当前工作流程或动作提供实时反馈.本文将详细介绍Bootstrap进度条 基本样式 Bootst ...

  3. Bootstrap学习笔记(5)--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  4. Bootstrap 导航条理解

    以下理论内容copy自Bootstrap中文网 (一个不错的bootstrap学习网站) 导航条 默认样式的导航条 导航条是在您的应用或网站中作为导航页头的响应式基础组件.它们在移动设备上可以折叠(并 ...

  5. 第二百四十一节,Bootstrap进度条媒体对象和 Well 组件

    第二百四十一节,Bootstrap进度条媒体对象和 Well 组件 学习要点: 1.Well 组件 2.进度条组件 3.媒体对象组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:Wel ...

  6. bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何

    bootstrap课程8 bootstrap导航条在不同设备上的显示效果如何(多去看参考手册) 一.总结 一句话总结:在手机端或者平板端或者显示不够的话就缩起来了.(多去看参考手册) 二.bootst ...

  7. 浅谈Bootstrap——导航条起步

    不多说,直接上代码. <div class="navbar navbar-default"> <div class="container"&g ...

  8. 详解Bootstrap进度条组件

    在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...

  9. Bootstrap 进度条媒体对象和 Well 组件

    一.Well 组件 这个组件可以实现简单的嵌入效果. //嵌入效果 <div class="well"> Bootstrap </div> //有 lg 和 ...

随机推荐

  1. C4C和CRM里获取当前登录用户分配的Organization Unit信息

    C4C 如何查看某个用户分配的组织单元ID: 在Employee的Organization Data区域内看到分配的组织名称,如下图红色下划线所示: 现在的需求就是使用ABSL获取当前登录用户分配的O ...

  2. 昂贵的聘礼,(最短路的应用),Poj(1063)

    题目链接:http://poj.org/problem?id=1062 很好的一道中文题. 思路: 把每种替换当做一条边,权重为交易优惠,就是求原点0到物品1的最短路. 这里有限制条件,每个节点还有等 ...

  3. caffe resize用interpolation

    opencv的resize默认的是使用双线性插值INTER_LINEAR,也可以是尝试其他的方式进行插值操作 if (param.random_interpolation_method()) { // ...

  4. json 序列化和反序列化的3个方法

    https://www.cnblogs.com/caofangsheng/p/5687994.html

  5. 复式记账中"借"与"贷"的理解

    财务常识中,复式记账法应用极广,公司采用的是它的借贷记账法.因此,深刻的理解"借"与"贷"的含义极其重要.  一切从历史说起. 起源: Credit  英文含义 ...

  6. iphone应用程序生命周期浅析

    做iphone开发有必要知道iphone程序的生命周期,说白点就是当点击程序图标启动程序开始到退出程序整个使用运行过程中底下的代码都发生了什么,只有理解生命周期,有利于我们开发人员开发出更棒的应用 接 ...

  7. 分页查询关键代码 多条件查询关键代码 删除选中商品关键代码 修改要先回显再修改 修改要先回显再修改 同一业务集中使用同一servlet的方法

    分页查询关键代码: 通过servlet转发回来的各种信息进行分页的设计(转发回的信息有 分页查询的List集合 查询的页码 查询的条数 查询的数据库总条数 查询的总页码) 从开始时循环10次出现十个数 ...

  8. LeetCode297. Serialize and Deserialize Binary Tree

    题目 序列化是将一个数据结构或者对象转换为连续的比特位的操作,进而可以将转换后的数据存储在一个文件或者内存中,同时也可以通过网络传输到另一个计算机环境,采取相反方式重构得到原数据. 请设计一个算法来实 ...

  9. C#+Winform开发窗体程序

    学习笔记 第一章:winform基础 一.概述 1.Windows Form(简称WinForm) 是微软.NET平台下用于开发"图形界面"应用程序的组件. 2.C/S架构 客户机 ...

  10. python基础数据类型之字典的操作

    一. 字典的简单介绍字典(dict)是python中唯一的一个映射类型.他是以{ }括起来的键值对组成. 在dict中key是唯一的. 在保存的时候, 根据key来计算出一个内存地址. 然后将key- ...