bootstrap 是常用的UI框架，栅格系统需要牢记
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>个人博客</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> </head> <body> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#">个人博客</a> </div> <div> <ul class="nav navbar-nav"> <li class="active"><a href="#">html+css</a></li> <li><a href="#">javascript</a></li> <li><a href="#">php+mysql</a></li> <li><a href="#">关于我</a></li> </ul> </div> </div> </nav> <div class="row"> <div class="col-md-9"><img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg" class="img-responsive "></div> <div class="col-md-3"> <div class="page-header">推荐阅读</div> <button type="button" class="btn btn-btn-default btn-lg">1</button> <button type="button" class="btn btn-btn-default btn-lg">2</button> <button type="button" class="btn btn-btn-default btn-lg">3</button> <button type="button" class="btn btn-btn-default btn-lg">4</button> <button type="button" class="btn btn-btn-default btn-lg">5</button> <button type="button" class="btn btn-btn-default btn-lg">6</button> <button type="button" class="btn btn-btn-default btn-lg">7</button> <button type="button" class="btn btn-btn-default btn-lg">8</button> <button type="button" class="btn btn-btn-default btn-lg">9</button> <button type="button" class="btn btn-btn-default btn-lg">0</button> <div class="page-header">最新动态</div> <button type="button" class="btn btn-btn-default btn-lg">1</button> <button type="button" class="btn btn-btn-default btn-lg">2</button> <button type="button" class="btn btn-btn-default btn-lg">3</button> <button type="button" class="btn btn-btn-default btn-lg">4</button> <button type="button" class="btn btn-btn-default btn-lg">5</button> <button type="button" class="btn btn-btn-default btn-lg">6</button> <button type="button" class="btn btn-btn-default btn-lg">7</button> <button type="button" class="btn btn-btn-default btn-lg">8</button> <button type="button" class="btn btn-btn-default btn-lg">9</button> <button type="button" class="btn btn-btn-default btn-lg">0</button> </div> </div> <div class="row"> <div class="col-md-12">页面底部</div> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例