进度条----基本样式:
Bootstrap框架中对于进度条提供了一个基本的样式,一个100%宽度的背景色,然后高亮颜色表示完成进度。其实制作这样的进度条非常容易,一般是使用两个容器,外容器具有一定的宽度,并且设置一个背景颜色,他的子元素设置一个宽度。
使用方法:
Bootstrap框架中也是按照这样的方式实现的。它提供了两个容器,外容器使用"progress"样式,子容器使用"progress-bar"样式。其中progress用来设置进度条的容器样式,而progress-bar用来限制进度条的进度。
<div class="progress"> <div class="progress-bar" style="width:40%"></div> </div>
结构优化:虽然这样实现了基本进度条效果,但是对于残障人员浏览网页有点困难,所以我们可以将结构做的好些
<div class="progress"> <div class="progress-bar" style="width:40%;" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"> <span class="sr-only">40% Complete</span> </div> </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:表示错误进度条,进度条颜色为红色;
<div class="progress"> <div class="progress-bar progress-bar-success" style="width:40%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-info" style="width:60%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-warning" style="width:80%"></div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger" style="width:50%"></div> </div>
条纹进度条----条纹进度条:
在Bootstrap框架中除了提供了彩色进度条之外,还提供了一种条纹进度条,这种条纹进度条采用css3的线性渐变来实现,并未借助任何图片,使用Bootstrap框架中的条纹进度条只需要在进度条的容器“progress”基础上添加类名“progress-striped”,当然,如果你要让你的进度条条纹像彩色进度一样,具有彩色效果,你只需要在进度条上添加相应的颜色类名:
<div class="progress progress-striped"> <div class="progress-bar progress-bar-success" style="width:40%"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" style="width:60%"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-warning" style="width:80%"></div> </div> <div class="progress progress-striped"> <div class="progress-bar progress-bar-danger" style="width:50%"></div> </div>
进度条----动态条纹进度条:
使用方法:“progress progress-striped”两个类的基础上再加入“active”类名。如下代码:
<div class="progress progress-striped active"> <div class="progress-bar progress-bar-success" style="width:40%"></div> </div>
注意:要让条纹进度条动起来,就需要让"progress-stripes"和"active"同时运用,不然条纹进度条是不具备动效效果。
进度条----层叠进度条:
将不同状态的进度条放置在一起,按水平方式排列:
<div class="progress"> <div class="progress-bar progress-bar-success" style="width:20%"></div> <div class="progress-bar progress-bar-info" style="width:10%"></div> <div class="progress-bar progress-bar-warning" style="width:30%"></div> <div class="progress-bar progress-bar-danger" style="width:15%"></div> </div>
进度条----带Label的进度条
有很多时候,需要在进度条中直接用相关的数值向用户传递完成的进度条,在Bootstrap就为大家考虑了这种使用场景。
<div class="progress"> <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div> </div>
媒体对象:
在web页面或者移动页面制作中,常常看见这样的效果,左边居左,内容居右排列。我们常常把这样的效果成为媒体对象,可以说他是一种抽象的样式,可以用来构建不同类型的组件。
媒体对象----默认的媒体对象:
媒体对象的容器:常使用"media"类名表示,用来容纳媒体对象的所有内容
媒体对象的对象:常使用"media-object"表示,就是媒体对象中的对象,常常是图片
媒体对象的主体:常使用"media-body"表示,就是媒体对象中的主体内容,可以使任何元素,常常是图片侧边内容
媒体对象的标题:常使用"media-heading"表示,就是用来描述对象的一个标题,此部分可选
媒体对象----媒体对象的嵌套:
<div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="…" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Media Heading</h4> <div>…</div> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="…" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Media Heading</h4> <div>…</div> <div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="…" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Media Heading</h4> <div>...</div> </div> </div> </div> </div> </div> </div>
媒体对象----媒体对象列表:
Bootstrap框架中提供了一个列表展示的效果,在写结构的时候可以使用ul,并且在ul上添加类名“media-list”,而在li上使用“media”,
<ul class="media-list"> <li class="media"> <a class="pull-left" href="#"> <img class="media-object" src=" " alt="..."> </a> <div class="media-body"> <h4 class="media-heading">Media Header</h4> <div>…</div> </div> </li> <li class="media">…</li> <li class="media">…</li> </ul>
列表组:列表组时Bootstrap框架中新增的一个组件,可以制作列表清单、垂直导航效果,也可以匹配其他的组件制作出更漂亮的组件,由于其在Bootstrap是一个独立的组件,所以也对应有自己的独立源码。
列表组----基础列表组:
基础列表组,看上去就是去掉了列表符号的列表项,并且配上一些特定的样式。在Bootstrap框架中的基础列表组主要包括两个部分:
list-group:列表组容器,常用的是ul元素,当然也可以是ol或者div元素
list-group-item:列表项,常用的是li元素,当然也可以是div元素;
<ul class="list-group"> <li class="list-group-item">揭开CSS3的面纱</li> <li class="list-group-item">CSS3选择器</li> <li class="list-group-item">CSS3边框</li> <li class="list-group-item">CSS3背景</li> <li class="list-group-item">CSS3文本</li> </ul>
列表组----带徽章的列表组:
带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果,具体做法很简单,只需要在list-group-item中添加徽章组件badge
<ul class="list-group"> <li class="list-group-item"> <span class="badge">13</span>揭开CSS3的面 </li> <li class="list-group-item"> <span class="badge">456</span>CSS3选择器 </li> <li class="list-group-item"> <span class="badge">892</span>CSS3边框 </li> <li class="list-group-item"> <span class="badge">90</span>CSS3背景 </li> <li class="list-group-item"> <span class="badge">1290</span>CSS3文本 </li> </ul>
列表组-----带链接的列表组:
<ul class="list-group"> <li class="list-group-item"> <a href="##">揭开CSS3的面</a> </li> <li class="list-group-item"> <a href="##">CSS3选择器</a> </li> ... </ul>
列表组-----自定义列表组:
Bootstrap框架在链接列表组的基础上新增了两个样式:
list-group-item-heading:用来定义列表项头部样式
list-group-item-text:用来定义列表项主要内容
<div class="list-group"> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">图解CSS3</h4> <p class="list-group-item-text">...</p> </a> <a href="##" class="list-group-item"> <h4 class="list-group-item-heading">Sass中国</h4> <p class="list-group-item-text">...</p> </a> </div>
列表项----列表项的状态设置:
Bootstrap框架也给组合列表项提供了状态效果,特别是链接列表组。在列表组中只需要在对应的列表项中添加类名:
active disabled
列表组----多彩列表组:
list-group-item-success:成功,背景色绿色
list-group-item-info:信息,背景色蓝色
list-group-item-warning:警告,背景色为黄色
list-group-item-danger:错误,背景色为红色
<div class="list-group"> <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a> <a href="##" class="list-group-item list-group-item-success"><span class="badge">15902</span>W3cplus</a> <a href="##" class="list-group-item list-group-item-info"><span class="badge">59020</span>慕课网</a> <a href="##" class="list-group-item list-group-item-warning"><span class="badge">0</span>Sass中国</a> <a href="##" class="list-group-item list-group-item-danger"><span class="badge">10</span>Mobile教程</a> </div>
面板:是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能。
基础面板非常简单,就是一个div容器运用了"panel"样式,产生一个具有边框的文本显示块,由于panel不控制主题颜色,所以在panel的基础上增加了一个控制颜色的主题"panel-default",另外在里面添加了一个"div.panel-body"来放置面板主体内容:
<div class="panel panel-default"> <div class="panel-body">我是一个基础面板,带有默认主题样式风格</div> </div>
面板----带有头和尾的面板:
Bootstrap为了丰富面板的功能,特意为面板增加面板头部和页面尾部的效果。
panel-heading:用来设置面板头部样式
panel-footer:用来设置面板尾部样式
面板----彩色面板:
在Bootstrap框架面板组件除了默认的主题样式之外,还包括以下几种主题样式,构成了一个彩色面板:
panel-primary:重点蓝
panel-success:成功绿
panel-info:信息蓝
panel-warning:警告黄
panel-danger:危险红
<div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <div class="panel-footer">作者:大漠</div> </div> <div class="panel panel-primary">…</div> <div class="panel panel-success">…</div> <div class="panel panel-info">…</div> <div class="panel panel-warning">…</div> <div class="panel panel-danger">…</div>
面板----面板中嵌套表格
一般情况下可以把面板理解为一个区域,在使用面板的时候,都会在panel-body放置需要的内容,可能是图片、表格或者列表等。来看看面板中嵌套表格和列表组的一个效果。
<div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body"> <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性 </p> <table class="table table-bordered"> <thead> <tr> <th>#</th> <th>我的书</th> <th>发布时间</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>《图解CSS3》</td> <td>2014-07-10</td> </tr> </tbody> </table> </div> <div class="panel-footer">作者:大漠</div> </div>
面板----面板中嵌套列表组
<div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body"> <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性 </p> <ul class="list-group"> <li class="list-group-item">我是列表项</li> <li class="list-group-item">我是列表项</li> <li class="list-group-item">我是列表项</li> </ul> </div> <div class="panel-footer">作者:大漠</div> </div>