一、介绍

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

二、知识点

2.1 标签页

2.1.1 基础标签页

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

2.1.1.1 Tab 式标签页

使用方法：用 <ul> + <li> + <a> 构建一个标签页，在外层 <ul> 上加上样式 nav nav-tabs，在需要活跃的元素 <li> 上加上 active 即可。

<!--代码部分-->

<ul class="nav nav-tabs">

    <li class="active" role="presentation"><a href="#">Tab First</a></li>

    <li role="presentation"><a href="#">Tab Second</a></li>

    <li role="presentation"><a href="#">Tab Third</a></li>

    <li role="presentation"><a href="#">Tab Fourth</a></li>

    <li role="presentation"><a href="#">Tab Fifth</a></li>

</ul>

效果图：

2.1.1.2 胶囊式标签页

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

<!--代码部分-->

<ul class="nav nav-pills">

    <li class="active" role="presentation"><a href="#">Tab First</a></li>

    <li role="presentation"><a href="#">Tab Second</a></li>

    <li role="presentation"><a href="#">Tab Third</a></li>

    <li role="presentation"><a href="#">Tab Fourth</a></li>

    <li role="presentation"><a href="#">Tab Fifth</a></li>

</ul>

效果图：

2.1.2 带下拉框的标签页

标签页与导航栏一样可以带下拉框，使用方法也一样，在要放下拉框的 <li> 中嵌入一个 <ul> + <li> + <a>，并在一级标签页 <a> 元素上加上样式 dropdown-toggle 和属性 data-toggle="dropdown"，二级导航 <ul> 元素上加上样式 dropdown-menu。

<!--代码部分-->

<ul class="nav nav-tabs">

    <li class="active" role="presentation"><a href="#">Tab First</a></li>

    <li role="presentation"><a href="#">Tab Second</a></li>

    <li role="presentation"><a href="#">Tab Third</a></li>

    <li role="presentation"><a href="#">Tab Fourth</a></li>

    <li role="presentation">

        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tab Fifth <span class="caret"></span></a>

        <ul class="dropdown-menu">

            <li><a href="#">Sub-Tab First</a></li>

            <li><a href="#">Sub-Tab Second</a></li>

            <li><a href="#">Sub-Tab Third</a></li>

        </ul>

    </li>

</ul>

效果图：

2.1.3 响应式标签页

与导航栏一样，标签页也有自己的响应式风格。使用方法：在一级标签页 <ul> 元素中加上一个样式 nav-justified 即可。

<!--代码部分-->

<ul class="nav nav-tabs nav-justified">

    <li class="active" role="presentation"><a href="#">Tab First</a></li>

    <li role="presentation"><a href="#">Tab Second</a></li>

    <li role="presentation"><a href="#">Tab Third</a></li>

    <li role="presentation"><a href="#">Tab Fourth</a></li>

    <li role="presentation">

        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Tab Fifth <span class="caret"></span></a>

        <ul class="dropdown-menu">

            <li><a href="#">Sub-Tab First</a></li>

            <li><a href="#">Sub-Tab Second</a></li>

            <li><a href="#">Sub-Tab Third</a></li>

        </ul>

    </li>

</ul>

大屏效果图：

小屏效果图：

2.1.4 标签页内容

切换标签页显示出内容在网页中很常见，使用方法：在标签页 <ul> 元素下方加入一个里外两层 <div> 元素的容器，外层 <div> 元素加上样式 tab-content，内层多个 <div> 加上样式 tab-pane fade，并给默认显示的内容加上样式 in active，这里的 fade in 是为了切换时有渐入的效果。另外给内层 <div> 元素分别加上不同的 id 属性，对应上面 <ul> 元素对应的 href 属性，例如：若 href="#first"，下面 <div> 元素里面则是 id="first"。

<!--代码部分-->

<ul class="nav nav-tabs nav-justified">

    <li class="active" role="presentation"><a href="#first" data-toggle="tab">Tab First</a></li>

    <li role="presentation"><a href="#second" data-toggle="tab">Tab Second</a></li>

    <li role="presentation"><a href="#third" data-toggle="tab">Tab Third</a></li>

    <li role="presentation"><a href="#fourth" data-toggle="tab">Tab Fourth</a></li>

    <li role="presentation"><a href="#fifth" data-toggle="tab">Tab Fifth</a></li>

</ul>

<!--标签页内容部分-->

<div class="tab-content">

    <div class="tab-pane fade in active" id="first" role="tabpanel">Hello, I'm Tab First, How are you?</div>

    <div class="tab-pane fade" id="second" role="tabpanel">Hello, I'm Tab Second, How are you?</div>

    <div class="tab-pane fade" id="third" role="tabpanel">Hello, I'm Tab Third, How are you?</div>

    <div class="tab-pane fade" id="fourth" role="tabpanel">Hello, I'm Tab Fourth, How are you?</div>

    <div class="tab-pane fade" id="fifth" role="tabpanel">Hello, I'm Tab Fifth, How are you?</div>

</div>

效果图：

2.2 按钮

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

2.2.1 基础按钮

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

<!--代码部分-->

<!--白色 标准按钮-->

<button type="button" class="btn btn-default">默认 - default</button>

<!--深蓝色-->

<button type="button" class="btn btn-primary">首选项 - primary</button>

<!--原谅色-->

<button type="button" class="btn btn-success">成功 - success</button>

<!--浅蓝色-->

<button type="button" class="btn btn-info">提示 - info</button>

<!--黄色-->

<button type="button" class="btn btn-warning">警告 - warning</button>

<!--红色-->

<button type="button" class="btn btn-danger">危险 - danger</button>

<!--链接样式-->

<button type="button" class="btn btn-link">首选项 - link</button>

效果图：

2.2.2 进阶的按钮

2.2.2.1 改变按钮的大小

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

<!--代码部分-->

<p>

    <button type="button" class="btn btn-primary btn-xs">超小按钮 - xs</button>

    <button type="button" class="btn btn-success btn-xs">超小按钮 - xs</button>

    <button type="button" class="btn btn-info btn-xs">超小按钮 - xs</button>

    <button type="button" class="btn btn-warning btn-xs">超小按钮 - xs</button>

    <button type="button" class="btn btn-danger btn-xs">超小按钮 - xs</button>

</p>

<p>

    <button type="button" class="btn btn-primary btn-sm">小按钮 - sm</button>

    <button type="button" class="btn btn-success btn-sm">小按钮 - sm</button>

    <button type="button" class="btn btn-info btn-sm">小按钮 - sm</button>

    <button type="button" class="btn btn-warning btn-sm">小按钮 - sm</button>

    <button type="button" class="btn btn-danger btn-sm">小按钮 - sm</button>

</p>

<p>

    <button type="button" class="btn btn-primary">默认按钮</button>

    <button type="button" class="btn btn-success">默认按钮</button>

    <button type="button" class="btn btn-info">默认按钮</button>

    <button type="button" class="btn btn-warning">默认按钮</button>

    <button type="button" class="btn btn-danger">默认按钮</button>

</p>

<p>

    <button type="button" class="btn btn-primary btn-lg">大按钮 - lg</button>

    <button type="button" class="btn btn-success btn-lg">大按钮 - lg</button>

    <button type="button" class="btn btn-info btn-lg">大按钮 - lg</button>

    <button type="button" class="btn btn-warning btn-lg">大按钮 - lg</button>

    <button type="button" class="btn btn-danger btn-lg">大按钮 - lg</button>

</p>

效果图：

2.2.2.2 块状按钮

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

<!--代码部分-->

<button type="button" class="btn btn-primary btn-xs btn-block">超小按钮 - xs</button>

<button type="button" class="btn btn-primary btn-sm btn-block">小按钮 - sm</button>

<button type="button" class="btn btn-primary btn-block">默认按钮</button>

<button type="button" class="btn btn-primary btn-lg btn-block">大按钮 - lg</button>

效果图：

2.3 表单

2.3.1 基础表单

Bootstrap 对表单的 <input>/<select>/<label> 等表单元素都进行了样式初始化。首先用一个样式 form-group 的 <div> 元素包住 <label> 和 <input> 元素获得良好的排列。

<!--代码部分-->

<form>

    <div class="form-group">

        <label for="username">帐号：</label>

        <!--样式form-control会让input元素宽度为父容器100%-->

        <input type="text" class="form-control" id="username" placeholder="请输入帐号" />

    </div>

    <div class="form-group">

        <label for="password">密码：</label>

        <input type="password" class="form-control" id="password" placeholder="请输入密码" />

    </div>

    <button type="submit" class="btn btn-default">登录</button>

</form>

效果图：

2.3.2 水平表单

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

<!--代码部分-->

<form class="form-horizontal">

    <div class="form-group">

        <!--样式control-label使内容居右-->

        <label for="username" class="col-sm-3 control-label">帐号：</label>

        <div class="col-sm-9">

            <input type="text" class="form-control" id="username" placeholder="请输入帐号" />

        </div>

    </div>

    <div class="form-group">

        <label for="password" class="col-sm-3 control-label">密码：</label>

        <div class="col-sm-9">

            <input type="password" class="form-control" id="password" placeholder="请输入密码" />

        </div>

    </div>

    <div class="form-group">

        <div class="col-sm-9 col-sm-offset-3">

            <!--样式checkbox为input[type='checkbox']指定合适的样式，相应的还有input[type='radio']的样式radio-->

            <div class="checkbox">

                <label>

                    <input type="checkbox" /> 记住密码

                </label>

            </div>

        </div>

    </div>

    <div class="form-group">

        <div class="col-sm-9 col-sm-offset-3">

            <button type="submit" class="btn btn-primary btn-sm">登录</button>

            <a href="#" class="btn btn-link btn-sm">忘记密码？</a>

        </div>

    </div>

</form>

效果图：

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

<!--代码部分-->

<form class="form-horizontal">

    <div class="form-group">

        <!--样式control-label使内容居右-->

        <label for="username" class="col-sm-3 control-label">帐号：</label>

        <div class="col-sm-9 has-feedback has-success">

            <input type="text" class="form-control" id="username" placeholder="请输入帐号" />

            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>

        </div>

    </div>

    <div class="form-group">

        <label for="password" class="col-sm-3 control-label">密码：</label>

        <div class="col-sm-9 has-feedback has-error">

            <input type="password" class="form-control" id="password" placeholder="请输入密码" />

            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>

        </div>

    </div>

    <div class="form-group">

        <div class="col-sm-9 col-sm-offset-3">

            <!--样式checkbox为input[type='checkbox']指定合适的样式，相应的还有input[type='radio']的样式radio-->

            <div class="checkbox">

                <label>

                    <input type="checkbox" /> 记住密码

                </label>

            </div>

        </div>

    </div>

    <div class="form-group">

        <div class="col-sm-9 col-sm-offset-3">

            <button type="submit" class="btn btn-primary btn-sm">登录</button>

            <a href="#" class="btn btn-link btn-sm">忘记密码？</a>

        </div>

    </div>

</form>

效果图：

2.3.3 输入框组

有时为了满足需求要把元素与 <input> 元素组合在一起。使用方法是把 <input> 元素包在一个样式 input-group 的 <div> 元素内，然后在 <input> 元素下面放一个样式 input-group-addon 的元素。

<!--代码部分-->

<form class="form-horizontal">

    <div class="form-group">

        <!--样式control-label使内容居右-->

        <label for="username" class="col-sm-3 control-label">帐号：</label>

        <div class="col-sm-9 has-feedback has-success">

            <input type="text" class="form-control" id="username" placeholder="请输入帐号" />

            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>

        </div>

    </div>

    <div class="form-group">

        <label for="password" class="col-sm-3 control-label">密码：</label>

        <div class="col-sm-9 has-feedback has-error">

            <input type="password" class="form-control" id="password" placeholder="请输入密码" />

            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>

        </div>

    </div>

    <div class="form-group">

        <label for="email" class="col-sm-3 control-label">邮箱：</label>

        <div class="col-sm-9">

            <div class="input-group">

                <input type="email" class="form-control" id="email" placeholder="请输入邮箱" />

                <span class="input-group-addon">@mazey.net</span>

            </div>

        </div>

    </div>

    <div class="form-group">

        <div class="col-sm-9 col-sm-offset-3">

            <!--样式checkbox为input[type='checkbox']指定合适的样式，相应的还有input[type='radio']的样式radio-->

            <div class="checkbox">

                <label>

                    <input type="checkbox" /> 记住密码

                </label>

            </div>

        </div>

    </div>

    <div class="form-group">

        <div class="col-sm-9 col-sm-offset-3">

            <button type="submit" class="btn btn-primary btn-sm">登录</button>

            <a href="#" class="btn btn-link btn-sm">忘记密码？</a>

        </div>

    </div>

</form>

效果图：

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

<!--代码部分-->

...

<div class="input-group">

    <input type="email" class="form-control" id="email" placeholder="请输入邮箱" />

    <span class="input-group-btn">

        <button class="btn btn-default" type="button">@mazey.net</button>

    </span>

</div>

...

效果图：

三、实战

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

演示地址：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

（完）

Bootstrap实战 - 注册和登录的更多相关文章

  1. 实战django（一）--（你也能看懂的）注册与登录（带前端模板）

    先是具体目录:(主要是注意templates和static的位置),其中person文件夹是上一期实战的,不用理会,login是本节实战app 项目urls.py from django.contri ...

  2. ASP.NET Core Identity 实战（2）——注册、登录、Claim

    上一篇文章(ASP.NET Core Identity Hands On(1)--Identity 初次体验)中,我们初识了Identity,并且详细分析了AspNetUsers用户存储表,这篇我们将 ...

  3. 【读书笔记《Bootstrap 实战》】4.企业网站

    上一章有对个人作品站点进行一些优化.本章,轮到我们充实这个作品站点了,补充一些项目,从而展示我们的能力.换句话说,我们要构建一个相对复杂的企业网站主页. 下面有几个成功企业的网站: □ Zappos ...

  4. Bootstrap 实战之响应式个人博客 （二）

    阅读本博文前请参考:Bootstrap 实战之响应式个人博客 (一) 一.博客 1.结构 整体博客详情页的结构共包括四部分: 导航栏 博客主体内容 右侧栏:全局搜索框,广告位,推荐阅读 页尾 其中导航 ...

  5. Bootstrap 实战之响应式个人博客 （一）

    一.示例 1.主页 2.博客详情页 3.在线地址 在线地址:入口 Addition:这里使用github-page将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时 ...

  6. bootstrap实战教程

    bootstrap实战教程 bootstrap介绍 简介 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.全球数以百万计的网站都是 ...

  7. 【读书笔记《Bootstrap 实战》】6.单页营销网站

    我们已经掌握了很多实用 Bootstrap  的重要技能.现在,是时候拿出更多的创意来帮助客户实现他们全方位在线营销的愿望了.此次将带领大家做一个漂亮的单页高端营销网站. 主要任务如下: □ 一个大型 ...

  8. express框架+jade+bootstrap+mysql开发用户注册登录项目

    完整的项目代码(github):https://github.com/suqinhui/express-demo express是基于Node.js平台的web应用开发框架,用express框架开发w ...

  9. 用Flutter开发的跨平台项目，完美运行在Android和IOS上，Material简洁风格，包括启动页、引导页、注册、登录、首页、体系、公众号、导航、项目，还有漂亮的妹子图库，运行极度流畅，结构清晰，代码规范，值得拥有

    Flutter学习资源汇总持续更新中...... Flutter官方网站 Flutter中文网 wendux的Flutter实战 Flutter官方exampleflutter_gallery 阿里巴 ...

随机推荐

  1. 对ORM的理解

    1. 在面试中可能会问到这个问题,什么是ORM? ORM是对象关系映射(Object Relational Mapping),简称ORM,或O/RM,或O/R mapping,是一种程序技术. 白话理 ...

  2. CF336A Vasily the Bear and Triangle 题解

    Content 一个矩形的顶点为 \((0,0)\),其对顶点为 \((x,y)\),现过 \((x,y)\) 作直线,分别交 \(x\) 轴和 \(y\) 轴于 \(A,B\) 两点,使得 \(\t ...

  3. LuoguB2028 反向输出一个三位数 题解

    Content 给定一个三位数,请反向输出它. 数据范围:数值在 \(100\) 到 \(999\) 之间. Solution 如果我们把它当做是一个字符串来读入的话,这道题目就很简单了.STL 当中 ...

  4. Shell脚本--数值比较组合判断

    用于数值比较的无非大于.小于.等于.大于等于.小于等于这几个. 比较格式: [ 数值1 比较符 数值2 ]   注意左边的括号与数值1之间有一个空格,同样,数值2和右边的括号之间也有空格. 数值比较运 ...

  5. IDE Goland DEBUG报错（could not launch process: decoding dwarf section info at offset 0x0: too short）

    背景: 在升级GO版本到1.11后发现Goland的Debug报错,如下:could not launch process: decoding dwarf section info at offset ...

  6. c++基础之虚函数表指针和虚函数表创建时机

    虚函数表指针 虚函数表指针随对象走,它发生在对象运行期,当对象创建的时候,虚函数表表指针位于该对象所在内存的最前面. 使用虚函数时,虚函数表指针指向虚函数表中的函数地址即可实现多态. 虚函数表 虚函数 ...

  7. win10+vs2015编译nanogui

    !!版权声明:本文为博主原创文章,版权归原文作者和博客园共有,谢绝任何形式的 转载!! 作者:mohist 说明: A.OS : win10 1909 ,没有配置OpenGL开发环境的 经历. B. ...

  8. 【LeetCode】面试题62. 圆圈中最后剩下的数字 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 约瑟夫环 日期 题目地址:https://leetco ...

  9. 【LeetCode】946. Validate Stack Sequences 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 模拟过程 日期 题目地址:https://leetc ...

  10. 【LeetCode】475. Heaters 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 遍历 日期 题目地址:https://leetcod ...