bootstrap做一个登录页面-FullStack

bootstrap做一个登录框

Table of Contents

背景

效果图

​1.步骤

2.知识点

3.修改body部分，代码如下

---

背景

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

效果图

在这里插入图片描述

1.步骤

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

在这里插入图片描述

2.知识点

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

    需要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}

3.修改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>