进度条----基本样式:

  Bootstrap框架中对于进度条提供了一个基本的样式,一个100%宽度的背景色,然后高亮颜色表示完成进度。其实制作这样的进度条非常容易,一般是使用两个容器,外容器具有一定的宽度,并且设置一个背景颜色,他的子元素设置一个宽度。

  使用方法:

    Bootstrap框架中也是按照这样的方式实现的。它提供了两个容器,外容器使用"progress"样式,子容器使用"progress-bar"样式。其中progress用来设置进度条的容器样式,而progress-bar用来限制进度条的进度。

  1. <div class="progress">
  2. <div class="progress-bar" style="width:40%"></div>
  3. </div>

  结构优化:虽然这样实现了基本进度条效果,但是对于残障人员浏览网页有点困难,所以我们可以将结构做的好些

  1. <div class="progress">
  2. <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">
  3. <span class="sr-only">40% Complete</span>
  4. </div>
  5. </div>

  1.role属性作用:告诉搜索引擎这个div的作用是进度条;

  2.aria-valuenow="40"属性作用:进度条的进度是40%;

  3.aria-valuemin="0"属性作用:进度条的最小值是0%;

  4.aria-valuemax="100"属性作用:进度条的最大值是100%;

进度条----彩色进度条:

  progress-bar-info:表示信息进度条,进度条颜色为蓝色;

  progress-bar-success:表示成功进度条,进度条颜色为绿色;

  progress-bar-warning:表示警告进度条,进度条颜色为黄色;

  progress-bar-danger:表示错误进度条,进度条颜色为红色;

  1. <div class="progress">
  2. <div class="progress-bar progress-bar-success" style="width:40%"></div>
  3. </div>
  4. <div class="progress">
  5. <div class="progress-bar progress-bar-info" style="width:60%"></div>
  6. </div>
  7. <div class="progress">
  8. <div class="progress-bar progress-bar-warning" style="width:80%"></div>
  9. </div>
  10. <div class="progress">
  11. <div class="progress-bar progress-bar-danger" style="width:50%"></div>
  12. </div>

  

条纹进度条----条纹进度条:

  在Bootstrap框架中除了提供了彩色进度条之外,还提供了一种条纹进度条,这种条纹进度条采用css3的线性渐变来实现,并未借助任何图片,使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上添加类名“progress-striped”,当然,如果你要让你的进度条条纹像彩色进度一样,具有彩色效果,你只需要在进度条上添加相应的颜色类名:

  1. <div class="progress progress-striped">
  2. <div class="progress-bar progress-bar-success" style="width:40%"></div>
  3. </div>
  4. <div class="progress progress-striped">
  5. <div class="progress-bar progress-bar-info" style="width:60%"></div>
  6. </div>
  7. <div class="progress progress-striped">
  8. <div class="progress-bar progress-bar-warning" style="width:80%"></div>
  9. </div>
  10. <div class="progress progress-striped">
  11. <div class="progress-bar progress-bar-danger" style="width:50%"></div>
  12. </div>

  

进度条----动态条纹进度条:

  使用方法:“progress progress-striped”两个类的基础上再加入“active”类名。如下代码:

  1. <div class="progress progress-striped active">
  2. <div class="progress-bar progress-bar-success" style="width:40%"></div>
  3. </div>

  注意:要让条纹进度条动起来,就需要让"progress-stripes"和"active"同时运用,不然条纹进度条是不具备动效效果。

进度条----层叠进度条:

  将不同状态的进度条放置在一起,按水平方式排列:

  1. <div class="progress">
  2. <div class="progress-bar progress-bar-success" style="width:20%"></div>
  3. <div class="progress-bar progress-bar-info" style="width:10%"></div>
  4. <div class="progress-bar progress-bar-warning" style="width:30%"></div>
  5. <div class="progress-bar progress-bar-danger" style="width:15%"></div>
  6. </div>

  

进度条----带Label的进度条

  有很多时候,需要在进度条中直接用相关的数值向用户传递完成的进度条,在Bootstrap就为大家考虑了这种使用场景。

  1. <div class="progress">
  2. <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
  3. </div>

  

媒体对象:

  在web页面或者移动页面制作中,常常看见这样的效果,左边居左,内容居右排列。我们常常把这样的效果成为媒体对象,可以说他是一种抽象的样式,可以用来构建不同类型的组件。

媒体对象----默认的媒体对象:

  媒体对象的容器:常使用"media"类名表示,用来容纳媒体对象的所有内容

  媒体对象的对象:常使用"media-object"表示,就是媒体对象中的对象,常常是图片

  媒体对象的主体:常使用"media-body"表示,就是媒体对象中的主体内容,可以使任何元素,常常是图片侧边内容

  媒体对象的标题:常使用"media-heading"表示,就是用来描述对象的一个标题,此部分可选

媒体对象----媒体对象的嵌套:

  

  1. <div class="media">
  2. <a class="pull-left" href="#">
  3. <img class="media-object" src="…" alt="...">
  4. </a>
  5. <div class="media-body">
  6. <h4 class="media-heading">Media Heading</h4>
  7. <div></div>
  8. <div class="media">
  9. <a class="pull-left" href="#">
  10. <img class="media-object" src="…" alt="...">
  11. </a>
  12. <div class="media-body">
  13. <h4 class="media-heading">Media Heading</h4>
  14. <div></div>
  15. <div class="media">
  16. <a class="pull-left" href="#">
  17. <img class="media-object" src="…" alt="...">
  18. </a>
  19. <div class="media-body">
  20. <h4 class="media-heading">Media Heading</h4>
  21. <div>...</div>
  22. </div>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. </div>

  

媒体对象----媒体对象列表:

  Bootstrap框架中提供了一个列表展示的效果,在写结构的时候可以使用ul,并且在ul上添加类名“media-list”,而在li上使用“media”,

  1. <ul class="media-list">
  2. <li class="media">
  3. <a class="pull-left" href="#">
  4. <img class="media-object" src=" " alt="...">
  5. </a>
  6. <div class="media-body">
  7. <h4 class="media-heading">Media Header</h4>
  8. <div></div>
  9. </div>
  10. </li>
  11. <li class="media"></li>
  12. <li class="media"></li>
  13. </ul>

  

列表组:列表组时Bootstrap框架中新增的一个组件,可以制作列表清单、垂直导航效果,也可以匹配其他的组件制作出更漂亮的组件,由于其在Bootstrap是一个独立的组件,所以也对应有自己的独立源码。

列表组----基础列表组:

  基础列表组,看上去就是去掉了列表符号的列表项,并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分:

  list-group:列表组容器,常用的是ul元素,当然也可以是ol或者div元素

  list-group-item:列表项,常用的是li元素,当然也可以是div元素;

  1. <ul class="list-group">
  2. <li class="list-group-item">揭开CSS3的面纱</li>
  3. <li class="list-group-item">CSS3选择器</li>
  4. <li class="list-group-item">CSS3边框</li>
  5. <li class="list-group-item">CSS3背景</li>
  6. <li class="list-group-item">CSS3文本</li>
  7. </ul>

  

列表组----带徽章的列表组:

  带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果,具体做法很简单,只需要在list-group-item中添加徽章组件badge

  1. <ul class="list-group">
  2. <li class="list-group-item">
  3. <span class="badge">13</span>揭开CSS3的面
  4. </li>
  5. <li class="list-group-item">
  6. <span class="badge">456</span>CSS3选择器
  7. </li>
  8. <li class="list-group-item">
  9. <span class="badge">892</span>CSS3边框
  10. </li>
  11. <li class="list-group-item">
  12. <span class="badge">90</span>CSS3背景
  13. </li>
  14. <li class="list-group-item">
  15. <span class="badge">1290</span>CSS3文本
  16. </li>
  17. </ul>

  

列表组-----带链接的列表组:

  1. <ul class="list-group">
  2. <li class="list-group-item">
  3. <a href="##">揭开CSS3的面</a>
  4. </li>
  5. <li class="list-group-item">
  6. <a href="##">CSS3选择器</a>
  7. </li>
  8. ...
  9. </ul>

  

列表组-----自定义列表组:

  Bootstrap框架在链接列表组的基础上新增了两个样式:

  list-group-item-heading:用来定义列表项头部样式

  list-group-item-text:用来定义列表项主要内容

  

  1. <div class="list-group">
  2. <a href="##" class="list-group-item">
  3. <h4 class="list-group-item-heading">图解CSS3</h4>
  4. <p class="list-group-item-text">...</p>
  5. </a>
  6. <a href="##" class="list-group-item">
  7. <h4 class="list-group-item-heading">Sass中国</h4>
  8. <p class="list-group-item-text">...</p>
  9. </a>
  10. </div>

  

列表项----列表项的状态设置:

  Bootstrap框架也给组合列表项提供了状态效果,特别是链接列表组。在列表组中只需要在对应的列表项中添加类名:

    active  disabled

列表组----多彩列表组:

  list-group-item-success:成功,背景色绿色

  list-group-item-info:信息,背景色蓝色

  list-group-item-warning:警告,背景色为黄色

  list-group-item-danger:错误,背景色为红色

  1. <div class="list-group">
  2. <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a>
  3. <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a>
  4. <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a>
  5. <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a>
  6. <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a>
  7. </div>

  

面板:是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能。

  基础面板非常简单,就是一个div容器运用了"panel"样式,产生一个具有边框的文本显示块,由于panel不控制主题颜色,所以在panel的基础上增加了一个控制颜色的主题"panel-default",另外在里面添加了一个"div.panel-body"来放置面板主体内容:

  1. <div class="panel panel-default">
  2. <div class="panel-body">我是一个基础面板,带有默认主题样式风格</div>
  3. </div>

  

面板----带有头和尾的面板:

  Bootstrap为了丰富面板的功能,特意为面板增加面板头部和页面尾部的效果。

  panel-heading:用来设置面板头部样式

  panel-footer:用来设置面板尾部样式

面板----彩色面板:

  在Bootstrap框架面板组件除了默认的主题样式之外,还包括以下几种主题样式,构成了一个彩色面板:

  panel-primary:重点蓝

  panel-success:成功绿

  panel-info:信息蓝

  panel-warning:警告黄

  panel-danger:危险红

  1. <div class="panel panel-default">
  2. <div class="panel-heading">图解CSS3</div>
  3. <div class="panel-body"></div>
  4. <div class="panel-footer">作者:大漠</div>
  5. </div>
  6. <div class="panel panel-primary"></div>
  7. <div class="panel panel-success"></div>
  8. <div class="panel panel-info"></div>
  9. <div class="panel panel-warning"></div>
  10. <div class="panel panel-danger"></div>

  

面板----面板中嵌套表格

  一般情况下可以把面板理解为一个区域,在使用面板的时候,都会在panel-body放置需要的内容,可能是图片、表格或者列表等。来看看面板中嵌套表格和列表组的一个效果。

  1. <div class="panel panel-default">
  2. <div class="panel-heading">图解CSS3</div>
  3. <div class="panel-body">
  4. <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
  5. </p>
  6. <table class="table table-bordered">
  7. <thead>
  8. <tr>
  9. <th></th>
  10. <th>我的书</th>
  11. <th>发布时间</th>
  12. </tr>
  13. </thead>
  14. <tbody>
  15. <tr>
  16. <td>1</td>
  17. <td>《图解CSS3》</td>
  18. <td>2014-07-10</td>
  19. </tr>
  20. </tbody>
  21. </table>
  22. </div>
  23. <div class="panel-footer">作者:大漠</div>
  24. </div>

  

面板----面板中嵌套列表组
  

  1. <div class="panel panel-default">
  2. <div class="panel-heading">图解CSS3</div>
  3. <div class="panel-body">
  4. <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
  5. </p>
  6. <ul class="list-group">
  7. <li class="list-group-item">我是列表项</li>
  8. <li class="list-group-item">我是列表项</li>
  9. <li class="list-group-item">我是列表项</li>
  10. </ul>
  11. </div>
  12. <div class="panel-footer">作者:大漠</div>
  13. </div>

  

bootstrap-16的更多相关文章

  1. 第二百四十二节,Bootstrap列表组面板和嵌入组件

    Bootstrap列表组面板和嵌入组件 学习要点: 1.列表组组件 2.面板组件 3.响应式嵌入组件 本节课我们主要学习一下 Bootstrap 的三个组件功能:列表组组件.面板组件. 响应 式嵌入组 ...

  2. Bootstrap入门(二十二)组件16:列表组

    Bootstrap入门(二十二)组件16:列表组 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容. 1.默认样式列表组 2.加入徽章 3.链接 4.禁用的列表组 5. ...

  3. AngularJS快速入门指南16:Bootstrap

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  4. Bootstrap系列 -- 16. 文本域textarea

    文本域和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度.但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性.因为Bootstrap框 ...

  5. Bootstrap页面布局16 - BS导航菜单和其响应式布局以及导航中的下拉菜单

    代码: <div class='container-fluid'> <h2 class='page-header'>导航</h2> <!-- .navrbar ...

  6. 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

    在业务系统开发中,对表格记录的查询.分页.排序等处理是非常常见的,在Web开发中,可以采用很多功能强大的插件来满足要求,且能极大的提高开发效率,本随笔介绍这个bootstrap-table是一款非常有 ...

  7. 16、响应式布局和BootStrap 全局CSS样式知识点总结-part3

    1.响应式工具 ①可用的类 <div class="container"> <a href="#" class="visible-x ...

  8. 翻译:使用 ASP.NET MVC 4, EF, Knockoutjs and Bootstrap 设计和开发站点 - 3

    原文地址:http://ddmvc4.codeplex.com/ 原文名称:Design and Develop a website using ASP.NET MVC 4, EF, Knockout ...

  9. 基于Metronic的Bootstrap开发框架经验总结(14)--条码和二维码的生成及打印处理

    在很多项目里面,对条形码和二维码的生成和打印也是一种很常见的操作,在Web项目里面,我们可以利用JS生成条形码和二维码的组件有很多.本文引入两个比较广泛使用的JS组件,用来处理条形码和二维码的生成处理 ...

  10. springmvc4 mybatis 整合 框架源码 bootstrap

    A集成代码生成器 [正反双向(单表.主表.明细表.树形表,开发利器)+快速构建表单 下载地址    ; freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本,处理类 ...

随机推荐

  1. MicroERP1.0简介及下载

    Micro ERP(蓝本)适用于中小微型企事业单位实施信息化管理.本系统研发初始即摒弃了传统ERP所众所周知的诸多繁琐功能,始终坚持以简化流程.平稳实施.快 速应用为切入点.在功能不断完善.健壮的同时 ...

  2. C#按行读取文本并存放再数组内

    我只想说真的是日了狗的麻烦,代码就那么几行,但是根本看不懂在搞些什么东西,我现在还是一点都不知道getline函数到底是怎么用的,但是事实就是他确实能用. 期间在那该死的第一个char根本不知道为什么 ...

  3. 常用OpenLDAP命令

    ldappasswd -x -D "cn=Manager,dc=clouderachina,dc=com" -W "uid=mis,ou=Group,dc=clouder ...

  4. ubuntu方块乱码

    更改下环境变量/etc/default/locale LANG="en_US.UTF-8"LANGUAGE="en_US:en"

  5. PHP store session with couchbase

    如何用couchbase存储session 有两种常见方式:1.采用memcache模式连接couchbase 只需两句修改: ini_set('session.save_handler', 'mem ...

  6. web.config设置和取值

    博客园中有一篇文章对web.config的结构做了很详细的介绍,原文见 http://www.cnblogs.com/gaoweipeng/archive/2009/05/17/1458762.htm ...

  7. javascript曲线图和面积图Line & Area chart控件功能及下载

    Line & Area chart 控件是一款新型的.可用性极强的曲线图和面积图产品.一个您网站的访问者可以放大他感兴趣的一段区域,打开和关闭数值气球,并可显示和隐藏图表.您能创建简单.堆积. ...

  8. STM32——assert_param(expr)

    在STM32的固件库和提供的例程中,到处都可以见到assert_param()的使用.如果打开任何一个例程中的stm32f10x_conf.h文件,就可以看到实际上assert_param是一个宏定义 ...

  9. SSH面试题收藏

    Hibernate工作原理及为什么要用? 原理: 1. 读取并解析配置文件2. 读取并解析映射信息,创建SessionFactory3. 打开Sesssion4. 创建事务Transation5. 持 ...

  10. cocos2d-x 3.0 事件分发机制

    在cocos2d-x 3.0中一共有五个事件监听器: 触摸事件(EventListenerTouch) 键盘响应事件 (EventListenerKeyboard) 加速器记录事件(EventList ...