bootstrap做一个登录框

背景效果图步骤

背景

bootstrap做了一个登录页面，因为这个页面经常会用到，所以写个blog做个备份

效果图

步骤

引入bootstrap，官网：https://getbootstrap.com/ ，get start,直接copy模板

2. 知识点

引用icon 首先登录 这个https://fontawesome.com/ ，注册会有邮件发你告诉你引用密码 搜索想用的icon，复制到代码中 eg：

<i class="fab fa-facebook-square"></i>

复制form组件代码进行修改 https://getbootstrap.com/docs/4.3/components/forms/

细节 text-right 文字靠右 px-2={padding-right: 0.5rem !important;margin-left: 0.5rem !important} py-2={padding-top: 0.5rem !important;margin-bottom: 0.5rem !important}

修改body部分，代码如下

<div class="col-md-4 offset-md-4"> <form class=" border border-muted"> <div class="bg-light" style="width:100%;"> <div class="title"> <h3>Sign In</h3> </div> <div class="text-right"> <i class="fab fa-facebook-square"></i> <i class="fab fa-github"></i> <i class="fab fa-google-plus-square"></i> </div> </div> <div class="input-group mb-3 mt-3 px-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <i class="fas fa-user-circle"></i> </span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="input-group mb-3 px-3"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1"> <i class="fas fa-key"></i> </span> </div> <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"> </div> <div class="form-group"> <div class="form-check"> <input type="checkbox" class="form-check-input" id="dropdownCheck"> <label class="form-check-label" for="dropdownCheck"> Remember me </label> </div> </div> <div class="text-right"><a >Login</a></div> <div class="bg-light mt-2 text-center"> <a class="dropdown-item" href="#">New around here? <span class="text-primary">Sign up</span></a> <a class="dropdown-item text-primary" href="#">Forgot password?</a> </div> </form> </div>