bootstrap登录页组件实例

最近在看bootstrap， 感觉界面比原始的好看多了。打算把一些组件记录下来，以后可以直接拿来用
核心：
核心是登录的表单 以及将body的背景图片，然后设置透明度：

这句设置 背景图不重复 充满整个屏幕 无边距
然后是form表单
登录框：

col-md col-lg 还有col-lg-offset设置登录框的位置和宽度
border-radius 设置登录框的圆角
col-center-block是网上找到将登录框 垂直居中的方法：

.col-center-block {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform:  translateY(-50%);
            -ms-transform:  translateY(-50%);
            -o-transform:  translateY(-50%);
            transform:  translateY(-50%);
        }

然后 bgcolor 设置登录框背景色 opactiy 设置透明度
其中遇到这个style的设置 范围要尽可能的具体到子元素，因为bootstrap自带的一写风格可能覆盖掉在父元素的属性

bootstrap自带的登录表单组件：

每一行的组件group由span的文字和 后面的输入框组成

Username

span的文字元素 class input-group-addon 表示这是附加在当前input-group组里面的
下面的 输入框 元素 class form-control 自带的类 aria-describedby 看官网没解释这个，但是我猜是匹配前面的span的id的 所以设置成一样的

最后的按钮：

登录

效果：

login.png

完整代码

    
    
    
    
    

    
    

    
    
    
    
    


    
Welcome!

    

        

            

                

                    Username
                    
                

                

                    Password 
                    

                
                

                    登录