BOOTSTRAP学习之路（1）

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

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

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

<div class="container"><form action="#" class="form-signin" role="form"><h2 class="form-signin-heading">用户登录</h2><input type="text" class="form-control" placeholder="请输入用户名" required autofocus><div style="height:10px;clear:both;display:block"></div><input type="password" class="form-control" placeholder="请输入密码" required><div class="checkbox"><label><input type="checkbox" value="remember-me"> 记住登录状态</label></div><button class="btn btn-lg btn-primary btn-block" type="submit">登录</button></form></div>

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

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

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

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

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

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

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

最终效果：

全部html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>用户登录</title><!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container"><form action="#" class="form-signin" role="form"><h2 class="form-signin-heading">用户登录</h2><input type="text" class="form-control" placeholder="请输入用户名" required autofocus><div style="height:10px;clear:both;display:block"></div><input type="password" class="form-control" placeholder="请输入密码" required><div class="checkbox"><label><input type="checkbox" value="remember-me"> 记住登录状态</label></div><button class="btn btn-lg btn-primary btn-block" type="submit">登录</button></form></div>
</body>
</html>

BOOTSTRAP学习之路（1）相关推荐

Python学习之路—2018/7/14
Python学习之路-2018/7/12 3.功能开发 3.3 设计博客首页博客首页中最重要的就是中间的文章区域,所以我首先把文章区域设计出来,一开始并没有数据,如果用orm添加或者直接在数据库添加 ...
pyqt5从子目录加载qrc文件_【JVM系统学习之路】一篇看懂类加载
JVM系统学习之路系列演示代码地址:https://github.com/mtcarpenter/JavaTutorial 嗨喽,小伙伴大家好,我是小春哥,今天是打卡 [JVM系统学习之路] 的第二篇 ...
《我的PaddlePaddle学习之路》笔记一——PaddlePaddle的安装
原文博客:Doi技术团队链接地址:https://blog.doiduoyi.com/authors/1584446358138 初心:记录优秀的Doi技术团队学习经历环境系统:Ubuntu 1 ...
一个普通本科在校生的前端学习之路
原创西安前端交流会: 卡农 ovenzeze@qq.com 本文章同步发表在wdShare西安前端交流会网站.我的个人博客以及segmentFault和掘金. 转载请注明出处这是西安初级前端群里边 ...
SpringCloud学习之路
SpringCloud学习之路 1.使用IDEA搭建Eureka服务中心Server端启动 1.1.创建和配置注册中心Eureka 1.2.使用Eureka案例 1.3.负载均衡器Ribbon 1.4 ...
Redis学习之路(一)--下载安装redis
redis学习之路--下载安装redis windows安装redis 1.下载redis 2.安装 3.查看是否安装成功 windows安装redis 1.下载redis 网址:https://gi ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言先安装node.js环境 ...
学习之路-现代密码学基础-001
学习之路-现代密码学基础-第一章密码学概论转载于:https://www.cnblogs.com/vegetables-Adanos/p/5371420.html
拿下斯坦福和剑桥双offer，00后的算法学习之路
董文馨,00后,精通英语,西班牙语.斯坦福大学计算机系和剑桥大学双Offer,秋季将进入斯坦福大学学习. 10岁开始在国外上学:12岁学Scratch: 13岁学HTML & CSS: 14岁 ...

BOOTSTRAP学习之路（1）

BOOTSTRAP学习之路（1）相关推荐

最新文章

热门文章