前端框架-Bootstrap
Bootstrap 前端框架-twitter
<!DOCTYPE html> <html lang="en"> <!--Bootstrap 前端框架-twitter--> <head> <meta charset="UTF-8"> <title>认识Bootstrap</title> <link rel="stylesheet" href="./dist/css/bootstrap.min.css"> <style> /*就近原则和叠加原则*/ body { margin: 60px; } .progress { margin-top: 30px; } .test1 { width: 200px; color: black; } .test3{ /*width: 200px;*/ /*改变大小*/ font-size: 400px; color: orangered; } </style> </head> <body> <!--按钮--> <button class="btn btn-danger test1">百度一下,你就知道</button> <button class="btn btn-success">谷歌一下,你就知道</button> <button class="btn btn-warning">搜狗一下,你就知道</button> <!--进度条--> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="sr-only">60% Complete</span> </div> </div> <!--带动画的--> <div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> <span class="sr-only">45% Complete</span> </div> </div> <!--徽章--> <a href="#">Inbox <span class="badge">42</span></a> <button class="btn btn-primary" type="button"> Messages0.... <span class="badge">4</span> </button> <br> <!--字体图标--> <span class="glyphicon glyphicon-film test3"></span> <span class="glyphicon glyphicon-trash test3"></span> </body> </html>
效果图