C50108
Search…
2019/0603/Bootstrap Components RWD End + ASP.NET_MVC Part2 PhotoSharing CodeFirst & Model 驗證

利用一個盒子把物件隱藏在藉由BUTTON或…觸發顯示
利用DATA-
Fade 淡入淡出
一開始直接顯示modal 所以要用jq show
互動視窗 (Modal)
getbootstrap
Modal
getbootstrap

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="MyStyle.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="modal" id="LoginModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Login</h3>
<button class="close" data-dismiss="modal"> &times;</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="email">Email:</label>
<input id="email" type="email" class="form-control" placeholder="Enter email..." required />
<div>
</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input id="pwd" type="password" class="form-control" placeholder="Password" required />
<div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<input id="" type="button" value="Cancel" class="btn btn-light" data-dismiss="modal" />
<input id="" type="button" value="Login" class="btn btn-primary" />
</div>
</div>
</div>
</div>
<div class="text-right">
<input type="button" value="登入" class="btn btn-link" data-toggle="modal" data-target="#LoginModal" /> | <input type="button" value="聯絡我們" class="btn btn-link" />
</div>
<div class="jumbotron ">
<h1 class="MyFontForH"><strong>世界那麼大 我想去看看</strong></h1>
<p class="MyFontForP">錢包那麼小 是要看三小</p>
<hr />
<input id="Button1" type="button" value="了解更多行程" class="btn btn-success MyFontForP" />
</div>
<div class="media">
<div class="media-left">
<img src="images/01.jpg" class="media-object img-thumbnail" width="200" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">瑪雅金字塔遺跡</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示,陳女臉部朝下被壓在一張雙人沙發下,
臉部朝下雙腳及部分頭髮露出沙發外,由於死者衣著整齊,口中被塞入深咖啡色抹布,
被發現時已有屍斑。由於陳女陳屍位置特殊,警方初步推估有他殺可能,並研判是窒息死亡,
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<h3 class="media-heading MyFont">柬埔寨吳哥窟</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示,陳女臉部朝下被壓在一張雙人沙發下,
臉部朝下雙腳及部分頭髮露出沙發外,由於死者衣著整齊,口中被塞入深咖啡色抹布,
被發現時已有屍斑。由於陳女陳屍位置特殊,警方初步推估有他殺可能,並研判是窒息死亡,
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
<div class="media-right">
<img src="images/02.jpg" class="media-object img-thumbnail" width="200" />
</div>
</div>
<div class="media">
<div class="col-md-5">
<div class="media-left media-middle">
<img src="images/03.jpg" class="media-object img-thumbnail" width="200" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">越南下龍灣</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示,陳女臉部朝下被壓在一張雙人沙發下,
臉部朝下雙腳及部分頭髮露出沙發外,由於死者衣著整齊,口中被塞入深咖啡色抹布,
被發現時已有屍斑。由於陳女陳屍位置特殊,警方初步推估有他殺可能,並研判是窒息死亡,
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
</div>
<div class="col-md-7">
<div class="media-body">
<h3 class="media-heading MyFont">埃及金字塔與人面獅身</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示,陳女臉部朝下被壓在一張雙人沙發下,
臉部朝下雙腳及部分頭髮露出沙發外,由於死者衣著整齊,口中被塞入深咖啡色抹布,
被發現時已有屍斑。由於陳女陳屍位置特殊,警方初步推估有他殺可能,並研判是窒息死亡,
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
<div class="media-right">
<img src="images/04.jpg" class="media-object img-thumbnail" width="200" />
</div>
</div>
</div>
<div class="media">
<div class="col-md-6">
<div class="media-body">
<h3 class="media-heading MyFont">梵帝崗聖彼德大教堂</h3>
<p class="MyFont">
桃園市消防局表示,28日晚間9時26分,敬鵬平鎮3廠發生火警,到場時得知有2名移工受困,且當時1樓僅有濃煙,尚未有火光,2名小隊長各帶1組人員總共7人進入1樓,22時26分時指揮所發現狀況不對,用無線電急喊撤退,但只得到游曜陽回應「收到」,就再也聽不到任何回音。
指揮所研判7人發生意外,隨即整備搜救隊伍進入。
</p>
</div>
<div class="media-left media-middle">
<img src="images/05.jpg" width="250" class="media-object img-thumbnail" />
</div>
</div>
<div class="col-md-6">
<div class="media-body">
<h3 class="media-heading MyFont">台北101</h3>
<p class="MyFont">
桃園市消防局表示,28日晚間9時26分,敬鵬平鎮3廠發生火警,到場時得知有2名移工受困,且當時1樓僅有濃煙,尚未有火光,2名小隊長各帶1組人員總共7人進入1樓,22時26分時指揮所發現狀況不對,用無線電急喊撤退,但只得到游曜陽回應「收到」,就再也聽不到任何回音。
指揮所研判7人發生意外,隨即整備搜救隊伍進入。
</p>
</div>
<div class="media-right media-middle">
<img src="images/06.jpg" width="200" class="media-object img-thumbnail" />
</div>
</div>
</div>
<div class="media">
<div class="media-left media-middle">
<img src="images/07.jpg" width="250" class="media-object img-thumbnail" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">尼加拉瓜大瀑布</h3>
<p class="MyFont">
桃園市消防局表示,28日晚間9時26分,敬鵬平鎮3廠發生火警,到場時得知有2名移工受困,且當時1樓僅有濃煙,尚未有火光,2名小隊長各帶1組人員總共7人進入1樓,22時26分時指揮所發現狀況不對,用無線電急喊撤退,但只得到游曜陽回應「收到」,就再也聽不到任何回音。
指揮所研判7人發生意外,隨即整備搜救隊伍進入。
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<h3 class="media-heading MyFont">雪梨歌劇院</h3>
<p class="MyFont">
桃園市消防局表示,28日晚間9時26分,敬鵬平鎮3廠發生火警,到場時得知有2名移工受困,且當時1樓僅有濃煙,尚未有火光,2名小隊長各帶1組人員總共7人進入1樓,22時26分時指揮所發現狀況不對,用無線電急喊撤退
</p>
</div>
<div class="media-left media-middle">
<img src="images/08.jpg" width="200" class="media-object img-thumbnail" />
</div>
</div>
<div id="carouselOne" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselOne" data-slide-to="0" class="active"></li>
<li data-target="#carouselOne" data-slide-to="1"></li>
<li data-target="#carouselOne" data-slide-to="2"></li>
<li data-target="#carouselOne" data-slide-to="3"></li>
<li data-target="#carouselOne" data-slide-to="4"></li>
<li data-target="#carouselOne" data-slide-to="5"></li>
<li data-target="#carouselOne" data-slide-to="6"></li>
<li data-target="#carouselOne" data-slide-to="7"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/11.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/12.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/13.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/14.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/15.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/16.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/17.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/18.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselOne" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselOne" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script>
$('#carouselOne').carousel({interval:2000});
</script>
</body>
</html>
非常多階層要特別注意
Navbar 不等於 nav
所以有個class是 navbar-nav
導覽列 (Navbar)
getbootstrap
html5 nav
collapse -> navbar-collaps 摺疊
接著做漢堡選單按鈕 去把折疊的東西叫出來收回去
navbar-toggler-icon

<nav class="navbar navbar-light bg-light">
<div class="container">
<a href="#" class="navbar-brand h1">WDA</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MyMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MyMenu">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Features</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact Us</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">Order</a>
</li>
</ul>
</div>
</div>
</nav>
處理響應式斷點 md改為下拉式選單 sm才是漢堡選單
三版的顏色或大小要去改核心
但四版的有屬性可以扛拜

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="MyStyle.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-info">
<div class="container">
<a href="#" class="navbar-brand h1">WDA</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MyMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MyMenu">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Features</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
Item
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item disabled">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>
<a href="#" class="dropdown-item">Separated link</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact Us</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">Order</a>
</li>
</ul>
<form class="form-inline" action="https://www.google.com/search" method="get">
<div>
<input id="Text1" name="q" class="form-control" type="text" placeholder="請輸入關鍵字..." />
<input id="Submit1" type="submit" value="Search" class="btn btn-success" />
</div>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="modal fade" id="LoginModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Login</h3>
<button class="close" data-dismiss="modal"> &times;</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="email">Email:</label>
<input id="email" type="email" class="form-control" placeholder="Enter email..." required />
<div>
</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input id="pwd" type="password" class="form-control" placeholder="Password" required />
<div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<input id="" type="button" value="Cancel" class="btn btn-light" data-dismiss="modal" />
<input id="" type="button" value="Login" class="btn btn-primary" />
</div>
</div>
</div>
</div>
<div class="text-right">
<input type="button" value="登入" class="btn btn-link" data-toggle="modal" data-target="#LoginModal" /> | <input type="button" value="聯絡我們" class="btn btn-link" />
</div>
<div class="jumbotron ">
<h1 class="MyFontForH"><strong>世界那麼大 我想去看看</strong></h1>
<p class="MyFontForP">錢包那麼小 是要看三小</p>
<hr />
<input id="Button1" type="button" value="了解更多行程" class="btn btn-success MyFontForP" />
</div>
<div class="media">
<div class="media-left">
<img src="images/01.jpg" class="media-object img-thumbnail" width="200" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">瑪雅金字塔遺跡</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示,陳女臉部朝下被壓在一張雙人沙發下,
臉部朝下雙腳及部分頭髮露出沙發外,由於死者衣著整齊,口中被塞入深咖啡色抹布,
被發現時已有屍斑。由於陳女陳屍位置特殊,警方初步推估有他殺可能,並研判是窒息死亡,
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<h3 class="media-heading MyFont">柬埔寨吳哥窟</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示,陳女臉部朝下被壓在一張雙人沙發下,
臉部朝下雙腳及部分頭髮露出沙發外,由於死者衣著整齊,口中被塞入深咖啡色抹布,
被發現時已有屍斑。由於陳女陳屍位置特殊,警方初步推估有他殺可能,並研判是窒息死亡,
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
<div class="media-right">
<img src="images/02.jpg" class="media-object img-thumbnail" width="200" />
</div>
</div>
<div class="media">
<div class="col-md-5">
<div class="media-left media-middle">
<img src="images/03.jpg" class="media-object img-thumbnail" width="200" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">越南下龍灣</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示,陳女臉部朝下被壓在一張雙人沙發下,
臉部朝下雙腳及部分頭髮露出沙發外,由於死者衣著整齊,口中被塞入深咖啡色抹布,
被發現時已有屍斑。由於陳女陳屍位置特殊,警方初步推估有他殺可能,並研判是窒息死亡,
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
</div>
<div class="col-md-7">
<div class="media-body">
<h3 class="media-heading MyFont">埃及金字塔與人面獅身</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示,陳女臉部朝下被壓在一張雙人沙發下,
臉部朝下雙腳及部分頭髮露出沙發外,由於死者衣著整齊,口中被塞入深咖啡色抹布,
被發現時已有屍斑。由於陳女陳屍位置特殊,警方初步推估有他殺可能,並研判是窒息死亡,
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
<div class="media-right">
<img src="images/04.jpg" class="media-object img-thumbnail" width="200" />
</div>
</div>
</div>
<div class="media">
<div class="col-md-6">
<div class="media-body">
<h3 class="media-heading MyFont">梵帝崗聖彼德大教堂</h3>
<p class="MyFont">
桃園市消防局表示,28日晚間9時26分,敬鵬平鎮3廠發生火警,到場時得知有2名移工受困,且當時1樓僅有濃煙,尚未有火光,2名小隊長各帶1組人員總共7人進入1樓,22時26分時指揮所發現狀況不對,用無線電急喊撤退,但只得到游曜陽回應「收到」,就再也聽不到任何回音。
指揮所研判7人發生意外,隨即整備搜救隊伍進入。
</p>
</div>
<div class="media-left media-middle">
<img src="images/05.jpg" width="250" class="media-object img-thumbnail" />
</div>
</div>
<div class="col-md-6">
<div class="media-body">
<h3 class="media-heading MyFont">台北101</h3>
<p class="MyFont">
桃園市消防局表示,28日晚間9時26分,敬鵬平鎮3廠發生火警,到場時得知有2名移工受困,且當時1樓僅有濃煙,尚未有火光,2名小隊長各帶1組人員總共7人進入1樓,22時26分時指揮所發現狀況不對,用無線電急喊撤退,但只得到游曜陽回應「收到」,就再也聽不到任何回音。
指揮所研判7人發生意外,隨即整備搜救隊伍進入。
</p>
</div>
<div class="media-right media-middle">
<img src="images/06.jpg" width="200" class="media-object img-thumbnail" />
</div>
</div>
</div>
<div class="media">
<div class="media-left media-middle">
<img src="images/07.jpg" width="250" class="media-object img-thumbnail" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">尼加拉瓜大瀑布</h3>
<p class="MyFont">
桃園市消防局表示,28日晚間9時26分,敬鵬平鎮3廠發生火警,到場時得知有2名移工受困,且當時1樓僅有濃煙,尚未有火光,2名小隊長各帶1組人員總共7人進入1樓,22時26分時指揮所發現狀況不對,用無線電急喊撤退,但只得到游曜陽回應「收到」,就再也聽不到任何回音。
指揮所研判7人發生意外,隨即整備搜救隊伍進入。
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<h3 class="media-heading MyFont">雪梨歌劇院</h3>
<p class="MyFont">
桃園市消防局表示,28日晚間9時26分,敬鵬平鎮3廠發生火警,到場時得知有2名移工受困,且當時1樓僅有濃煙,尚未有火光,2名小隊長各帶1組人員總共7人進入1樓,22時26分時指揮所發現狀況不對,用無線電急喊撤退
</p>
</div>
<div class="media-left media-middle">
<img src="images/08.jpg" width="200" class="media-object img-thumbnail" />
</div>
</div>
<div id="carouselOne" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselOne" data-slide-to="0" class="active"></li>
<li data-target="#carouselOne" data-slide-to="1"></li>
<li data-target="#carouselOne" data-slide-to="2"></li>
<li data-target="#carouselOne" data-slide-to="3"></li>
<li data-target="#carouselOne" data-slide-to="4"></li>
<li data-target="#carouselOne" data-slide-to="5"></li>
<li data-target="#carouselOne" data-slide-to="6"></li>
<li data-target="#carouselOne" data-slide-to="7"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/11.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/12.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/13.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/14.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/15.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/16.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/17.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/18.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselOne" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselOne" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script>
$('#carouselOne').carousel({ interval: 2000 });
// $('#LoginModal').modal('show');
</script>
</body>
</html>

折疊 (Collapse)
getbootstrap
md暫時折疊 sm顯示之類或者

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="MyStyle.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<input id="Button1" type="button" value="一次控制兩個" data-toggle="collapse" data-target=".collapseMulti" />
<div class="card bg-warning">
<div class="card-header">
<a data-toggle="collapse" href="#collapse1">這是一個景點介紹</a>
</div>
<div class="collapse collapseMulti" id="collapse1">
<img src="Desert.jpg" style="width:100%" />
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-primary" />
</footer>
</div>
</div>
<hr />
<button data-toggle="collapse" data-target="#collapse2">景點介紹</button>
<div class="collapse collapseMulti" id="collapse2">
<div class="card bg-warning">
<div class="card-header">
這是一個景點介紹
</div>
<img src="Desert.jpg" style="width:100%" />
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-primary" />
</footer>
</div>
</div>
</div>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script>
</script>
</body>
</html>
Collapse 如果要預設要show 只要扛拜show即可
以下範例為 三個 但預設顯示第一個 案二或三才切換

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="MyStyle.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="accordion" id="accordion">
<div class="card">
<div class="card-header" id="heading1">
<button data-toggle="collapse" data-target="#collapse1" class="btn btn-link">這是一個景點介紹1</button>
</div>
<div class="collapse show" id="collapse1" data-parent="#accordion">
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2">
<button data-toggle="collapse" data-target="#collapse2" class="btn btn-link">這是一個景點介紹2</button>
</div>
<div class="collapse" id="collapse2" data-parent="#accordion">
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading3">
<button data-toggle="collapse" data-target="#collapse3" class="btn btn-link">這是一個景點介紹3</button>
</div>
<div class="collapse" id="collapse3" data-parent="#accordion">
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
</div>
</div>
</div>
</div>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script>
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="MyStyle.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-expand-md navbar-light bg-info">
<div class="container">
<a href="#" class="navbar-brand h1">WDA</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#MyMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="MyMenu">
<ul class="navbar-nav">
<li class="nav-item active">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Features</a>
</li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
Item
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item disabled">Another action</a>
<a href="#" class="dropdown-item">Something else here</a>
<a href="#" class="dropdown-item">Separated link</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">Action</a>
<a href="#" class="dropdown-item">Another action</a>
</div>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact Us</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link disabled">Order</a>
</li>
</ul>
<form class="form-inline" action="https://www.google.com/search" method="get">
<div>
<input id="Text1" name="q" class="form-control" type="text" placeholder="請輸入關鍵字..." />
<input id="Submit1" type="submit" value="Search" class="btn btn-success" />
</div>
</form>
</div>
</div>
</nav>
<div class="container">
<div class="modal fade" id="LoginModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3>Login</h3>
<button class="close" data-dismiss="modal"> &times;</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="email">Email:</label>
<input id="email" type="email" class="form-control" placeholder="Enter email..." required />
<div>
</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input id="pwd" type="password" class="form-control" placeholder="Password" required />
<div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<input id="" type="button" value="Cancel" class="btn btn-light" data-dismiss="modal" />
<input id="" type="button" value="Login" class="btn btn-primary" />
</div>
</div>
</div>
</div>
<div class="text-right">
<input type="button" value="登入" class="btn btn-link" data-toggle="modal" data-target="#LoginModal" /> | <input type="button" value="聯絡我們" class="btn btn-link" />
</div>
<div class="jumbotron ">
<h1 class="MyFontForH"><strong>世界那麼大 我想去看看</strong></h1>
<p class="MyFontForP">錢包那麼小 是要看三小</p>
<hr />
<input id="Button1" type="button" value="了解更多行程" class="btn btn-success MyFontForP" data-toggle="collapse" data-target="#collapse1" />
</div>
<div class="collapse" id="collapse1">
<div class="media">
<div class="media-left">
<img src="images/01.jpg" class="media-object img-thumbnail" width="200" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">瑪雅金字塔遺跡</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示,陳女臉部朝下被壓在一張雙人沙發下,
臉部朝下雙腳及部分頭髮露出沙發外,由於死者衣著整齊,口中被塞入深咖啡色抹布,
被發現時已有屍斑。由於陳女陳屍位置特殊,警方初步推估有他殺可能,並研判是窒息死亡,
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<h3 class="media-heading MyFont">柬埔寨吳哥窟</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示,陳女臉部朝下被壓在一張雙人沙發下,
臉部朝下雙腳及部分頭髮露出沙發外,由於死者衣著整齊,口中被塞入深咖啡色抹布,
被發現時已有屍斑。由於陳女陳屍位置特殊,警方初步推估有他殺可能,並研判是窒息死亡,
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
<div class="media-right">
<img src="images/02.jpg" class="media-object img-thumbnail" width="200" />
</div>
</div>
<div class="media">
<div class="col-md-5">
<div class="media-left media-middle">
<img src="images/03.jpg" class="media-object img-thumbnail" width="200" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">越南下龍灣</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示,陳女臉部朝下被壓在一張雙人沙發下,
臉部朝下雙腳及部分頭髮露出沙發外,由於死者衣著整齊,口中被塞入深咖啡色抹布,
被發現時已有屍斑。由於陳女陳屍位置特殊,警方初步推估有他殺可能,並研判是窒息死亡,
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
</div>
<div class="col-md-7">
<div class="media-body">
<h3 class="media-heading MyFont">埃及金字塔與人面獅身</h3>
<p class="MyFont">
台南市刑大副大隊長林清榮表示,陳女臉部朝下被壓在一張雙人沙發下,
臉部朝下雙腳及部分頭髮露出沙發外,由於死者衣著整齊,口中被塞入深咖啡色抹布,
被發現時已有屍斑。由於陳女陳屍位置特殊,警方初步推估有他殺可能,並研判是窒息死亡,
詳細死因則待檢察官會同法醫相驗確認。
</p>
</div>
<div class="media-right">
<img src="images/04.jpg" class="media-object img-thumbnail" width="200" />
</div>
</div>
</div>
<div class="media">
<div class="col-md-6">
<div class="media-body">
<h3 class="media-heading MyFont">梵帝崗聖彼德大教堂</h3>
<p class="MyFont">
桃園市消防局表示,28日晚間9時26分,敬鵬平鎮3廠發生火警,到場時得知有2名移工受困,且當時1樓僅有濃煙,尚未有火光,2名小隊長各帶1組人員總共7人進入1樓,22時26分時指揮所發現狀況不對,用無線電急喊撤退,但只得到游曜陽回應「收到」,就再也聽不到任何回音。
指揮所研判7人發生意外,隨即整備搜救隊伍進入。
</p>
</div>
<div class="media-left media-middle">
<img src="images/05.jpg" width="250" class="media-object img-thumbnail" />
</div>
</div>
<div class="col-md-6">
<div class="media-body">
<h3 class="media-heading MyFont">台北101</h3>
<p class="MyFont">
桃園市消防局表示,28日晚間9時26分,敬鵬平鎮3廠發生火警,到場時得知有2名移工受困,且當時1樓僅有濃煙,尚未有火光,2名小隊長各帶1組人員總共7人進入1樓,22時26分時指揮所發現狀況不對,用無線電急喊撤退,但只得到游曜陽回應「收到」,就再也聽不到任何回音。
指揮所研判7人發生意外,隨即整備搜救隊伍進入。
</p>
</div>
<div class="media-right media-middle">
<img src="images/06.jpg" width="200" class="media-object img-thumbnail" />
</div>
</div>
</div>
<div class="media">
<div class="media-left media-middle">
<img src="images/07.jpg" width="250" class="media-object img-thumbnail" />
</div>
<div class="media-body">
<h3 class="media-heading MyFont">尼加拉瓜大瀑布</h3>
<p class="MyFont">
桃園市消防局表示,28日晚間9時26分,敬鵬平鎮3廠發生火警,到場時得知有2名移工受困,且當時1樓僅有濃煙,尚未有火光,2名小隊長各帶1組人員總共7人進入1樓,22時26分時指揮所發現狀況不對,用無線電急喊撤退,但只得到游曜陽回應「收到」,就再也聽不到任何回音。
指揮所研判7人發生意外,隨即整備搜救隊伍進入。
</p>
</div>
</div>
<div class="media">
<div class="media-body">
<h3 class="media-heading MyFont">雪梨歌劇院</h3>
<p class="MyFont">
桃園市消防局表示,28日晚間9時26分,敬鵬平鎮3廠發生火警,到場時得知有2名移工受困,且當時1樓僅有濃煙,尚未有火光,2名小隊長各帶1組人員總共7人進入1樓,22時26分時指揮所發現狀況不對,用無線電急喊撤退
</p>
</div>
<div class="media-left media-middle">
<img src="images/08.jpg" width="200" class="media-object img-thumbnail" />
</div>
</div>
</div>
<div id="carouselOne" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselOne" data-slide-to="0" class="active"></li>
<li data-target="#carouselOne" data-slide-to="1"></li>
<li data-target="#carouselOne" data-slide-to="2"></li>
<li data-target="#carouselOne" data-slide-to="3"></li>
<li data-target="#carouselOne" data-slide-to="4"></li>
<li data-target="#carouselOne" data-slide-to="5"></li>
<li data-target="#carouselOne" data-slide-to="6"></li>
<li data-target="#carouselOne" data-slide-to="7"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/11.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/12.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/13.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/14.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/15.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/16.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/17.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
<div class="carousel-item">
<img src="images/18.jpg" class="d-block w-100" />
<div class="carousel-caption d-none d-md-block MyFont">
<h5><strong>瑪雅金字塔遺跡</strong></h5>
<p>瑪雅金字塔遺跡瑪雅金字塔遺跡瑪雅金字塔遺跡</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselOne" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselOne" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script>
$('#carouselOne').carousel({ interval: 2000 });
// $('#LoginModal').modal('show');
</script>
</body>
</html>

帶照片 討論區 可以留言
示範用範本
因為有載入範本連layout都會做出來 bootstrap也會裝上去

class -> model -> DB

UML?
Student .
+SID
+SName
+等於public
以往都會先導入資料庫
現在則是直接編譯model
所以也要先設計一下資料庫的關聯
主留言板 table 1 對 多 留言回復table
Webform是用泛型處理常式存photo檔案(二進位資料)byte[]陣列
等等會講那怎用controller處理

實作的資料庫只有一對多,沒有多對多
Virtual 虛擬 只要繼承這個類別 都可以 override ???
商業邏輯寫在model就可以在編輯controller與view時輕鬆很多
##接著要寫驗證在model裡面
要先using System.ComponentModel
與 using System.ComponentModel.DataAnnotations
只要 寫 XXXID 就會自動變 PK
但是如果要指定呢?
[Key] 只要在上面加上這個即可
[Required] 必填直接加上這個即可
[HiddenInput] 用於讀取不是要填寫的就做隱藏欄位 ( 要using System.Web.Mvc
[DataType(DataType.Date)] 驗證時間是否為當時時間,用於顯示時間但不給編輯
[DisplayFormat(DataFormatString=”{0:yyyy/MM/dd}”)],ApplyFormatInEditMode=true)
格式要求且編輯時直接套用
[DataType(DataType.MultilineText),StringLength(400)] 多行文字方塊最多400字
[MaxLength] 二進位資料最大值
定義越豐富前面可以寫更少
[DisplayName] 顯示字

直接做一個public class名稱字定,但是要繼承於 ValidationAttribute
建構子
Override 覆蓋它原本的方法IsValid
驗證通過傳true否則false
?true:false

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
namespace PhotoSharing.Models
{
//1.1加入Photo Model==> Properties & Annotations & Validation
public class Photo
{
//我是primary key
public int PhotoID { get; set; }
//Annotations & Validation
[Required]
[StringLength(100)]
[DisplayName("主題")]
public string Title { get; set; }
[Required]
[MaxLength]
[DisplayName("上傳照片")]
public byte[] PhotoFile { get; set; }
[HiddenInput(DisplayValue =false)]
public string ImageMimeType { get; set; }
[Required]
[DataType(DataType.MultilineText),StringLength(400)]
[DisplayName("照片描述")]
public string Description { get; set; }
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString ="{0:yyyy/MM/dd}",ApplyFormatInEditMode =true)]
[DisplayName("建立日期")]
public DateTime CratedDate { get; set; }
[Required]
//1.3 在UserName屬性採用自訂驗證擴充 CheckUsername
[DisplayName("發表人名稱")]
[CheckUsername]
public string UserName { get; set; }
//1.2 自訂驗證擴充 CheckUsername Model,繼承ValidationAttribute
public class CheckUsername:ValidationAttribute
{
//1.2.2 在Constructor給ErrorMessage初始值
public CheckUsername()
{
ErrorMessage = "發表人名稱至少2個字";
}
//1.2.1 override IsValid 加入自訂規則
public override bool IsValid(object value)
{
return (value.ToString().Length >= 2) ? true : false;
}
}
}
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
namespace PhotoSharing.Models