Bootstrap是现在很流行的一套前端框架，尤其是它的自适应，真的很不错，而且对移动设备也很友好，可以达到快速开发的效果，最近想把自己的网站弄个手机版，很果断的就选用了bootstrap，跟大家分享一下我的学习心得，文笔水平不太好，大家见谅，看不懂的可以回复提问，我会回答的。

先去官网下载bootstrap的编译好的必要文件http://d.bootcss.com/bootstrap-3.2.0-dist.zip（注意！！下载下来的文件目录结构不要弄乱了，那里有个字体库的文件，是用来显示字体图标的，这个以后会说到），或者你直接用他们服务器上的也可以。

首先新建一个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>

等我手机版页面做好之后，会跟大家分享部分源码，到时候大家用手机访问www.weixh.net时会自动跳转到手机页，就能够目睹到bootstrap的效果了，今天就到这里，接下来会跟大家说说bootstrap组件的使用。

Bootstrap学习之路（1）---开篇-登陆页的更多相关文章

  1. .Net程序员安卓学习之路1：登陆界面

    任何编程学习起步均是HelloWorld,作为稍有>net编程经验的我们来说就跳过这步吧,咱们且从简单登录界面开始.先看看效果: 一.准备知识: 1. 安卓环境:安装好JDK,直接去官网下载AD ...

  2. Bootstrap学习之路（3）---列表组件

    列表是几乎所有网站都会用到的一个组件,正好bootstrap也给我们提供了这个组件的样式,下面我给大家简单介绍一下bootstrap中的列表组件的用法! 首先,重提一下引用bootstrap的核心文件 ...

  3. Bootstrap学习之路（2）---导航组件

    在bootstrap中,导航条的样式都依赖于.nav类,而样式又分为多种,如: 标签页的样式为:.nav-tabs <ul class="nav nav-tabs"> ...

  4. Bootstrap学习js插件篇之标签页

    简单的标签页 代码: <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs ...

  5. bootstrap学习之路

    接触bootstrap也半年有余,从一开始不知道如何使用,到知道其各个模块的具体功能,再到提炼哪些使用的比较多,再此又体会到bootstrap源码的精髓,通过oocss写的类使其感觉更有易用性,开始本 ...

  6. 前端学习之路之SPA(单页应用)设计原理

    SPA设计 1.设计意义 前后端分离 减轻服务器压力 增强用户体验 Prerender预渲染优化SEO 前后端分离:前端做业务逻辑,后端处理数据和接口,耦合度减少,开发效率提高. 减轻服务器压力:一个 ...

  7. iOS 开发之路（登陆页键盘遮挡输入框问题）一

    在学习开发登陆页的时候,遇到的问题分享如下: 首先是swift 3.0 中,NotificationCenter 设置 selector 如下: @IBOutlet weak var bottomCo ...

  8. Bootstrap 之 Metronic 模板的学习之路 - （1）总览

    写在前面 bootstrap 的模板非常多,Envato 上有着各种各样的免费及付费模板.Metronic 是我最喜欢的模板之一(看一眼就喜欢上的那种),当前售价 $28 ,觉得赞的,不妨支持一下作者 ...

  9. 踏上Salesforce的学习之路（一）

    相信通过前面的学习,大家已经拥有了一个属于自己的Salesforce开发者账号,下面,我们将用这个账号正式踏上Salesforce的学习之路. 首先,点击网址:https://developer.sa ...

随机推荐

  1. BZOJ 3064 CPU监控

    题目链接:CPU监控 学习一番线段树的历史标记- 这道题就是区间加法,区间赋值,要询问区间最大值 和 区间历史最大值的最大值. 然后这种题就是在现有标记的基础上多弄一套标记,维护这个点出现过的最大的标 ...

  2. 快递100API接口开发

    api.kuaidi100.com 获得物流单号的跟踪信息(免费) 1.应用场景 2.是否需要授权 3.请求地址 4.输入参数 5.返回结果 6.返回示例 7.API工具 8.FAQ 通过向指定的地址 ...

  3. <<网络是怎样连接的>>笔记第2章用电信号传输Tcp/ip数据

    创建套接字: 协议栈的内部结构.套接字的实体,以及创建套接字的操作过程 连接服务器: “连接”具体是进行怎样的操作,在这个过程中协议栈到底是如何工作的, 以及客户端和服务器是如何进行交互的. 收发数据 ...

  4. Tornado源码分析 --- Cookie和XSRF机制

    Cookie和Session的理解: 具体Cookie的介绍,可以参考:HTTP Cookie详解 可以先查看之前的一篇文章:Tornado的Cookie过期问题 XSRF跨域请求伪造(Cross-S ...

  5. bzoj1143: [CTSC2008]祭祀river 最长反链

    题意:在遥远的东方,有一个神秘的民族,自称Y族.他们世代居住在水面上,奉龙王为神.每逢重大庆典, Y族都会在水面上举办盛大的祭祀活动.我们可以把Y族居住地水系看成一个由岔口和河道组成的网络.每条河道连 ...

  6. vue兼容ie

    为了兼容IE github build/webpack.base.conf.js [vuex] vuex requires a Promise polyfill in this browser. // ...

  7. git 基础入门操作

    前言: 介绍基础的git入门级指令,虽然git指令非常多,但是实际工作中,我们会用到的非常少,小项目中甚至只需要用到2.3个.而且大部分人都会采用gui,而不是每次都打开终端然后输一长串难记的指令. ...

  8. 12.21 Gson的常用用法 功能介绍 特点

    使用谷歌GSON常用语法: 功能:映射Java Object与json格式的数据 1.通过Annotation注解来声明 2.支持自定义属性名称 3.支持包含或排除属性 4.支持自定义接口自己完成解析 ...

  9. MVC项目使用Oracle数据库运行提示：找不到请求的 .Net Framework Data Provider。可能没有安装

    MVC项目使用Entity Framework针对Oracle数据库进行开发时,由于Oracle官方网站一般建议开发者在64位操作系统中使用32位ODP.Net进行开发.在进行程序编码的时候不会有问题 ...

  10. Alpha冲刺一 （8/10）

    前言 队名:拖鞋旅游队 组长博客:https://www.cnblogs.com/Sulumer/p/10023260.html 作业博客:https://edu.cnblogs.com/campus ...