标签：
<!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Title Page</title> <!-- Bootstrap CSS --> <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn‘t work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container" style="margin-top:50px;"> <div class="row"> <div class="col-md-6"> <!-- 巨幕 --> <div class="jumbotron"> <!-- h1, p都是块级元素 --> <h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> </div> <!-- 页头 --> <div class="page-header"> <h1>Example page header <small>Subtext for header</small></h1> </div> </div> <!-- 略缩图 --> <div class="col-md-6"> <!-- <a href="#" class="thumbnail"> <img src="img/1.jpeg" alt="..."> </a> --> <!-- 自定义内容 如何像上面一样，移动到里面时候，边框会改变颜色--> <div class="thumbnail"> <img src="img/1.jpeg" alt="..."> <div class="caption"> <h3>Thumbnail label</h3> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p> <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p> </div> </div> </div> </div> </div> </div> <!-- jQuery --> <script src="//code.jquery.com/jquery.js"></script> <!-- Bootstrap JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
标签：
原文地址：http://www.cnblogs.com/htmlphp/p/5104798.html
