Bootstrap編寫一個(gè)同時(shí)適用于PC、平板、手機(jī)的登陸頁面
Bootstrap如同前臺框架,它已經(jīng)布置好不少的CSS,前端開發(fā)的使用需要則直接調(diào)用即可。其網(wǎng)站的網(wǎng)址就是http://www.bootcss.com。使用Bootstrap能減少前端開發(fā)時(shí)候在CSS樣子的布置時(shí)間
需要使用Bootstrap先在官網(wǎng)(點(diǎn)擊打開鏈接)下載組件即可,用于生產(chǎn)環(huán)境的Bootstrap版本(點(diǎn)擊打開鏈接),Bootstrap3對2并不兼容,建議直接根據(jù)其開發(fā)文檔使用Bootstrap3。
將Bootstrap解壓之后把得到的3個(gè)文件夾css,fonts,js拷貝到站點(diǎn)目錄下面。如果是Eclipse的JSP Web Project的話就把它們放到WebRoot文件夾下面。
之后就能夠在此站點(diǎn)目錄下的任何頁面調(diào)用Bootstrap為前端快速建模。
不過值得注意的是,不同瀏覽器對于Bootstrap解釋是不一樣的,其中IE對某些樣式讀不出來,但是基本的功能不受影響,頁面丑一點(diǎn)而已。
以下是IE與谷歌瀏覽器對同一頁面的對比:
一、基本目標(biāo)
使用Bootstrap來編寫一個(gè)PC、平板、手機(jī)同時(shí)使用而且美觀的登陸頁面。
在PC上如果拉伸的話,各類元素會自動適應(yīng)屏幕。
在手機(jī)上打開這類的頁面的話,會直接適應(yīng)手機(jī)屏幕,無需用戶自動調(diào)節(jié)。
二、基本思想
頁面的布局,根據(jù)Bootstrap固有的樣式設(shè)計(jì)如下:
三、制作過程
如下整個(gè)頁面具體代碼如下,下面將一個(gè)一個(gè)標(biāo)簽來分析:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>登陸頁面</title> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> </head> <body> <div class="panel panel-info"> <div class="panel-heading"> <table frame="void"> <tr> <td> <img src="images/img0.jpg" width="300px" height="300px" /> </td> <td> 歡迎。請您先登錄。 </td> </tr> </table> </div> <div class="panel-body"> <form class="form-horizontal" role="form" action="1.html" method="post"> <div class="form-group"> <label for="username" class="col-sm-2 control-label"> 用戶名: </label> <div class="col-sm-10"> <input type="text" name="username" class="form-control" placeholder="用戶名" id="username" /> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label"> 密碼: </label> <div class="col-sm-10"> <input type="password" name="password" class="form-control" placeholder="密碼" id="password" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-info"> 登陸 </button> <small> 沒有賬號?<a >點(diǎn)擊注冊</a> </small> </div> </div> </form> </div> </div> </body> </html>
1.<head>標(biāo)簽
先在<head>標(biāo)簽中,放入如下兩行代碼:
<head> <title>登陸頁面</title> <!--要求頁面自動適應(yīng)瀏覽器的屏幕--> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <!--聲明我要使用bootstrap--> <link href="css/bootstrap.css" rel="stylesheet" media="screen"> </head>
2.<body>標(biāo)簽
(1)首先寫入<div class="panel panel-info"></div>,然后在其中放入代碼,其基本說明如下圖:
(2)<div class="panel-heading">標(biāo)簽
<div class="panel-heading"> <!--設(shè)置表格對這個(gè)CSS圖層進(jìn)行布局,在img標(biāo)簽中加入align="left"是不好用的,圖象會向圖層外溢出--> <!--同<table border="0">--> <table frame="void"> <tr> <td> <img src="images/img0.jpg" width="300px" height="300px" /> </td> <td> 歡迎。請您先登錄。 </td> </tr> </table> </div>
(3)<div class="panel-body">標(biāo)簽下,先放入一個(gè)表單元素form class="form-horizontal" role="form" action="1.html" method="post">,此表單與HTML的普通表單相比,就是多了class屬性與role屬性,class屬性無需多說,如果值為form的話,表單即使有足夠位置,外標(biāo)簽與輸入框也不會在同一行,如果值為現(xiàn)在的form-horizontal,那么則如圖效果所示。role屬性看不出有如何效果,此處僅僅是根據(jù)bootstrap的中文文檔添加的。
接下來,各個(gè)form表單下的元素如下:
<div class="panel-body"> <form class="form-horizontal" role="form" action="1.html" method="post"> <!--每一個(gè)屬性的外標(biāo)簽與輸入框構(gòu)成一個(gè)form-group元組--> <div class="form-group"> <!--如下的class屬性是為了其能夠根據(jù)屏幕的大小自動拉伸--> <label for="username" class="col-sm-2 control-label"> 用戶名: </label> <div class="col-sm-10"> <!--此處的placholder意為不輸入任何東西的說明灰字,當(dāng)然在IE8中無法解釋。id看不出有什么作用,僅僅是根據(jù)Bootstrap中文文檔的要求而添加的--> <input type="text" name="username" class="form-control" placeholder="用戶名" id="username" /> </div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label"> 密碼: </label> <div class="col-sm-10"> <input type="password" name="password" class="form-control" placeholder="密碼" id="password" /> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <!--此處的button與HTML的普通submit按鈕是有區(qū)別的,但不影響表單的提交--> <button type="submit" class="btn btn-info"> 登陸 </button> <!--<small>標(biāo)簽保證了這段文字與submit按鈕同一行--> <small> 沒有賬號?<a >點(diǎn)擊注冊</a> </small> </div> </div> </form> </div>
至此,本頁面的開發(fā)完成。
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊這里進(jìn)行學(xué)習(xí),再為大家附3個(gè)精彩的專題:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
HTML中Select不用Disabled實(shí)現(xiàn)ReadOnly的效果
Disabled ReadOnly之家的聯(lián)系2008-04-04JS實(shí)現(xiàn)從表格中動態(tài)刪除指定行的方法
這篇文章主要介紹了JS實(shí)現(xiàn)從表格中動態(tài)刪除指定行的方法,通過getElementById獲取指定行再使用deleteRow方法來實(shí)現(xiàn)刪除行的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03Js中parentNode,parentElement,childNodes,children之間的區(qū)別
這篇文章主要是對Js中parentNode,parentElement,childNodes,children的區(qū)別進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11《JavaScript高級程序設(shè)計(jì)》閱讀筆記(三) ECMAScript中的引用類型
ECMAScript中的引用類型,主要包括Object類、Boolean類、Number類、String類、instanceof運(yùn)算符2012-02-02