Bootstrap遷移系列

原來項目是使用2.x完成的，現在需要使用3.x進行更新。

對jQuery的依賴

請注意，所有JavaScript插件都依賴jQuery，在頁面中的引入順序可以參考基本模版。

bower.json

中列出了Bootstrap所支援的jQuery版本。

3.x需要JQuery1.9.0以上版本，推薦V1.9.1(支援IE6+)

模态框元件（V3.0）的HTML結構發生了很大的改變。

.modal-header

、

.modal-body

和

.modal-footer

部分目前包含在了

.modal-content

和

.modal-dialog

中，為的是增強移動裝置上的樣式和行為特性。

在2.x中的實作效果

實作代碼：

<!DOCTYPE html>
<html>
  <head>
    <title>登入框</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
	<body style="background: #555;">

		<div class="modal show" role="dialog">
			<div class="modal-header">
				<h3>登入</h3>
				<p>請輸入E-mail和密碼</p>
			</div>
		<div class="modal-body">
			<form action="admin/user/login" method="post" accept-charset="utf-8">	
				<table class="table">
					<tr>
						<td>Email</td>
						<td><input type="text" name="email" value=""  /></td>
					</tr>
					<tr>
						<td>密碼</td>
						<td><input type="password" name="password" value=""  /></td>
					</tr>
					<tr>
						<td></td>
						<td><input type="submit" name="login" value="登入" class="btn btn-primary" /></td>
					</tr>
				</table>
			</form>
		</div>
		<div class="modal-footer">
			© xiaobin_hlj80
		</div>
	</div>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

在3.x中的實作效果

實作代碼：

<!DOCTYPE html>
<html>
  <head>
    <title>登入框</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
	<body style="background: #555;">
	
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h3>登入</h3>
					<p>請輸入E-mail和密碼</p>
				</div>
				<div class="modal-body">
					<form action="admin/user/login" method="post" accept-charset="utf-8">	
						<table class="table">
							<tr>
								<td>Email</td>
								<td><input type="text" name="email" value="" class="form-control" placeholder="請輸入你的E-mail" /></td>
							</tr>
							<tr>
								<td>密碼</td>
								<td><input type="password" name="密碼" value="" class="form-control" placeholder="請輸入你的密碼" /></td>
							</tr>
							<tr>
								<td></td>
								<td><input type="submit" name="login" value="登入" class="btn btn-primary btn-lg btn-block" /></td>
							</tr>
						</table>
					</form>
				</div>
				<div class="modal-footer">
					© xiaobin_hlj80
				</div>
			</div>
		</div>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

模态框元件的HTML結構發生了很大的改變。

.modal-header

、

.modal-body

和

.modal-footer

部分目前包含在了

.modal-content

和

.modal-dialog

中，為的是增強移動裝置上的樣式和行為特性。