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部分，代码如下

            

                

                    

                      

                        
Sign In
                      
                      

                          
                          
                          

                      
                    
                    

                        

                          
                              
                          
                        
                        
                    
                    

                        

                          
                              
                          
                        
                        
                    
                    

                      

                        
                        
                          Remember me
                        
                      
                    
                    
Login
                    

                      New around here? Sign up
                      Forgot password?