Boostrap实现的登录界面实例代码

前端之家收集整理的这篇文章主要介绍了Boostrap实现的登录界面实例代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Bootstrap

它是一个开源的web开发前端框架。

这几天我看了下Bootstrap的官方文档。看到其中的Basic-form,突然想实现下登录界面。然后想了下实现的思路,于是就打开了桌面的H5 builder码起来。代码实现起来其实不难,但是碰到个问题,就是Bootstrap的布局控制好像用.col类难以实现居中显示,虽然可以用modal(模态框)实现弹出居中,但是我暂时不想用modal框。发现问题后,第一想法是自己再定义个css进行一个控制。但是又不知道行业内的大牛是不是只用Bootstrap就能实现,而我只是没发现实现的方法。然后倔强地想要试试只用Bootstrap实现,后来各种google,百度,半小时过去了。没找到方法,所以我也只能自己写css进行布局一个div居中。其实,也不是我不懂css,只是单纯地想实现下。好了,废话少说,上个图坐镇。界面写得不好看,如有错误请大方指正。(背景图不会PS,是用别人的,若有侵权请给我发邮件或者留言,我立马换图!)。

好了,感觉登录框不够居中。如有更好的方法,请告知我谢谢!

本界面使用的Bootstrap是v3.3.5版本。

基本代码

style.css(我的css用于控制登录框那个外部的div居中):

Box,button{ margin-top:2%; margin-left: 10%; margin-right: 10%; } .mycheckBox{ margin-top:10px; margin-left: 40px; margin-bottom: 10px; height: 10px; }

login.html(登录的界面HTML代码):

<a href="https://www.jb51.cc/tag/yonghu/" target="_blank" class="keywords">用户</a><a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>

猜你在找的JavaScript相关文章