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