一、介绍

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

二、知识点

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. ciscn_2019_s_4***（栈迁移）

    这是十分经典的栈迁移题目 拿到题目例行检查 32位程序开启了nx保护 进入ida,发现了很明显的system 我们进入main函数查看vul 可以看到溢出的部分不够我们rop所以这道题通过栈迁移去做 ...

  2. vue3官网介绍，安装，创建一个vue实例

    前言:这一章主要是vue的介绍.安装.以及如何创建一个vue实例. 一.vue介绍 vue3中文官网:建议先自己看官网. https://v3.cn.vuejs.org/ vue是渐进式框架,渐进式指 ...

  3. CF1469D Ceil Divisions 题解

    Content 你有一个长度为 \(n\) 的数组 \(a\),初始时,\(\forall i\in[1,n]\),\(a_i=i\). 每次操作选择两个数 \(x,y(1\leqslant x,y\ ...

  4. 55 道MySQL基础题

    1.一张表,里面有 ID 自增主键,当 insert 了 17 条记录之后, 删除了第 15, 16, 17 条记录,再把 Mysql 重启,再 insert 一条记 录,这条记录的 ID 是 18 ...

  5. 数据改变认知——不知怎么选，用RFM模型看舔狗质量！

    假设我长得很漂亮,拥有众多追求者,但是初出闺房的我对这世界上的男人毫无认知,那么该如何选择呢?这真是一个问题! 妈妈说,愿意为我花钱的男人未必爱我,但不愿意为我花钱的男人必定不爱我,而后传授了一套RF ...

  6. TensorFlow.NET机器学习入门【3】采用神经网络实现非线性回归

    上一篇文章我们介绍的线性模型的求解,但有很多模型是非线性的,比如: 这里表示有两个输入,一个输出. 现在我们已经不能采用y=ax+b的形式去定义一个函数了,我们只能知道输入变量的数量,但不知道某个变量 ...

  7. c++代码编译错误查找方法之宏

    1.关于 本文演示环境: win10+vs2017 好久不用这法子了,都快忘了 排查错误,思路很重要,且一定要思路清晰(由于自己思路不清晰,查找错误耽误了不少时间,其实问题很简单,只是你要找到他需要不 ...

  8. 【LeetCode】861. Score After Flipping Matrix 解题报告（Python & C++）

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

  9. LeetCode 第三大的数414. Third Maximum Number

    题目 描述:给定数组中求第三大的数字:如果没有,返回最大的:时间复杂度O(n) 记得<剑指offer>才看到过这样的求第k大的题目.但是忘记具体怎么做了.只好先自己想了. 因为时间复杂度的 ...

  10. hud-5475 An easy problem(线段树)

    http://acm.hdu.edu.cn/showproblem.php?pid=5475 An easy problem Time Limit: 8000/5000 MS (Java/Others ...