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. 关于 supersocket 不能通过Bootstrap 启动

    App.config内容   <configSections> <section name="superSocket" type="SuperSocke ...

  2. 关于BaseServlet

    BaseServlet 是项目中所有servlet的父类,作用是为了让一个servlet可以同时处理多个请求,因为我们之前比如说完成对于商品的增删改查的时候,每一个需求就要创建一个servlet,这样 ...

  3. PS:将一个图片变成圆形

    1.选择一张正方形图片并放置到PS软件中 2.选择“选框工具”->右击选择"椭圆选框工具” 3.画出你要圆形内的范围: 4.选择两种方式中的一种,实际上效果是一毛一样的 5.右下角就会 ...

  4. 在微信小程序里自动获得当前手机所在的经纬度并转换成地址

    效果:我在手机上打开微信小程序,自动显示出我当前所在的地理位置: 具体步骤: 1. 使用微信jssdk提供的getLocation API拿到经纬度: 2. 调用高德地图的api使用经纬度去换取地址的 ...

  5. IOS tableView的性能优化(缓存池)

    使用缓存池(标识类型) 1.通过 一个 标识 去 缓存池 中寻找可循环得用的cell 2.如果缓存池找不到可循环得用的cell:创建一个新的cell(给cell贴个标识) 3.给cell设置新的数据 ...

  6. MYSQL 之SET GLOBAL innodb_buffer_pool_size =n

    工作遇到一个情况是索引相同的情况下,mysql服务在linux上运行很快,在windows服务器上运行很慢,版本是V5.7以后得版本,同事查找了下说应该设置 SET GLOBAL innodb_buf ...

  7. Zabbix 2.4安装部署

    目  录 第1章 Zabbix Server安装... 1 1.1 Zabbix Server环境... 1 1.2 Zabbix Server软件... 1 1.3 Zabbix server配置. ...

  8. python 爬取猫眼榜单100(二)--多个页面以及多进程

    #!/usr/bin/env python # -*- coding: utf- -*- # @Author: Dang Kai # @Date: -- :: # @Last Modified tim ...

  9. jenkins 执行shell命令出错command not found 和No such file or directory

    [root@localhost usr]# sh test.sh command not found -bash: cd: usr: No such file or directory 这里碰到了一个 ...

  10. 2017.10.16 java中getAttribute和getParameter的区别

    (1)getAttribute:表示得到 域中的对象 返回的是OBJ类型;  getParameter:表示 得到 传递的参数 返回的是String类型; 也就是getAttribute获得的值需要进 ...