Bootstrap学习之路(1)---开篇-登陆页

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组件的使用。

时间: 2024-11-10 14:02:01

Bootstrap学习之路(1)---开篇-登陆页的相关文章

bootstrap学习之路2

上一次简单介绍了一下bootstrap这个开源框架,这次继续bootstrap深入之路,从Less说起.... 关于less less是一门预处理语言,是对css的扩展,它使得css语言了动态语言的一些特性,如变量,继承,运算,函数等,使得css更加灵活强大,less的语言很简单,学习了css的朋友对于less的语法,上手基本没有难度.现在来看看less的以下特性: 变量 less中这样定义变量:@fontsize:14px:使用变量,h3{font-size:@fontsize},编译后的cs

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

任何编程学习起步均是HelloWorld,作为稍有>net编程经验的我们来说就跳过这步吧,咱们且从简单登录界面开始.先看看效果: 一.准备知识: 1. 安卓环境:安装好JDK,直接去官网下载ADT-bundle集成包后更新即可使用. 2. 项目目录:一张图说明一切 二.页面布局: 还是一幅图说明一切 那么这个界面的布局如何呢? <LinearLayout >最外边的DIV,用的是线性布局,方向是垂直 <TextView/>就是上图“初始用户名...”这几个字所在Lable &

Bootstrap学习之路(2)---导航组件

在bootstrap中,导航条的样式都依赖于.nav类,而样式又分为多种,如: 标签页的样式为:.nav-tabs <ul class="nav nav-tabs"> <li class="active"><a href="http://www.weixh.net">微笑话</a></li> <li><a href="#">图文</a&g

Bootstrap学习js插件篇之标签页

简单的标签页 代码: [javascript] view plaincopy <h1 class="page-header">4.3标签页</h1> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="

bootstrap学习之路

接触bootstrap也半年有余,从一开始不知道如何使用,到知道其各个模块的具体功能,再到提炼哪些使用的比较多,再此又体会到bootstrap源码的精髓,通过oocss写的类使其感觉更有易用性,开始本想对其各个板块,按钮进行逐一分析,总结出属于自己的一套css代码(自己也有属于自己的库,对各个组件的样式理解的更为透彻).但因为部门扩大,自己不得不在JS上花费精力,导致最终想法并未实现. 到现在深刻感觉到,响应式布局确实是这个社会的潮流以及未来发展方向.为此也发现自己对于bootstrap的理解确

踏上Salesforce的学习之路(一)

相信通过前面的学习,大家已经拥有了一个属于自己的Salesforce开发者账号,下面,我们将用这个账号正式踏上Salesforce的学习之路. 首先,点击网址:https://developer.salesforce.com/docs/atlas.en-us.workbook.meta/workbook/workshops_intro.htm 进入后在左上角选择Force.com Workbook的版本以及语言,由于语言只有英语和日语,这里我们选择英语,版本默认是最新版本V37.0,选择好了以后

我的算法学习之路

关于 严格来说,本文题目应该是我的数据结构和算法学习之路,但这个写法实在太绕口--况且CS中的算法往往暗指数据结构和算法(例如算法导论指的实际上是数据结构和算法导论),所以我认为本文题目是合理的. 这篇文章讲了什么? 我这些年学习数据结构和算法的总结. 一些不错的算法书籍和教程. 算法的重要性. 初学 第一次接触数据结构是在大二下学期的数据结构课程.然而这门课程并没有让我入门--当时自己正忙于倒卖各种MP3和耳机,对于这些课程根本就不屑一顾--反正最后考试划个重点也能过,于是这门整个计算机专业本

HTML5+Bootstrap 学习笔记 4

HTML5 <map> <area> 标签 <map> 标签定义客户端的图像映射.图像映射是带有可点击区域的图像. <area> 标签定义图像映射内部的区域(图像映射指的是带有可点击区域的图像). area 元素始终嵌套在 <map> 标签内部. 1 <img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> 2

linux学习之路及文本查看和文本处理命令

这一篇主要介绍几个常用的文本查看命令和文本处理命令. 首先介绍文本查看命令 cat:用于连接文件并显示 说明:当只有一个文件时,则用于查看文件内容:当有多个文件时,cat命令会将这些文件连接起来,在一起显示出来 语法格式:cat [option] FILE... -n:显示内容的时候把行号显示出来 -E:显示每一行的结束符$符(默认不显示) tac:也是用于显示文件内容,只不过他是将文件的内容倒过来显示,与cat相反 -n:显示行号 -E:显示每一行结尾的结束符$ 分屏操作命令 more与les