<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>bootstrap学习第一天</title> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> <script src="bootstrap-3.3.7-dist/js/jquery.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> <script src="bootstrap-3.3.7-dist/js/holder.min.js"></script> <meta name="viewport" content="width=device-width, initial-scle=1, maximum-scale=1, user-scalable=no"> <style> .container { height: 300px; } .row { margin-bottom: 15px; } </style> </head> <body> <div class="container"> <h1>BootStrap前端框架</h1> <div class="row"> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> <!--<img src="holder.js/100px263" alt="">--> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> </div> <div class="row"> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> <!--<img src="holder.js/100px263" alt="">--> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> </div> <div class="row"> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> <!--<img src="holder.js/100px263" alt="">--> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> </div> <div class="row"> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> <!--<img src="holder.js/100px263" alt="">--> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> </div> <div class="row"> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> <!--<img src="holder.js/100px263" alt="">--> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> </div> <div class="row"> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> <!--<img src="holder.js/100px263" alt="">--> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> <div class="col-md-3"> <img src="img/img_logo01.jpg" width="100%"> </div> </div> </div> </body> </html>
图片占位符生成器：holder.js
<img src="holder.js/100px263" alt="">中,生成一个大小是100px263的图片,p表示百分比
