Bootstrap模仿起筷首页效果


Posted in Javascript onMay 09, 2016

直接贴代码了

<!DOCTYPE html>
<html lang="en">
<head>
 <head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>用户注册</title>
 <link href="http://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet">
 <link href="qikuai.css" rel="stylesheet">
 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 <script src="http://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
 </head>
</head>
<body>
 <header>
 <nav class="navbar">
  <div class="container">
  <div class="navbar-header">
   <div class="navbar-brand">
   <a href="javascript:void(0);" title="起筷">
    <img src="/images/logo_navbar.png" class="img-responsive" alt="Responsive image">
   </a>
   </div>
  </div>
  </div>
 </header>
 <div class="login-background">
 <div class="login-panel">
  <div class="login-title">登录到起筷</div>
  <form class="form-group">
  <div class="col-md-12 form-panel">
   <div class="input-block">
   <div class="has-feedback">
    <input id="userIdentifier" class="form-control" placeholder="手机号/用户名/邮箱"></input>
    <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
   </div>
   </div>
   <div class="input-block">
   <div class="has-feedback">
    <input id="userIdentifier" class="form-control" placeholder="登录密码"></input>
    <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
   </div>
   </div>
   <div class="check-block">
   <div class="auto-login">
    <div class="checkbox">
    <label>
     <input value="remember-me" type="checkbox"></input>
     <span>自动登录</span>
    </label>
    </div>
   </div>
   </div>
   <div class="register-user">
   <a href="javascript:void(0);">注册新用户</a>
   </div>
   <div class="row">
   <div class="login-button">
    <button class="btn">登 录</button>
   </div>
   </div>
  </div>
  </form>
 </div>
 </div>
</body>
</html>

css代码:

.navbar{
 height: 108px;
 background-repeat: no-repeat;
 box-shadow: 0 0 5px #999;
 background-color: #fff;
 border-bottom: 2px solid #e8e3dd;
}
.container{
 width: 1170px;
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
}
.navbar-header{
 float: left;
}
img{
 vertical-align: middle;
 border: 0;
}
.login-background{
 background-image: url(/images/register-background.jpg);
 background-size: 100% auto;
 padding: 50px 0 15%;
 height: 633px;
}
.login-panel{
 background-color: #fff;
 opacity: .95;
 border-radius: 10px;
 position: relative;
 padding: 0 80px 20px;
 width: 350px;
}
.login-title{
 color: #333;
 font-weight: 300px;
 font-size: 24px;
 position: absolute;
 top: 40px;
 left: 35px;
}
.login-panel,.form-group{
 padding: 50px 0 5px;
 display: table;
 margin-left: auto;
 margin-right: auto;

}
.form-group{
 margin-bottom: 15px;
 width: 100%;
 float: left;
 padding-left: 15px;
 padding-right: 15px;
}
.login-panel .form-group{
 padding-top: 45px;
}
.input-block{
 padding: 11px 0;
}
.has-feedback{
 padding-right: 0;
 position: relative;
}
.form-control{
 color: #777;
 height: 37px;
 border: 1px solid #939393;
 padding-right: 42.5px;
 display: block;
 width: 100%;
 padding: 6px 12px;
 font-size: 14px;
 line-height: 1.42857143;
 background-color: #fff;
 border-radius: 4px;
}
.glyphicon{
 position: absolute;
 top: 0;
 right: 0;
 z-index: 2;
 display: block;
 width: 34px;
 height: 34px;
 line-height: 34px;
 text-align: center;
 pointer-events:none;
}
.auto-login{
 padding-left: 0;
 padding-right: 0;
 text-align: left;
 font-size: 12px;
 color: #777;
 vertical-align: middle;
 width: 50%;
 float: left;
}
label{
 display: inline-block;
 max-width: 100%;
}
.register-user{
 padding-left: 0;
 padding-right: 0;
 text-align: right;
 padding-top: 10px;
 width: 50%;
 float: left;
}
a{
 text-decoration: none;
}
.row{
 margin-right: -15px;
 margin-left: -15px;
}
.login-button{
 margin-top: 10px;
 width: 100%;
 position: relative;
 min-height: 1px;
 padding-right: 15px;
 padding-left: 15px;
}
.btn{
 background: #fa0;
 color: #fff;
 display: block;
 width: 100%;
 padding: 10px 16px;
 font-size: 18px;
 line-height: 1.33333;
 border-radius: 6px;
 font-weight: 400;
 text-align: center;
 vertical-align: middle;
}

效果图:

Bootstrap模仿起筷首页效果

如果大家还想深入学习,可以点击这里进行学习,再为大家附3个精彩的专题:

以上就是本文的全部内容,希望对大家学习Bootstrap有所帮助。

Javascript 相关文章推荐
jQuery Div中加载其他页面的实现代码
Feb 27 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
使用AngularJS实现表单向导的方法
Jun 19 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
Bootstrap输入框组件使用详解
Jun 09 Javascript
js数组实现权重概率分配
Sep 12 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
基于vue如何发布一个npm包的方法步骤
May 15 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
基于jquery实现智能表单验证操作
May 09 #Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 #Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 #Javascript
如何让一个json文件显示在表格里【实现代码】
May 09 #Javascript
JavaScript 函数的执行过程
May 09 #Javascript
jQuery绑定事件-多种实现方式总结
May 09 #Javascript
js原型链与继承解析(初体验)
May 09 #Javascript
You might like
广播爱好者需要了解的天线知识
2021/03/01 无线电
CodeIgniter启用缓存和清除缓存的方法
2014/06/12 PHP
大家在抢红包,程序员在研究红包算法
2015/08/31 PHP
基础的WordPress插件制作教程
2015/11/24 PHP
检测input每次的输入是否合法遇到汉字输入就有问题
2012/05/23 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
javascript实现数组中的内容随机输出
2015/08/11 Javascript
jQuery满意度星级评价插件特效代码分享
2015/08/19 Javascript
JavaScript中String对象的方法介绍
2017/01/04 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
2017/02/28 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
Vue Router history模式的配置方法及其原理
2019/05/30 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
python飞机大战游戏实例讲解
2020/12/04 Python
利用CSS3参考手册和CSS3代码生成工具加速来学习网页制
2012/07/11 HTML / CSS
亚历山大·王官网:Alexander Wang
2017/06/23 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
护士自我鉴定
2013/10/23 职场文书
学院领导推荐信
2013/10/30 职场文书
战友聚会邀请函
2014/01/18 职场文书
经销商订货会主持词
2014/03/27 职场文书
《锄禾》教学反思
2014/04/08 职场文书
2015年党员创先争优承诺书
2015/01/22 职场文书
会计求职简历自我评价
2015/03/10 职场文书
欠条格式范本
2015/07/03 职场文书