使用Font Awesome 构建的响应式登录对话框 - 踏得网

1. 响应式设计，自适应布局 2. 带社交登录方式 3. 使用Font Awesome 4.1.0的简洁图标（http://fontawesome.io）

fontawesome,responsive

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2904
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css">
<section>
  <div class="row">
    <div class="container">
      <div class="col-sm-8 col-sm-offset-2">
        <form>
          <div class="row">
            <div class="col-sm-5 col-sm-offset-1 form-group">
              <p>Sign in with your account</p>
              <div class="input-group form-group">
                <span class="input-group-addon">
                  <i class="fa fa-envelope-o fa-fw"></i>
                </span>
                <input class="form-control" type="text" placeholder="Email address">
              </div>
              <div class="input-group form-group">
                <span class="input-group-addon">
                  <i class="fa fa-key fa-fw"></i>
                </span>
                <input class="form-control" type="password" placeholder="Password">
              </div>
              <div class="form-group">
                <button type="submit" class="btn btn-default">
                  Sign in
                  <i class="fa fa-arrow-circle-right fa-fw"></i>
                </button>
              </div>
            </div>
            <div class="col-sm-5 form-group">
              <p>Sign in using social media</p>
              <a href="#" class="twitter btn btn-block" role="button">
                <i class="fa fa-twitter-square fa-fw"></i>
                Login with Twitter
              </a>
              <a href="#" class="linkedin btn btn-block" role="button">
                <i class="fa fa-linkedin-square fa-fw"></i>
                Login with Linkedin
              </a>
              <a href="#" class="facebook btn btn-block" role="button">
                <i class="fa fa-facebook-square fa-fw"></i>
                Login with Facebook
              </a>
              <a href="#" class="google-plus btn btn-block" role="button">
                <i class="fa fa-google-plus-square fa-fw"></i>
                Login with Google+
              </a>
            </div>
    		 </div>
        </form>
		 </div>
	 </div>
  </div>
</section>

<p class="p">Demo by George Martsoukos. <a href="https://www.sitepoint.com/introduction-icon-fonts-font-awesome-icomoon/" target="_blank">See article</a>.</p>