Bootstrap项目实训干货：设计简单登录框

一、实验目标

基本上每个web项目都会有网站登录模块，我们今天要实现的登录框是以弹出的方式呈现。页面如下:

二、实验环境

此登录框采用bootstrap框架来实现，依赖的版本为3.3.7。

我们可以直接引用cdn的资源，资源地址如下：

三、实验步骤

## 步骤1.实现弹出式登录框显示

知识点：

- 自定义数据属性：data-toggle、data-target

- bootstrap自带样式：text-align

## 步骤2.实现登录框

知识点：

- bootstrap自带样式：modal、fade、modal-dialog

- 自定义样式：loginmodal-container、loginmodal-container h1、loginmodal-container input[type=text]、input[type=password]、loginmodal-container input[type=text]:hover、 input[type=password]:hover、loginmodal-container a

完整代码链接：https://www.itbegin.com/apps/mooc/77a8ddd1229d4556956b49cb82c48708