2018-07-20 09:42:10——網課學習bootstrap
學習bootstrap首先要下載bootstrap的文檔，點擊下方鏈接：
https://v3.bootcss.com/getting-started/#download
下載完源碼，解壓縮之后，復制解壓縮的文件夾進入自己的項目即可
個人使用的是IDEA，在創建static web的下方就用直接創建帶有bootstrap文檔的項目，故使用之。
項目的結構如上
在新建的html文件中引入bootstrap.css
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>test</title> 6 <link rel="stylesheet" href="../css/bootstrap.css"> 7 <style> 8 .btn-primary{ 9 background-color: #6f42c1; 10 border-color: white; 11 } 12 h1{ 13 color: #6f42c1; 14 } 15 .alert-success{ 16 size: 300px; 17 } 18 .container-small 19 { 20 max-width: 350px; 21 } 22 </style> 23 </head> 24 <body> 25 <h1 align="center">登錄</h1> 26 <div class="container container-small"> 27 <form class="container"> 28 <div class="form-group"> 29 <div align="center" class="alert-success">登陸成功正在跳轉</div> 30 <label>用戶名</label> 31 <input class="form-control" type="text"> 32 </div> 33 <div class="form-group"> 34 <label>密 碼</label> 35 <input class="form-control" type="password"> 36 </div> 37 <div align="center" class="form-group"> 38 <input class="btn btn-block" type="submit" value="立即登錄"> 39 </div> 40 </form> 41 </div> 42 </body> 43 </html>
在輸入上面代碼之后，獲得如下的登錄樣式
即設置form 中的 class="container"
div 中的 class="alert-success"
input 中的 class="form-control"
input 中的 class="btn btn-block"
以及設置style樣式
1 <style> 2 .btn-primary{ 3 background-color: #6f42c1; 4 border-color: white; 5 } 6 h1{ 7 color: #6f42c1; 8 } 9 .alert-success{ 10 size: 300px; 11 } 12 .container-small 13 { 14 max-width: 350px; 15 } 16 </style>
the end