zoukankan      html  css  js  c++  java
  • 缩略图警示框进度条媒体对象列表组面板 组件

    欢迎收看大奥编写的Bootstrap快速学习笔记(6)缩略图警示框进度条媒体对象列表组面板 组件

    本学习笔记根据[慕课网]教程修改而来,用它学习Bootstrap,将会带来全新的体验哦:

    • 缩略图
    • 警示框
    • 进度条
    • 媒体对象
    • 列表组
    • 面板

    详细介绍

    • 缩略图 通过配合网格系统来实现,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;
    • 警示框 通过给div容器添加alert alert-XXX类来实现,如果要设置可关闭的警示框,就要给div标签追加类alert-dismissable,并添加一个button元素<button class="close" type="button" data-dismiss="alert">&times;</button>,还可以在警示框的文本中设置警示框链接,方法就是给a标签添加alert-link的class类;
    • 进度条 通进度条有太多的样式,但基本的结构是这样的div.process>div.process-bar[style="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%文字显示到进度条中;
    • 媒体对象 媒体对象就类似于在左边显示一个图片,右边显示标题、简介等,大致的实现结构为最外围是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空间、微信朋友圈、微博等每条动态都可以看成是一个媒体对象;一个媒体对象列表可以用作一个评论列表;而媒体对象的嵌套可以用作一个评论内容及其回复;
    • 列表组 主要的结构就是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;
    • 面板 其主要结构是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;

    注意:知识的积累是一个漫长的过程,请继续关注后续内容

  • 相关阅读:
    Ubuntu18.04连不上网的解决办法
    springboot 踩雷 invalid bound statement (not found): com.atguigu.springboot.mapper.employeemapper.getempbyid
    IDEA的pom文件总是出现Failed to read artifact descriptor forXXX:jar:unknow的解决方法
    IDEA快捷键记录
    在ubuntu18.04中使用chorme浏览器,发现鼠标向下滑动速度真的很慢!更改鼠标滚动速度解决!!
    使用docker拉取镜像时,一直报错get https://registry-1.docker.io/v2/: net/http: tls handshake timeout
    启动django服务器访问admin站点时,django服务器自动关闭的问题解决方案。
    mathtype 6.9 setup cannot continue as an installation of mathtype 7 has be detected。彻底删除MathType的方法。
    转载:Microsoft Office 365激活,一键激活,无需登录Microsoft账号,无需下载KMS等激活工具,cmd命令激活。
    SpringBoot快速开发01
  • 原文地址:https://www.cnblogs.com/tianao/p/5085142.html
Copyright © 2011-2022 走看看