大学生就可以看懂的bootstrap基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。
bootstrap是进阶html5很基础常用的前端框架，可以做自适应漂亮的界面，再坚持一下，前端知识的大门就会打开了。
本节内容体验响应式，建议实际操作一下。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="lib/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet"> </head> <body> <pre> 在线icon定制: http://www.runoob.com/try/demo_source/bootstrap-glyph-customization.htm </pre> <div class="container"> <div class="row"> <div class="col-md-2 "> icon glyphicon </div> <div class="col-md-10 "> <button type="button" class="btn btn-success btn-xs"><span class="glyphicon glyphicon-apple" style="color:#fb3fee;"></span>按钮1</button> <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-bed" style="color:#e8db53;"></span>按钮1</button> <button type="button" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-apple " style="color:#fb8c53;"></span>按钮1</button> <button type="button" class="btn btn-success btn-lg"><span class="glyphicon glyphicon-play " style="color:#1b33fb;font-size: 50px;"></span><span>按钮1</span></button> <button type="button" class="btn btn-success btn-lg "><span class="glyphicon glyphicon-apple text-warning"></span>按钮1</button> </div> </div> </div> </body> <script src="lib/node_modules/bootstrap/dist/js/bootstrap.js"></script> <script src="jquery.js"></script> </html>