Bootstrap实战 - 注册和登录

一、介绍

注册和登录在社交和商业网站中是必不可少的一个部分。

二、知识点

2.1 标签页

2.1.1 基础标签页

标签页的使用与导航栏类似，同时都依赖于基础样式 nav，不同的是附加样式变成了 nav-tabs 和 nav-pills（胶囊式），也不用在外面加上一层样式为 navbar navbar-* 的

元素。

2.1.1.1 Tab 式标签页

使用方法：用

+
• + 构建一个标签页，在外层
  上加上样式 nav nav-tabs，在需要活跃的元素
  • 上加上 active 即可。

    
    
        
    Tab First
        
    Tab Second
        
    Tab Third
        
    Tab Fourth
        
    Tab Fifth
    

    效果图：

    

    2.1.1.2 胶囊式标签页

    使用方法：实现方法与 Tab 式标签页类似，把样式 nav-tabs 换成 nav-pills 即可。

    
    
        
    Tab First
        
    Tab Second
        
    Tab Third
        
    Tab Fourth
        
    Tab Fifth
    

    效果图：

    

    2.1.2 带下拉框的标签页

    标签页与导航栏一样可以带下拉框，使用方法也一样，在要放下拉框的

  • 中嵌入一个
    +
    • + ，并在一级标签页 元素上加上样式 dropdown-toggle 和属性 data-toggle="dropdown"，二级导航
      元素上加上样式 dropdown-menu。

      
      
          
      Tab First
          
      Tab Second
          
      Tab Third
          
      Tab Fourth
          
      
              Tab Fifth 
              
      
                  
      Sub-Tab First
                  
      Sub-Tab Second
                  
      Sub-Tab Third
              
          
      

      效果图：

      

      2.1.3 响应式标签页

      与导航栏一样，标签页也有自己的响应式风格。使用方法：在一级标签页

      元素中加上一个样式 nav-justified 即可。

      
      
          
      Tab First
          
      Tab Second
          
      Tab Third
          
      Tab Fourth
          
      
              Tab Fifth 
              
      
                  
      Sub-Tab First
                  
      Sub-Tab Second
                  
      Sub-Tab Third
              
          
      

      大屏效果图：

      

      小屏效果图：

      

      2.1.4 标签页内容

      切换标签页显示出内容在网页中很常见，使用方法：在标签页

      元素下方加入一个里外两层
      元素的容器，外层

      元素加上样式 tab-content，内层多个

      加上样式 tab-pane fade，并给默认显示的内容加上样式 in active，这里的 fade in 是为了切换时有渐入的效果。另外给内层

      元素分别加上不同的 id 属性，对应上面

      元素对应的 href 属性，例如：若 href="#first"，下面
      元素里面则是 id="first"。

      
      
          
      Tab First
          
      Tab Second
          
      Tab Third
          
      Tab Fourth
          
      Tab Fifth
      
      
      
          
      Hello, I'm Tab First, How are you?
          
      Hello, I'm Tab Second, How are you?
          
      Hello, I'm Tab Third, How are you?
          
      Hello, I'm Tab Fourth, How are you?
          
      Hello, I'm Tab Fifth, How are you?
      

      效果图：

      

      2.2 按钮

      按钮是网页布局中不可缺少的一部分的，而且不同的场景要使用不同样式的按钮。

      2.2.1 基础按钮

      使用方法：在 // 元素上加上样式 btn btn-*（default、primary、success、info、warning、danger、link）。

      默认 - default 首选项 - primary 成功 - success 提示 - info 警告 - warning 危险 - danger 首选项 - link

      效果图：

      

      2.2.2 进阶的按钮

      2.2.2.1 改变按钮的大小

      可以通过添加样式 btn-xs、btn-sm、btn-lg 从小到大改变按钮的大小。

      
      
          超小按钮 - xs
          超小按钮 - xs
          超小按钮 - xs
          超小按钮 - xs
          超小按钮 - xs
      
      
          小按钮 - sm
          小按钮 - sm
          小按钮 - sm
          小按钮 - sm
          小按钮 - sm
      
      
          默认按钮
          默认按钮
          默认按钮
          默认按钮
          默认按钮
      
      
          大按钮 - lg
          大按钮 - lg
          大按钮 - lg
          大按钮 - lg
          大按钮 - lg
      

      效果图：

      

      2.2.2.2 块状按钮

      有时候想把一个按钮充满整个父级容器，给按钮添加一个样式 btn-block 即可。

      
      超小按钮 - xs
      小按钮 - sm
      默认按钮
      大按钮 - lg

      效果图：

      

      2.3 表单

      2.3.1 基础表单

      Bootstrap 对表单的 // 等表单元素都进行了样式初始化。首先用一个样式 form-group 的

      元素包住 和

      元素获得良好的排列。

      
      
          
      
              帐号：
              
              
          
          
      
              密码：
              
          
          登录
      

      效果图：

      

      2.3.2 水平表单

      上面的表单“帐号：”和“密码：”在输入框上面，这种效果显然不是我们想要的，这时我们可以给表单添加样式 form-horizontal 使其变成水平表单，同时配合栅格系统来合理布局，这里的 form-group 就相当与栅格系统中的样式 row，所以可以直接在 form-group 下面使用 col-md-* 等样式布局。

      
      
          
      
              
              帐号：
              
      
                  
              
          
          
      
              密码：
              
      
                  
              
          
          
      
              
      
                  
                  
      
                      
                           记住密码
                      
                  
              
          
          
      
              
      
                  登录
                  忘记密码？
              
          
      

      效果图：

      

      登录的话肯定少不了验证合理性，Bootstrap 提供校验状态的提示样式。在需要提示的 容器上加上样式 has-*（success、warning、error）。若想提示 √，× 或其他符号，在容器上加上样式 has-feedback，并且在样式 form-control 的 元素下面添加样式为 form-control-feedback 的 Glyphicons 字体图标。

      
      
          
      
              
              帐号：
              
      
                  
                  
              
          
          
      
              密码：
              
      
                  
                  
              
          
          
      
              
      
                  
                  
      
                      
                           记住密码
                      
                  
              
          
          
      
              
      
                  登录
                  忘记密码？
              
          
      

      效果图：

      

      2.3.3 输入框组

      有时为了满足需求要把元素与 元素组合在一起。使用方法是把 元素包在一个样式 input-group 的

      元素内，然后在 元素下面放一个样式 input-group-addon 的元素。

      
      
          
      
              
              帐号：
              
      
                  
                  
              
          
          
      
              密码：
              
      
                  
                  
              
          
          
      
              邮箱：
              
      
                  
      
                      
                      @mazey.net
                  
              
          
          
      
              
      
                  
                  
      
                      
                           记住密码
                      
                  
              
          
          
      
              
      
                  登录
                  忘记密码？
              
          
      

      效果图：

      

      这里的元素也可以替换成按钮，将样式 input-group-addon 替换成 input-group-btn，然后在里面包一个 元素即可。

      
      ...
      
          
          
              

      @mazey.net

      ...

      效果图：

      

      三、实战

      用标签页 + 表单做一个可以切换登录和注册的模块。

      

      演示地址：https://mazey.cn/bootstrap-blueprints/lesson-third-login/index.html，源码地址：https://github.com/mazeyqian/bootstrap-blueprints/tree/master/lesson-third-login。

      版权声明

      本博客所有的原创文章，作者皆保留版权。转载必须包含本声明，保持本文完整，并以超链接形式注明作者后除和本文原始地址：https://blog.mazey.net/2594.html

      （完）