前端框架-Bootstrap
生活随笔
收集整理的這篇文章主要介紹了
前端框架-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>效果圖
?
轉載于:https://www.cnblogs.com/StevenHuSir/p/10197043.html
總結
以上是生活随笔為你收集整理的前端框架-Bootstrap的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [BZOJ 5072][Lydsy171
- 下一篇： Web 前端技术图谱-菜鸟教程