bootstrap框架学习笔记五(其他部件)
来源:互联网 发布:软件开发包 编辑:程序博客网 时间:2024/04/30 14:14
bootstrap其他内置部件
缩略图
通过“thumbnail”样式配合bootstrap的网格系统来实现。
<div class="container"> <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://img.mukewang.com/5338.png" style="height: 180px; width: 100%; display: block;" alt=""> </a> </div> … </div></div>
上面的结构表示的是在宽屏幕(可视区域大于768px)的时候,一行显示四个缩略图(单击全屏查看效果):
在窄屏(可视区域小于768px)的时候,一行只显示两个缩略图:
缩略图二
缩略图还可以配合标题、描述内容,按钮等:
在仅有缩略图的基础上,添加了一个div名为“caption“的容器,在这个容器中放置其他内容,比如说标题,文本描述,按钮等:
<div class="container"> <div class="row"> <div class="col-xs-6 col-md-3"> <a href="#" class="thumbnail"> <img src="http://a.hiphotos.baidu.com/image/w%3D400/sign=c56d7638b0b7d0a27bc9059dfbee760d/3b292df5e0fe9925d46873da36a85edf8cb171d7.jpg" style="height: 180px; width: 100%; display: block;" alt=""> </a> <div class="caption"> <h3>Bootstrap框架系列教程</h3> <p>Bootstrap框架是一个优秀的前端框,就算您是一位后端程序员或者你是一位不懂设计的前端人员,你也能依赖于Bootstrap制作做优美的网站...</p> <p> <a href="##" class="btn btn-primary">开始学习</a> <a href="##" class="btn btn-info">正在学习</a> </p> </div> </div> … </div></div>
警示框
默认警示框
1、成功警示框:告诉用用户操作成功,在“alert”样式基础上追加“alert-success”样式,具体呈现的是背景、边框和文本都是绿色;
2、信息警示框:给用户提供提示信息,在“alert”样式基础上追加“alert-info”样式,具体呈现的是背景、边框和文本都是浅蓝色;
3、警告警示框:提示用户小心操作(提供警告信息),在“alert”样式基础上追加“alert-warning”样式,具体呈现的是背景、边框、文本都是浅黄色;
4、错误警示框:提示用户操作错误,在“alert”样式基础上追加“alert-danger”样式,具体呈现的是背景、边框和文本都是浅红色。
如下图示:
使用方法:
以在类名为“alert”的div容器里放置提示信息。实现不同类型警示框,只需要在“alert”基础上追加对应的类名,如下:
<div class="alert alert-success" role="alert">恭喜您操作成功!</div><div class="alert alert-info" role="alert">请输入正确的密码</div><div class="alert alert-warning" role="alert">您已操作失败两次,还有最后一次机会</div><div class="alert alert-danger" role="alert">对不起,您输入的密码有误</div>
运行效果如下:
可关闭的警示框
使用方法:
只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤:
1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。
2、在button标签中加入class=”close”类,实现警示框关闭按钮的样式。
3、要确保关闭按钮元素上设置了自定义属性:“data-dismiss=”alert””
具体使用如下:
<div class="alert alert-success alert-dismissable" role="alert"> <button class="close" type="button" data-dismiss="alert">×</button> 恭喜您操作成功!</div>
运行效果如下:
警示框链接
在Bootstrap框架中对警示框里的链接样式做了一个高亮显示处理。为不同类型的警示框内的链接进行了加粗处理,并且颜色相应加深。
实现方法:
Bootstrap框架是通过给警示框加的链接添加一个名为“alert-link”的类名,通过“alert-link”样式给链接提供高亮显示。
具体使用如下:
<div class="alert alert-success" role="alert"> <strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a> .</div><div class="alert alert-info" role="alert"> <strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a> , but it's not super important.</div><div class="alert alert-warning" role="alert"> <strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a> .</div><div class="alert alert-danger" role="alert"> <strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.</div>
实现效果如下:
进度条
基本进度条
使用方法:
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>
运行效果如下:
条纹进度条
结构:
<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>
运行效果就是让下面的条纹动起来:
层叠进度条
可以将不同状态的进度条放置在一起,按水平方式排列。具体使用如下:
<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>
运行效果如下:
注意进度条宽度之和不能大于100%。
如果要带条纹,加上progress-bar-striped类名即可。
带label的进度条
实现方法:
只需要在进度条中添加你需要的值,如:
<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>
运行效果如下:
示例:
<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> <div class="progress progress-striped"> <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:30%">30%</div></div><div class="progress progress-striped active"> <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width:90%">90%</div></div><div class="progress"> <div class="progress-bar progress-bar-success" style="width:20%">20%</div> <div class="progress-bar progress-bar-info progress-bar-striped" style="width:20%">20%</div> <div class="progress-bar progress-bar-warning" style="width:30%">30%</div> <div class="progress-bar progress-bar-danger progress-bar-striped" style="width:15%">15%</div></div>
媒体对象
在Web页面或者说移动页面制作中,常常看到这样的效果,左边居左(或居右),内容居右(或居左)排列,如下图所示:
我们常常把这样的效果称为媒体对象。
默认媒体对象
☑ 媒体对像的容器:常使用“media”类名表示,用来容纳媒体对象的所有内容
☑ 媒体对像的对象:常使用“media-object”表示,就是媒体对象中的对象,常常是图片
☑ 媒体对象的主体:常使用“media-body”表示,就是媒体对像中的主体内容,可以是任何元素,常常是图片侧边内容
☑ 媒体对象的标题:常使用“media-heading”表示,就是用来描述对象的一个标题,此部分可选
如下图所示:
除了上面四个部分之外,在Bootstrap框架中还常常使用“pull-left”或者“pull-right”来控制媒体对象中的对象浮动方式。
在具体使用中如下:
<div class="media"> <a class="pull-left" href="#"> <img class="media-object" src="http://img.mukewang.com/52e1d29d000161fe06000338-300-170.jpg" alt="..."> </a> <div class="media-body"> <h4 class="media-heading">系列:十天精通CSS3</h4> <div>全方位深刻详解CSS3模块知识,经典案例分析,代码同步调试,让网页穿上绚丽装备!</div> </div></div>
运行效果如下:
媒体对象的嵌套
只需要将另一个媒体对象结构放置在媒体对象的主体内“media-body”即可。
<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>
媒体对象列表
在写结构的时候可以使用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>
列表组
基础列表组
☑ 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>
运行效果如下:
带徽章的列表组
只需要在“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>
运行效果如下:
但是一般只会在文本上有效果。若想要在整个列表上都有效果,就需要在链接标签上增加额外的样式:“display:block”;
在bootstrap中采用了另外一种方式解决问题:
就是将ul.list-group使用div.list-group来替换,而li.list-group-item直接用a.list-group-item来替换。
<div class="list-group"> <a href="##" class="list-group-item">图解CSS3</a> <a href="##" class="list-group-item"><span class="badge">220</span>Sass教程</a> <a href="##" class="list-group-item">玩转Bootstrap</a></div>
自定义列表组
☑ 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>
运行效果如下:
列表项的状态设置
☑ active:表示当前状态
☑ disabled:表示禁用状态
示例:
<div class="list-group"> <a href="##" class="list-group-item active"><span class="badge">5902</span>图解CSS3</a> <a href="##" class="list-group-item"><span class="badge">15902</span>W3cplus</a> <a href="##" class="list-group-item"><span class="badge">59020</span>慕课网</a> <a href="##" class="list-group-item disabled"><span class="badge">0</span>Sass中国</a></div>
运行效果如下:
多彩列表组
☑ list-group-item-success:成功,背景色绿色
☑ list-group-item-info:信息,背景色蓝色
☑ list-group-item-warning:警告,背景色为黄色
☑ list-group-item-danger:错误,背景色为红色
如果你想给列表项添加什么背景色,只需要在“list-group-item”基础上增加对应的类名:
<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>
运行效果如下:
面板
基础面板
示例:
<div class="panel panel-default"> <div class="panel-body">我是一个基础面板,带有默认主题样式风格</div></div>
运行效果如下:
带有头和尾的面板
☑ panel-heading:用来设置面板头部样式
☑ panel-footer:用来设置面板尾部样式
<div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <div class="panel-footer">作者:大漠</div></div>
运行效果如下:
彩色面板
☑ panel-primary:重点蓝
☑ panel-success:成功绿
☑ panel-info:信息蓝
☑ panel-warning:警告黄
☑ panel-danger:危险红
使用方法,只需要在panel的类名基础上增加自己需要的类名:
<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>
运行效果如下:
面板中嵌套表格
示例:
<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>
运行效果如下:
如果不希望panel-body设置了一个padding:15px的值,在实际使用的时候可以把table提取到panel-body外面:
<div class="panel panel-default"> <div class="panel-heading">图解CSS3</div> <div class="panel-body">…</div> <table class="table table-bordered">…</table> <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>
运行效果如下:
和嵌套表格一样,如果你觉得这样有间距不好看,你完全可以把列表组提取出来。
- bootstrap框架学习笔记五(其他部件)
- Bootstrap学习笔记(五)
- bootstrap框架学习笔记
- bootstrap框架学习笔记
- Bootstrap学习笔记(五)菜单、按钮及导航
- Qt学习笔记外观篇(五):子类化窗口部件类
- Mina框架学习笔记(五)
- Mina框架学习笔记(五)
- Mina框架学习笔记(五)
- 前端框架之bootstrap主要部件
- bootstrap框架学习笔记二(表单、按钮)
- bootstrap框架学习笔记四(按钮、导航、导航条)
- FreeCodeCamp 学习笔记(二)响应式框架bootstrap
- bootstrap 基础知识学习(导航+其他)
- Web前端学习笔记:Bootstrap框架
- Web前端学习笔记:Bootstrap框架
- Web前端学习笔记:Bootstrap框架
- 学习笔记 Bootstrap 第一天--UI框架
- Valid Palindrome
- MySQL性能调优
- c++ memo
- Windows 异常代码查询
- 位置服务
- bootstrap框架学习笔记五(其他部件)
- Linux系统的启动级别
- c语言文件读写
- hibernate主键自动生成及配置
- java实现C语言解释器:无参数传递的函数调用的解释和执行
- Pycharm开发spark程序
- Linux环境变量
- 米斯特白帽培训讲义 漏洞篇 逻辑漏洞
- Windows异常代码查询