bootstrap组件之巨幕&页头&缩略图&警告框&进度条&媒体对象&列表组&面板&嵌入内容

• 巨幕
  • 【概念】巨幕组件主要是展示网站的关键性区域
  • 两种形式
    • 在固定的范围内，有圆角
      • <div class="container"> <div class="jumbotron"> 内容区域 </div> </div>
    • 100%全屏，没有圆角
      • <div class="jumbotron"> <div class="container"> 内容区域 </div> </div>
• 页头
  • 【概念】页头组件能够为h1标签增加适当的空间
  • 格式
    • <div class="page-header"> <h1>卓越人生，<small>从卓京开始</small></h1> </div>
• 缩略图
  • 【概念】通过缩略图组件扩展Bootstrap的栅格系统，可以很容易的展示栅格样式的图像、视频、文本等内容
  • 默认样式
    • <div class="thumbnail"> 图片 </div>
  • 自定义内容
    • <div class="thumbnail"> 图片 <div class="caption"> 标题、段落、按钮等内容 </div> </div>
• 警告框
  • 【概念】警告框组件通过提供一些灵活的预定义信息，为常见的用户动作提供反馈信息
  • 1.基本警告框
    • <div class="alert alert-success"></div>
    • <div class="alert alert-info"></div>
    • <div class="alert alert-warning"></div>
    • <div class="alert alert-danger"></div>
  • 2.带关闭的警告框
    • <div class="alert alert-success"> <button class="close" data-dismiss="alert"><span>&times;</span></button> 警告框内容 </div>
  • 3.带超链接的警告框
    • <div class="alert alert-success"> 警告框内容<a class="alert-link">超链接</a> </div>
• 进度条
  • 【概念】通过这些简单、灵活的进度条，为当前工作流程或动作提供实时反馈
  • 1.默认样式进度条
    • <div class="progress"> <div class="progress-bar" style="width:60%"></div> </div>
  • 2.带有提示标签的进度条
    • <div class="progress"> <div class="progress-bar" style="width:50%">50%</div> </div>
    • 如果当前进度为0%，则文字显示在最左边，不明显
      • 需要设置 style="min-width:20px;width=0%"
  • 3.根据情境变化效果
    • 默认
    • <div class="progress-bar progress-bar-success" style="width=50%">
    • <div class="progress-bar progress-bar-info" style="width=50%">
    • <div class="progress-bar progress-bar-warning" style="width=50%">
    • <div class="progress-bar progress-bar-danger" style="width=50%">
  • 4.条纹效果
    • <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" style="width=50%">50%</div> </div>
  • 5.动画效果
    • <div class="progress"> <div class="progress-bar progress-bar-striped active" style="width=50%"></div> </div>
  • 6.堆叠效果
    • 把多个进度条放在同一个.progress中，可以实现堆叠效果
    • <div class="progress"> <div class="progress-bar"></div> <div class="progress-bar"></div> </div>
• 媒体对象
  • 【概念】媒体对象可以包含图片、视频或者音频等媒体，以达到对象和文本组合显示的样式效果
  • 1.默认样式
    • <div class="media"> <div class="media-left"> <img class="media-object"> </div> <div class="media-body"> <h1 class="media-heading">标题</h1> 内容 </div> </div>
  • 2.对齐方式:图片或者其他媒体类型可以在顶部、中部或底部对齐，默认是顶部对齐
    • <div class="media-left media-middle"> <img class="media-object"> </div>
    • <div class="media-left media-bottom"> <img class="media-object"> </div>
  • 3.媒体对象列表
    • <ul class="media-list"> <li class="media"> <div class="media-left"> <img class="media-object"> </div> <div class="media-body"> <h1 class="media-heading">标题</h1> 内容 </div> </li> ...... </ul>
• 列表组
  • 【概念】列表组是灵活又强大的组件，不仅能用于显示一组简单的元素，还能用于复杂的定制的内容
  • 1.基本实例
    • <ul class="list-group"> <li class="list-group-item"></li> <li class="list-group-item"></li> </ul>
  • 2.徽章
    • <ul class="list-group"> <li class="list-group-item"><span class="badge"><span></li> <li class="list-group-item"></li> </ul>
  • 3.链接
    • <div class="list-group"> <a class="list-group-item"></a> <a class="list-group-item"></a> </div>
  • 4.按钮
    • <div class="list-group"> <button class="list-group-item"></button> <button class="list-group-item"></button> </div>
  • 5.被禁用的条目
    • <div class="list-group"> <button class="list-group-item disabled"></button> <button class="list-group-item"></button> </div>
  • 6.情境类
    • <button class="list-group-item list-group-item-success"></button>
    • <button class="list-group-item list-group-item-info"></button>
    • <button class="list-group-item list-group-item-warning"></button>
    • <button class="list-group-item list-group-item-danger"></button>
  • 7.定制内容
    • <div class="list-group"> <a class="list-group-item"> <h1>...</h1> <p>....</p> </a> </div>
• 面板
  • 【概念】面板组件就是一个存放内容的容器组件
  • 1.基本实例
    • <div class="panel panel-default"> <div class="panel-body"> 面板内容 </div> </div>
  • 2.带标题的面板
    • <div class="panel panel-default"> <div class="panel-heading"> <span class="panel-title">面板标题</span> </div> <div class="panel-body">面板内容</div> </div>
  • 3.带注脚的面板
    • <div class="panel panel-default"> <div class="panel-body">面板内容</div> <div class="panel-footer">面板脚注</div> </div>
  • 4.情境效果
    • <div class="panel panel-default">
    • <div class="panel panel-primary">
    • <div class="panel panel-success">
    • <div class="panel panel-info">
    • <div class="panel panel-warning">
    • <div class="panel panel-danger">
  • 5.带表格的面板
    • <div class="panel panel-default"> <div class="panel-heading">面板标题</div> <div class="panel-body">面板内容</div> <table class="table"> </table> </div>
  • 6.带列表组的面板
    • <div class="panel panel-default"> <div class="panel-heading">面板标题</div> <div class="panel-body">面板内容</div> <ul class="list-group"> <li class="list-group-item"></li> <li class="list-group-item"></li> </ul> </div>
• 嵌入内容
  • 【概念】根据被嵌入内容的外部容器的宽度，自动创建一个固定的比例，从而让浏览器自动确定内容的尺寸，能够在各种设备上缩放。这些规则可以直接用于<iframe>、<embed>、<video>、<object>元素
  • 两种响应式
    • 响应式16:9
      • <div class="embed-responsive embed-responsive-16by9"> <video controls="controls"> <source src="" type="video/mp4"></source> </video> </div>
    • 响应式4:3
      • <div class="embed-responsive embed-responsive-4by3"> <video controls="controls"> <source src="" type="video/mp4"></source> </video> </div>