thumbnail \ Alert box \ Progress bar \ Media Object \ list Group \ Panel component

Welcome to Bootstrap Quick Learning notes (6) Thumbnail \ Alert box \ Progress bar \ Media Object \ list Group \ Panel component

This study note is based on the [MU Lesson network] tutorial, which is used to learn bootstrap, which will bring a new experience:

• Thumbnail images
• Warning Box
• Progress bar
• Media Objects
• List groups
• Panel

Detailed Introduction

• Thumbnail images通过配合网格系统来实现，div.container>div.row>div.col-md-3 col-xs-6>a.thumbnail>img来实现，这样的效果就是当宽屏的时候能够一行显示4个缩略图，窄屏的时候一行显示两个；那么配合缩略图的标题、简介以及按钮等内容如何显示呢？通过给a标签这一级的后面添加一个div.caption容器来实现，标题、简介与按钮三者并列，标题用h3标签显示，简介用p标签显示，按钮用p标签下的两个同级a.btn标签显示，并分别追加class类btn-primary和btn-info；

• Warning Box通过给div容器添加alert alert-XXX类来实现，如果要设置可关闭的警示框，就要给div标签追加类alert-dismissable，并添加一个button元素<button class="close" type="button" data-dismiss="alert">&times;</button>，还可以在警示框的文本中设置警示框链接，方法就是给a标签添加alert-link的class类；

• Progress bar通进度条有太多的样式，但基本的结构是这样的div.process>div.process-bar[style="width:40%"]，process和process-bar分别还可以追加process-striped和process-bar-striped来给进度条添加条纹效果，再追加active就会显示动态条纹效果，注意一个div.process>div.process-bar是一个进度条，如果用一个div.process包含多个div.process-bar那么就会显示为层叠效果，如果要显示具体的进度，就要在div.process-bar上添加属性role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"，还要在该div中写入<div>50%</div>类似的效果，也就是将50%文字显示到进度条中；

• Media Objects媒体对象就类似于在左边显示一个图片，右边显示标题、简介等，大致的实现结构为最外围是div.media，其中包含两个部分：第一部分用a.pull-left>img.media-object实现，显示的是某图片链接，第二部分用div.media-body作容器，包含两个平级的部分，h4.media-heading以及div；如果要嵌套显示，就要将整个嵌套内容写在div.media-body的最后边；如果要用媒体对象列表显示，就写成ul.media-list>li.media，li中包含两个部分：第一部分用a.pull-left>img.media-object实现，显示的是某图片链接，第二部分用div.media-body作容器，包含两个平级的部分，h4.media-heading以及div；这个可以做成一个动态显示，QQ空间、朋友圈、微博等每条动态都可以看成是一个媒体对象；一个媒体对象列表可以用作一个评论列表；而媒体对象的嵌套可以用作一个评论内容及其回复；

• List groups主要的结构就是ul.list-group>li.list-group-item，如果想添加各种颜色可以在li上追加list-group-item-XXX；自定义列表要使用div.list-group>a.list-group-item>h4.list-group-item-heading p.list-group-item-text；

• Panel其主要结构是div.panel panel-default>div.panel-heading div.panel-body div.panel-footer，其中panel-default可以改为panel-XXX来改变面板主题；面板中如果要嵌套表格的话，要把div.panel-body中原先的内容用p标标签包起来，然后在p标签后面添加table标签，table.table table-bordered>thead tbody，thead中 thead>tr>th，tbody中 tbody>tr>td；


Note: The accumulation of knowledge is a lengthy process, please continue to follow the content .

thumbnail \ Alert box \ Progress bar \ Media Object \ list Group \ Panel component