您当前的位置: 首页 > 
  • 0浏览

    0关注

    1477博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

BOOTSTRAP学习之路(1)

软件工程小施同学 发布时间:2016-09-25 18:16:32 ,浏览量:0

首先新建一个HTML页面,在head引入必要的文件,如下:






引用之后,就可以在body里面进行快速开发了,接下来是从登陆页开始:

用户登录
记住登录状态
登录

接下来是解释上面的布局:

新建个.container类的div容器,用于固定宽度并支持响应式布局。

form表单要引用bootstrap的表单样式form-signin,然后里面的布局也要用它相应的样式,两个输入框中间的div是我自己加上去的,为了防止两个输入框贴在一起,

input标签里面的required属性则是为必填的意思,如果加了这个属性,你输入框问空时,点击提交会提示你输入,

input标签里的autofocus属性则是自动获得焦点,就是在页面加载时,用户名这个输入框会自动获得焦点。

当然,如果你觉得默认的样式你不喜欢,你可以对他进行重写,然后再配合自己的布局,加上自己的登录逻辑,一个手机版的登录页面就够很快的开发出来了,

声明一点的是,我要做的是手机页面,所以不需要考虑IE各种兼容的问题。

最终效果:

全部html代码:




    用户登录
    







用户登录
记住登录状态
登录

关注
打赏
1665320866
查看更多评论
立即登录/注册

微信扫码登录

0.0470s