標籤：ima get inf .net password 網站目錄 bootstra 版本號碼 下載
Bootstrap如同前台架構，它已經布置好不少的CSS。前端開發的使用須要則直接調用就可以。其網站的網址就是http://www.bootcss.com。使用Bootstrap能降低前端開發時候在CSS樣子的布置時間
須要使用Bootstrap先在官網（點擊開啟連結）下載組件就可以，用於生產環境的Bootstrap版本號碼（點擊開啟連結），Bootstrap3對2並不相容，建議直接依據其開發文檔使用Bootstrap3。
將Bootstrap解壓之後把得到的3個目錄css,fonts,js複製到網站目錄以下。
假設是Eclipse的JSP Web Project的話就把它們放到WebRoot目錄以下。
之後就行在此網站檔案夾下的不論什麼頁面調用Bootstrap為前端高速建模。
只是值得注意的是，不同瀏覽器對於Bootstrap解釋是不一樣的，當中IE對某些樣式讀不出來，可是主要的功能不受影響。頁面醜一點而已。
下面是IE與Google瀏覽器對同一頁面的對照：
一、基本目標
使用Bootstrap來編寫一個PC、平板、手機同一時候使用並且美觀的登陸頁面。
在PC上假設展開的話。各類元素會自己主動適應螢幕。
在手機上開啟這類的頁面的話，會直接適應手機螢幕，無需使用者自己主動調節。
二、基本思想
頁面的布局，依據Bootstrap固有的樣式設計例如以下：
三、製作過程
例如以下整個頁面詳細代碼例如以下，以下將一個一個標籤來分析：
<!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> 沒有帳號？<ahref="http://2.com">點擊注冊</a> </small></div></div></form></div></div></body></html>
1.<head>標籤
先在<head>標籤中。放入例如以下兩行代碼：
<head><title>登陸頁面</title><!--要求頁面自己主動適應瀏覽器的螢幕--><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>
（1）首先寫入<div class="panel panel-info"></div>。然後在當中放入代碼，其基本說明例如以：
（2）<div class="panel-heading">標籤
<div class="panel-heading"><!--設定表格對這個CSS圖層進行布局，在img標籤中加入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">標籤下。先放入一個表單元素form class="form-horizontal" role="form" action="1.html" method="post">，此表單與HTML的普通表單相比，就是多了class屬性與role屬性，class屬性無需多說。假設值為form的話，表單即使有足夠位置，外標籤與輸入框也不會在同一行，假設值為如今的form-horizontal。那麼則效果所看到的。role屬性看不出有怎樣效果，此處不過依據bootstrap的中文文檔加入的。
接下來，各個form表單下的元素例如以下：
<div class="panel-body"><form class="form-horizontal" role="form" action="1.html"method="post"><!--每個屬性的外標籤與輸入框構成一個form-group元組--><div class="form-group"><!--例如以下的class屬性是為了其可以依據螢幕的大小自己主動展開--><label for="username" class="col-sm-2 control-label">使用者名稱：</label><div class="col-sm-10"><!--此處的placholder意為不輸入不論什麼東西的說明灰字，當然在IE8中無法解釋。id看不出有什麼作用。不過依據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按鈕是有差別的，但不影響表單的提交--><button type="submit" class="btn btn-info">登陸</button><!--<small>標籤保證了這段文字與submit按鈕同一行--><small> 沒有帳號？<ahref="http://2.com">點擊注冊</a> </small></div></div></form></div>
【Bootstrap】一個PC、平板、手機同一時候使用並且美觀的登陸頁面
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
