html - Bootstrap Thumbnail Class Not Recognized -
whenever try invoke thumbnails per twitter documentation, black dots on screen:
<ul class="thumbnails"> <li class="span4"> <a href="large.jpeg" class="thumbnail"> <img data-src="http://placehold.it/330x230" alt="large"> </a> </li> am doing wrong here? can show using media-grid...which strange since that's old functionality, right?
edit: still black dots left of thumbnails using media-grid, too. how turn off, , why isn't html wrote working?
full code:
<html> <head> <meta charset="utf-8"> <title>walls</title> <link rel="stylesheet" href="http://flip.hr/css/bootstrap.min.css"> <link rel="stylesheet" href="custo.css"> <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> <!--prettyphotty--> <link rel="stylesheet" href="css/prettyphoto.css" type="text/css" media="screen" charset="utf-8" /> <script src="js/jquery.prettyphoto.js" type="text/javascript" charset="utf-8"></script> </head> <body> <br> <div class="container-fluid"> <br> <ul class="media-grid"> <li class="span4"> <a href="super.jpg" rel="prettyphoto"> <img class="thumbnail" src="http://placehold.it/330x230" alt=""> </a> </li> <li class="span4"> <a href="super.jpg"> <img class="thumbnail" src="http://placehold.it/330x230" alt=""> </a> </li> </ul> <ul class="thumbnails"> <li class="span4"> <a href="large.jpeg" class="thumbnail"> <img data-src="http://placehold.it/330x230" alt="large"> </a> </li> <li class="span4"> <a href="#" class="thumbnail"> <img data-src="holder.js/300x200" alt=""> </a> </li> <li class="span4"> <a href="#" class="thumbnail"> <img data-src="holder.js/300x200" alt=""> </a> </li> </ul> </div><!-- .container --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script type="text/javascript" charset="utf-8"> <!--initialize prettyphoto--> $(document).ready(function(){ $("a[rel^='prettyphoto']").prettyphoto(); }); </script> </body> </html>
the stylesheet referencing bootstrap http://flip.hr/css/bootstrap.min.css not have class thumbnail defined.
once referencing current version of bootstrap, correct structure following (taken directly from: http://twitter.github.io/bootstrap/components.html#thumbnails):
<ul class="thumbnails"> <li class="span4"> <a href="#" class="thumbnail"> <img data-src="holder.js/300x200" alt=""> </a> </li> ... </ul> also, of version 2...there no media-grid class (taken http://twitter.github.io/bootstrap/upgrading.html):
formerly .media-grid, .thumbnails, we've thoroughly extended component more uses while maintaining overall simplicity out of box.
Comments
Post a Comment