Bootstrap实战 - 注册和登录
一、介绍
注册和登录在社交和商业网站中是必不可少的一个部分。
二、知识点
2.1 标签页
2.1.1 基础标签页
标签页的使用与导航栏类似，同时都依赖于基础样式 nav，不同的是附加样式变成了 nav-tabs 和 nav-pills（胶囊式），也不用在外面加上一层样式为 navbar navbar-* 的
2.1.1.1 Tab 式标签页
使用方法：用
- +
+构建一个标签页，在外层上加上active即可。效果图：
2.1.1.2 胶囊式标签页
使用方法：实现方法与 Tab 式标签页类似，把样式
nav-tabs换成nav-pills即可。效果图：
2.1.2 带下拉框的标签页
标签页与导航栏一样可以带下拉框，使用方法也一样，在要放下拉框的
- 中嵌入一个
+，并在一级标签页元素上加上样式dropdown-toggle和属性data-toggle="dropdown"，二级导航效果图：
2.1.3 响应式标签页
与导航栏一样，标签页也有自己的响应式风格。使用方法：在一级标签页
- 元素中加上一个样式
nav-justified即可。大屏效果图：
小屏效果图：
2.1.4 标签页内容
切换标签页显示出内容在网页中很常见，使用方法：在标签页
- 元素下方加入一个里外两层
元素的容器，外层元素加上样式tab-content，内层多个加上样式tab-pane fade，并给默认显示的内容加上样式in active，这里的fade in是为了切换时有渐入的效果。另外给内层元素分别加上不同的id属性，对应上面元素对应的href属性，例如：若href="#first"，下面元素里面则是id="first"。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 基础按钮
2.2.2 进阶的按钮
2.2.2.1 改变按钮的大小
可以通过添加样式
btn-xs、btn-sm、btn-lg从小到大改变按钮的大小。效果图：
2.2.2.2 块状按钮
有时候想把一个按钮充满整个父级容器，给按钮添加一个样式
btn-block即可。效果图：
2.3 表单
2.3.1 基础表单
Bootstrap 对表单的
/元素获得良好的排列。效果图：
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的元素。效果图：
这里的元素也可以替换成按钮，将样式
input-group-addon替换成input-group-btn，然后在里面包一个...效果图：
三、实战
用标签页 + 表单做一个可以切换登录和注册的模块。
演示地址：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
（完）
相关
+
上加上样式nav nav-tabs，在需要活跃的元素