Bootstrap 第11章 进度条传媒对象和Well组件
Bootstrap 第11章 进度条媒体对象和Well组件
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <title>进度条媒体对象和well组件</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body style="margin: 100px;"> <!-- <div class="well"> well </div> <div class="well well-sm"> well </div> --> <!-- <div class="progress"> <div class="progress-bar" style="width: 60%">60%</div> </div> <div class="progress"> <div class="progress-bar" style="width: 0%; min-width: 20px;">0%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success" style="width: 60%; min-width: 20px;">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 60%; min-width: 20px;">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped active" style="width: 20%; min-width: 20px;">20%</div> <div class="progress-bar progress-bar-warning progress-bar-striped active" style="width: 40%; min-width: 20px;">40%</div> <div class="progress-bar progress-bar-success progress-bar-striped active" style="width: 40%; min-width: 20px;">40%</div> </div> --> <!-- <div class="media"> <div class="media-left media-bottom"> <img src="img/aaa.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p>阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。</p> </div> </div> <div class="media"> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p>阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。</p> </div> <div class="media-right media-middle"> <img src="img/aaa.jpg" alt="" class="media-object"> </div> </div> --> <ul class="media-list"> <li class="media"> <div class="media-left"> <img src="img/aaa.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p>阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。</p> <div class="media"> <div class="media-left"> <img src="img/aaa.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p>阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。</p> <div class="media"> <div class="media-left"> <img src="img/aaa.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p>阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。</p> </div> </div> </div> </div> <div class="media"> <div class="media-left"> <img src="img/aaa.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p>阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。</p> </div> </div> </div> </li> <li class="media"> <div class="media-left media-bottom"> <img src="img/aaa.jpg" alt="" class="media-object"> </div> <div class="media-body"> <h4 class="media-heading">内容标题</h4> <p>阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。阅谁问君诵，水落清香浮。</p> </div> </li> </ul> <script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
效果图：