2019/0529/ASP.NET_MVC購物車訂單功能完成+BootstrapComponents元件介紹
#MVC
##接著完成前日購物車訂單功能
完全一個前台功能 ( 但沒有後台功能
邏輯 訂單欄位改為是然後新增一筆訂單編號
tOrder 點擊後必須要顯示 他自己的商品
首先在ShoppingCar.cshtml底下新增一個form用於填寫
收件人姓名信箱地址如此才能送到controller成立訂單
用simplebind繫結name做傳送
Controller 用 ShoppingCar的多載 post方法即可
參數使用剛剛simplebind繫結的name命名
除了剛剛的地址姓名信箱參數
從session取得會員id即可
現在處理訂單編號(16進位亂碼)問題
使用 Guid物件 可以產生
使用時機 必須要一組PK但意義不重要時使用 ( 有意義EX學號
這邊我們改為以當時時間轉為純號碼(拿掉符號)
拿掉符號的方法為REPLACE (用空字串取代任何符號包括空白)
接著隨機再塞四碼用Random物件
接著建立訂單主檔資料用於存入模型裡面
接著tOrderDetail要做查詢id來把購物車approved的否改為是
異動完後存入庫
//建立訂單主檔資料
tOrder order = new tOrder();
order.fOrderGuid = guid;
order.fUserId = fUserId;
order.fReceiver = fReceiver;
order.fEmail = fEmail;
order.fAddress = fAddress;
order.fDate = DateTime.Now;
db.tOrder.Add(order);
var carList = db.tOrderDetail.Where(m => m.fUserId == fUserId && m.fIsApproved == "否").ToList();
foreach(var item in carList)
{
item.fOrderGuid = guid;
item.fIsApproved = "是";
}
db.SaveChanges();
return View("ShoppingCar", "_LayoutMember", orderDetails);
接著做訂單列表 ( 抓tOrder出來丟到view做顯示
拿上面get來改即可
排序.orderby即可
接著新增訂單Orderlist檢視
範本tOrder
Pashowview 網頁不用換頁 ( 下一個例子一起講 ???? 局部視圖
把範本一些需要客制化的地方做修改
做一顆查看明細按鈕OrderDeatil
把最後一個OrderDetail功能與頁面完成
看訂單名細
訂單明細當成購物車的方法識別值可以不要有但是亂碼pk一定要可以null
去用訂單編號用linq去查詢訂單明細出來做顯示
新增OrderDetail檢視list Moder OrderDetail
然後把範本客制化即可
其實不用把所有功能都塞在同一個Controller只是要分得清楚
做完了 測試
登入後 清單入購物車 購物車 入訂單 查看明細
DBModel
###/08ShoppingCar/Models/tProduct.cs
//------------------------------------------------------------------------------
// <auto-generated>
// 這個程式碼是由範本產生。
//
// 對這個檔案進行手動變更可能導致您的應用程式產生未預期的行為。
// 如果重新產生程式碼，將會覆寫對這個檔案的手動變更。
// </auto-generated>
//------------------------------------------------------------------------------
namespace _08ShoppingCar.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel;
//00-2-2 在tProduct.cs裡加入欄位名稱顯示(需using System.ComponentModel)
public partial class tProduct
{
public int fId { get; set; }
[DisplayName("產品編號")]
public string fPId { get; set; }
[DisplayName("品名")]
public string fName { get; set; }
[DisplayName("單價")]
public Nullable<int> fPrice { get; set; }
[DisplayName("圖示")]
public string fImg { get; set; }
}
}
###/08ShoppingCar/Models/tOrderDetail.cs
//------------------------------------------------------------------------------
// <auto-generated>
// 這個程式碼是由範本產生。
//
// 對這個檔案進行手動變更可能導致您的應用程式產生未預期的行為。
// 如果重新產生程式碼，將會覆寫對這個檔案的手動變更。
// </auto-generated>
//------------------------------------------------------------------------------
namespace _08ShoppingCar.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel;
//00-2-4 在tOrderDetail.cs裡加入欄位名稱顯示(需using System.ComponentModel)
public partial class tOrderDetail
{
public int fId { get; set; }
[DisplayName("訂單編號")]
public string fOrderGuid { get; set; }
[DisplayName("會員帳號")]
public string fUserId { get; set; }
[DisplayName("產品編號")]
public string fPId { get; set; }
[DisplayName("品名")]
public string fName { get; set; }
[DisplayName("單價")]
public Nullable<int> fPrice { get; set; }
[DisplayName("訂購數量")]
public Nullable<int> fQty { get; set; }
[DisplayName("是否為訂單")]
public string fIsApproved { get; set; }
}
}
###/08ShoppingCar/Models/tMember.cs
//------------------------------------------------------------------------------
// <auto-generated>
// 這個程式碼是由範本產生。
//
// 對這個檔案進行手動變更可能導致您的應用程式產生未預期的行為。
// 如果重新產生程式碼，將會覆寫對這個檔案的手動變更。
// </auto-generated>
//------------------------------------------------------------------------------
namespace _08ShoppingCar.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
//00-2-1 在tMember.cs裡加入欄位名稱顯示(需using System.ComponentModel)與欄位驗證(需using System.ComponentModel.DataAnnotations;)
public partial class tMember
{
public int fId { get; set; }
[DisplayName("帳號")]
[Required]
public string fUserId { get; set; }
[DisplayName("密碼")]
[Required]
public string fPwd { get; set; }
[DisplayName("姓名")]
[Required]
public string fName { get; set; }
[DisplayName("信箱")]
[Required]
[EmailAddress]
public string fEmail { get; set; }
}
}
###/08ShoppingCar/Models/tOrder.cs
//------------------------------------------------------------------------------
// <auto-generated>
// 這個程式碼是由範本產生。
//
// 對這個檔案進行手動變更可能導致您的應用程式產生未預期的行為。
// 如果重新產生程式碼，將會覆寫對這個檔案的手動變更。
// </auto-generated>
//------------------------------------------------------------------------------
namespace _08ShoppingCar.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
//00-2-3 在tOrder.cs裡加入欄位名稱顯示(需using System.ComponentModel)與欄位驗證(需using System.ComponentModel.DataAnnotations)
public partial class tOrder
{
public int fId { get; set; }
[DisplayName("訂單編號")]
public string fOrderGuid { get; set; }
[DisplayName("會員帳號")]
public string fUserId { get; set; }
[DisplayName("收件人姓名")]
[Required]
public string fReceiver { get; set; }
[DisplayName("收件人信箱")]
[Required]
public string fEmail { get; set; }
[DisplayName("收件人地址")]
[Required]
public string fAddress { get; set; }
[DisplayName("訂單日期")]
public Nullable<System.DateTime> fDate { get; set; }
}
}
Controller
###/08ShoppingCar/Controllers/HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//01-1-3 using _08ShoppingCar.Models
using _08ShoppingCar.Models;
namespace _08ShoppingCar.Controllers
{
public class HomeController : Controller
{
//01-1-4 使用Entity建立DB物件
dbShoppingCarEntities db = new dbShoppingCarEntities();
//01-2-1 在HomeController裡撰寫Index Action
public ActionResult Index()
{
var products = db.tProduct.ToList();
//若Session["Member"]為空，表示會員未登入
if (Session["Member"] == null)
{
//指定Index.cshtml套用_Layout.cshtml，View使用products模型
return View("Index","_Layout",products);
}
//會員登入狀態,指定Index.cshtml套用_LayoutMember.cshtml，View使用products模型
return View("Index", "_LayoutMember", products);
}
//03-1-1 在HomeController裡分別撰寫Get與Post Login Action
public ActionResult Login()
{
return View();
}
//03-1-1 在HomeController裡分別撰寫Get與Post Login Action
[HttpPost]
public ActionResult Login(string fUserId, string fPwd)
{
var member = db.tMember.Where(m => m.fUserId == fUserId && m.fPwd == fPwd).FirstOrDefault();
if(member==null)
{
ViewBag.Message = "帳號或密碼錯誤!!";
return View();
}
Session["WelCome"] = member.fName + "真正高興地見到你!";
Session["Member"] = member;
return RedirectToAction("Index");
}
//05-1-1 在HomeController裡撰寫Logout Action
public ActionResult Logout()
{
Session.Clear();
return RedirectToAction("Index");
}
//04-1-1 在HomeController裡分別撰寫Get與Post Register Action
public ActionResult Register()
{
return View();
}
//04-1-1 在HomeController裡分別撰寫Get與Post Register Action
[HttpPost]
public ActionResult Register(tMember Member)
{
if (ModelState.IsValid == false)
{
return View();
}
var member = db.tMember.Where(m => m.fUserId == Member.fUserId).FirstOrDefault();
if(member==null)
{
db.tMember.Add(Member);
db.SaveChanges();
return RedirectToAction("Login");
}
ViewBag.Message = "帳號已有人使用!!";
return View();
}
//06-1-1 在HomeController裡撰寫ShoppingCar Action
public ActionResult ShoppingCar()
{
string fUserId = (Session["Member"] as tMember).fUserId;
var orderDetails = db.tOrderDetail.Where(m=>m.fUserId== fUserId && m.fIsApproved=="否").ToList();
return View("ShoppingCar", "_LayoutMember", orderDetails);
}
//06-3-1 在HomeController裡撰寫AddCar Action
public ActionResult AddCar(string fPId)
{
string fUserId = (Session["Member"] as tMember).fUserId;
//如果該商品已放在購物車中,則數量加1,若未在購物車中,則放入後預設數量為1
var currentCar = db.tOrderDetail.Where(m => m.fUserId == fUserId && m.fIsApproved == "否" && m.fPId == fPId).FirstOrDefault();
if(currentCar==null)
{
var product = db.tProduct.Where(m => m.fPId == fPId).FirstOrDefault();
tOrderDetail orderDetail = new tOrderDetail();
orderDetail.fUserId = fUserId;
orderDetail.fPId = fPId;
orderDetail.fQty = 1;
orderDetail.fPrice = product.fPrice;
orderDetail.fName = product.fName;
orderDetail.fIsApproved = "否";
db.tOrderDetail.Add(orderDetail);
}
else
{
currentCar.fQty += 1;
}
db.SaveChanges();
return RedirectToAction("ShoppingCar");
}
//06-3-2 在HomeController裡撰寫DeleteCar Action
public ActionResult DeleteCar(int fId)
{
var orderDetails = db.tOrderDetail.Where(m => m.fId == fId).FirstOrDefault();
db.tOrderDetail.Remove(orderDetails);
db.SaveChanges();
return RedirectToAction("ShoppingCar");
}
//07-1-2 在HomeController裡撰寫Post ShoppingCar Action,將購物車狀態之商品轉成訂單
[HttpPost]
public ActionResult ShoppingCar(string fReceiver, string fEmail, string fAddress)
{
string fUserId = (Session["Member"] as tMember).fUserId;
//string guid = Guid.NewGuid().ToString(); //產生一組隨機十六進位碼
//以目前的日期時間加上隨機4碼數字做為訂單編號
Random r = new Random();
string guid = DateTime.Now.ToString().Replace("/","").Replace(":","").Replace(" ","").Replace("上午","").Replace("下午", "")+r.Next(1000,10000);
//建立訂單主檔資料
tOrder order = new tOrder();
order.fOrderGuid = guid;
order.fUserId = fUserId;
order.fReceiver = fReceiver;
order.fEmail = fEmail;
order.fAddress = fAddress;
order.fDate = DateTime.Now;
db.tOrder.Add(order);
var carList = db.tOrderDetail.Where(m => m.fUserId == fUserId && m.fIsApproved == "否").ToList();
foreach(var item in carList)
{
item.fOrderGuid = guid;
item.fIsApproved = "是";
}
db.SaveChanges();
return RedirectToAction("OrderList");
}
//07-2-1 在HomeController裡撰寫OrderList Action
public ActionResult OrderList()
{
string fUserId = (Session["Member"] as tMember).fUserId;
var orders = db.tOrder.Where(m => m.fUserId == fUserId).OrderByDescending(m=>m.fDate).ToList();
return View("OrderList", "_LayoutMember", orders);
}
public ActionResult OrderDetail(string fOrderGuid)
{
var orderDetails = db.tOrderDetail.Where(m => m.fOrderGuid == fOrderGuid).ToList();
return View("OrderDetail", "_LayoutMember", orderDetails);
}
}
}
View
###/08ShoppingCar/Views/Home/Login.cshtml
@*//03-1-4 撰寫Login View*@
@{
ViewBag.Title = "會員登入";
}
<h2>會員登入</h2>
<form accept-charset="@Url.Action("Login")" method="post">
<div class="form-horizontal">
<hr />
<div class="form-group">
<label for="fUserId" class="control-label col-md-2">帳號</label>
<div class="col-md-10">
<input id="fUserId" name="fUserId" type="text" class="form-control" required />
</div>
</div>
<div class="form-group">
<label for="fPwd" class="control-label col-md-2">密碼</label>
<div class="col-md-10">
<input id="fPwd" name="fPwd" type="password" class="form-control" required />
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-2">
<input id="Submit1" type="submit" value="登入" class="btn btn-default" />
<div class="alert-danger">@ViewBag.Message</div>
</div>
</div>
</div>
</form>
###/08ShoppingCar/Views/Home/Register.cshtml
@model _08ShoppingCar.Models.tMember
@*//04-1-4 修改Register View, 改中文字, 加入@ViewBag.Message, 刪除Back to List*@
@{
ViewBag.Title = "會員註冊";
}
<h2>會員註冊</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.fUserId, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.fUserId, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.fUserId, "", new { @class = "text-danger" })
<span class="text-danger">@ViewBag.Message</span>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.fPwd, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.fPwd, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.fPwd, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.fName, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.fName, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.fName, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.fEmail, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.fEmail, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.fEmail, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="註冊" class="btn btn-default" />
</div>
</div>
</div>
}
###/08ShoppingCar/Views/Home/Index.cshtml
@*//01-2-4 撰寫Index View,讀出資料,並以Bootstrap排版*@
@model IEnumerable<_08ShoppingCar.Models.tProduct>
@{
ViewBag.Title = "產品列表";
}
<div class="row">
@foreach (var item in Model)
{
<div class="col-md-4">
<div class="thumbnail">
<img src="~/images/@item.fImg" />
<div class="caption">
<h2>@item.fName</h2>
<p>單價:@item.fPrice</p>
@if (Session["Member"] == null)
{
<p></p>
}
else
{
@*若Session["Member"]不為null才顯示此按鈕*@
<p><a href="@Url.Action("AddCar")?fPId=@item.fPId" class="btn btn-danger">加入購物車</a></p>
}
</div>
</div>
</div>
}
</div>
###/08ShoppingCar/Views/Home/OrderList.cshtml
@model IEnumerable<_08ShoppingCar.Models.tOrder>
@*//07-3-1 修改英文字為中文*@
@{
ViewBag.Title = "會員訂單列表";
}
<h2>會員訂單列表</h2>
@*//07-3-2 刪除Create連結功能*@
@*<p>
@Html.ActionLink("Create New", "Create")
</p>*@
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.fOrderGuid)
</th>
<th>
@Html.DisplayNameFor(model => model.fUserId)
</th>
<th>
@Html.DisplayNameFor(model => model.fReceiver)
</th>
<th>
@Html.DisplayNameFor(model => model.fEmail)
</th>
<th>
@Html.DisplayNameFor(model => model.fAddress)
</th>
<th>
@Html.DisplayNameFor(model => model.fDate)
</th>
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.fOrderGuid)
</td>
<td>
@Html.DisplayFor(modelItem => item.fUserId)
</td>
<td>
@Html.DisplayFor(modelItem => item.fReceiver)
</td>
<td>
@Html.DisplayFor(modelItem => item.fEmail)
</td>
<td>
@Html.DisplayFor(modelItem => item.fAddress)
</td>
<td>
@Html.DisplayFor(modelItem => item.fDate)
</td>
<td>
@*//07-3-3 修改最後一欄為查看訂單明細功能*@
<a href="@Url.Action("OrderDetail")?fOrderGuid=@item.fOrderGuid" class="btn btn-info">查看明細</a>
@*@Html.ActionLink("Edit", "Edit", new { id=item.fId }) |
@Html.ActionLink("Details", "Details", new { id=item.fId }) |
@Html.ActionLink("Delete", "Delete", new { id=item.fId })*@
</td>
</tr>
}
</table>
###/08ShoppingCar/Views/Home/ShoppingCar.cshtml
@model IEnumerable<_08ShoppingCar.Models.tOrderDetail>
@{
ViewBag.Title = "購物車清單";
}
<h2>購物車清單</h2>
@*<p>
@Html.ActionLink("Create New", "Create")
</p>*@
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.fOrderGuid)
</th>
<th>
@Html.DisplayNameFor(model => model.fUserId)
</th>
<th>
@Html.DisplayNameFor(model => model.fPId)
</th>
<th>
@Html.DisplayNameFor(model => model.fName)
</th>
<th>
@Html.DisplayNameFor(model => model.fPrice)
</th>
<th>
@Html.DisplayNameFor(model => model.fQty)
</th>
@*<th>
@Html.DisplayNameFor(model => model.fIsApproved)
</th>*@
<th></th>
</tr>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.fOrderGuid)
</td>
<td>
@Html.DisplayFor(modelItem => item.fUserId)
</td>
<td>
@Html.DisplayFor(modelItem => item.fPId)
</td>
<td>
@Html.DisplayFor(modelItem => item.fName)
</td>
<td>
@Html.DisplayFor(modelItem => item.fPrice)
</td>
<td>
@Html.DisplayFor(modelItem => item.fQty)
</td>
@*<td>
@Html.DisplayFor(modelItem => item.fIsApproved)
</td>*@
<td>
<a href="@Url.Action("DeleteCar")?fId=@item.fId" class="btn btn-danger">刪除商品</a>
@*@Html.ActionLink("Edit", "Edit", new { id=item.fId }) |
@Html.ActionLink("Details", "Details", new { id=item.fId }) |
@Html.ActionLink("Delete", "Delete", new { id=item.fId })*@
</td>
</tr>
}
</table>
@*//07-1-1 在ShoppingCar View裡加入確認訂單的畫面*@
<form action="@Url.Action("ShoppingCar")" method="post">
<div class="form-horizontal">
<hr />
<div class="form-group">
<label for="fReceiver" class="control-label col-md-2">收件人姓名</label>
<div class="col-md-10">
<input id="fReceiver" name="fReceiver" type="text" class="form-control" required />
</div>
</div>
<div class="form-group">
<label for="fEmail" class="control-label col-md-2">收件人信箱</label>
<div class="col-md-10">
<input id="fEmail" name="fEmail" type="email" class="form-control" required />
</div>
</div>
<div class="form-group">
<label for="fAddress" class="control-label col-md-2">收件人地址</label>
<div class="col-md-10">
<input id="fAddress" name="fAddress" type="tel" class="form-control" required />
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-md-offset-2">
<input id="Submit1" type="submit" value="確認訂購" class="btn btn-default" />
</div>
</div>
</div>
</form>
Layout
###/08ShoppingCar/Views/Shared/_LayoutMember.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - 高屏澎東分署購物商城</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
@*//02-2-4 修改_LayoutMember.cshtml nav class內容*@
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@*//02-2-5 修改Brand*@
@Html.ActionLink("線上購物車-會員專區", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
@*@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })*@
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
@*//02-2-6 修改_LayoutMember.cshtml選單內容*@
<li>@Html.ActionLink("產品列表", "Index", "Home")</li>
<li>@Html.ActionLink("購物車", "ShoppingCar", "Home")</li>
<li>@Html.ActionLink("訂單", "OrderList", "Home")</li>
<li>@Html.ActionLink("登出系統", "Logout", "Home")</li>
<li><a href="#">@Session["WelCome"]</a></li>
</ul>
<form class="form-inline" action="https://www.google.com/search" method="get">
<div class="navbar-form">
<input id="Text1" type="text" name="q" placeholder="Please Input Something..." />
<input id="Submit1" type="submit" value="Search" class="btn btn-success" />
</div>
</form>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - 高屏澎東分署購物商城</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
###/08ShoppingCar/Views/Shared/_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@*//02-1-2 更改標頭與頁尾*@
<title>@ViewBag.Title - 高屏澎東分署購物商城</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
@*//02-1-3 修改Brand*@
@Html.ActionLink("線上購物車", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
@*@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })*@
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
@*//02-1-4 加入選單*@
<li>@Html.ActionLink("產品列表", "Index", "Home")</li>
<li>@Html.ActionLink("註冊會員", "Register", "Home")</li>
<li>@Html.ActionLink("登入系統", "Login", "Home")</li>
</ul>
<form class="form-inline" action="https://www.google.com/search" method="get">
<div class="navbar-form">
<input id="Text1" type="text" name="q" placeholder="Please Input Something..." />
<input id="Submit1" type="submit" value="Search" class="btn btn-success" />
</div>
</form>
</div>
</div>
</div>
<div class="container body-content">
@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year - 高屏澎東分署購物商城</p>
</footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>
###老師步驟
//00-1 利用Entity Framework建立Model(DB First)
//00-1-1 建立dbShoppingCar.mdb資料庫Model
// 在Models上按右鍵,選擇加入,新增項目,資料,ADO.NET實體資料模型,名稱輸入"dbShoppingCarModel",按新增
// 來自資料庫的EF Designer
// 連接dbShoppingCar.mdf資料庫,連線名稱不修改,按下一步按鈕
// 選擇Entity Framework 6.x, 按下一步按鈕
// 資料表全選, 按完成鈕
// 若跳出詢問方法按確定鈕
//00-1-2 在專案上按右鍵,建置
//00-2 修改Model
//00-2-1 在tMember.cs裡加入欄位名稱顯示(需using System.ComponentModel)與欄位驗證(需using System.ComponentModel.DataAnnotations)
//00-2-2 在tProduct.cs裡加入欄位名稱顯示(需using System.ComponentModel)
//00-2-3 在tOrder.cs裡加入欄位名稱顯示(需using System.ComponentModel)與欄位驗證(需using System.ComponentModel.DataAnnotations)
//00-2-4 在tOrderDetail.cs裡加入欄位名稱顯示(需using System.ComponentModel)
//01-1 建立HomeController
//01-1-1 在Controllers資料夾上按右鍵,加入,控制器,選擇 MVC5Controller-Empty
//01-1-2 指定控制器名稱為HomeController,並開啟HomeController
//01-1-3 using _08ShoppingCar.Models
//01-1-4 使用Entity建立DB物件
//01-2 製作Index頁面的顯示所有產品功能
//01-2-1 在HomeController裡撰寫Index Action
//01-2-2 在public ActionResult Index()上按右鍵,新增檢視,建立Index View
//01-2-3 進行下列設定:
// View name:Index
// Template:Empty(Without Model)
// 勾選Use a layout pages
// 按下Add
//01-2-4 撰寫Index View,讀出資料,並以Bootstrap排版
//02-1 修改Layout
//02-1-1 修改Views/Shared/_Layout.cshtml
//02-1-2 更改標頭與頁尾
//02-1-3 修改Brand
//02-1-4 加入選單
//02-2 建立Layout
//02-2-1 在View/Shared上按右鍵,新增檢視
//02-2-2 進行下列設定:
// View name:_LayoutMember.cshtml
// Template:Empty(Without Model)
// 不勾選Use a layout pages
// 按下Add
//02-2-3 將_Layout.cshtml內容複製至_LayoutMember.cshtml
//02-2-4 修改_LayoutMember.cshtml nav class內容
//02-2-5 修改Brand
//02-2-6 修改_LayoutMember.cshtml選單內容
//03-1 撰寫登入功能
//03-1-1 在HomeController裡分別撰寫Get與Post Login Action
//03-1-2 在public ActionResult Login()上按右鍵,新增檢視,建立Login View
//03-1-3 進行下列設定:
// View name:Login
// Template:Empty(Without Model)
// 勾選Use a layout pages
// 按下Add
//03-1-4 撰寫Login View
//04-1 撰寫會員註冊功能
//04-1-1 在HomeController裡分別撰寫Get與Post Register Action
//04-1-2 在public ActionResult Register()上按右鍵,新增檢視,建立Register View
//04-1-3 進行下列設定:
// View name:Register
// Template:Create
// Model class:tMember(_08ShoppingCar.Models)
// Data context class:dbShoppingCarEntities(_08ShoppingCar.Models)
// 勾選Use a layout pages
// 按下Add
//04-1-4 修改Register View, 改中文字, 加入@ViewBag.Message, 刪除Back to List
//05-1 撰寫會員登出功能
//05-1-1 在HomeController裡撰寫Logout Action
//06-1 撰寫購物車功能
//06-1-1 在HomeController裡撰寫ShoppingCar Action
//06-1-2 在public ActionResult ShoppingCar()上按右鍵,新增檢視,建立ShoppingCar View
//06-1-3 進行下列設定:
// View name:ShoppingCar
// Template:List
// Model class:tOrderDetail(_08ShoppingCar.Models)
// Data context class:dbShoppingCarEntities(_08ShoppingCar.Models)
// 勾選Use a layout pages
// 按下Add
//06-2 修改ShoppingCar View
//06-2-1 修改英文字為中文
//06-2-2 刪除Create連結功能
//06-2-3 修改最後一欄為刪除所選商品功能
//06-3 撰寫加入商品至購物車與從購物車刪除商品功能
//06-3-1 在HomeController裡撰寫AddCar Action
//06-3-2 在HomeController裡撰寫DeleteCar Action
//07-1 建立加入訂單功能
//07-1-1 在ShoppingCar View裡加入確認訂單的畫面
//07-1-2 在HomeController裡撰寫Post ShoppingCar Action,將購物車狀態之商品轉成訂單
//07-2 建立訂單列表功能
//07-2-1 在HomeController裡撰寫OrderList Action
//07-2-2 在public ActionResult OrderList()上按右鍵,新增檢視,建立OrderList View
//07-2-3 進行下列設定:
// View name:OrderList
// Template:List
// Model class:tOrder(_08ShoppingCar.Models)
// Data context class:dbShoppingCarEntities(_08ShoppingCar.Models)
// 勾選Use a layout pages
// 按下Add
//07-3 修改OrderList View
//07-3-1 修改英文字為中文
//07-3-2 刪除Create連結功能
//07-3-3 修改最後一欄為查看訂單明細功能
//07-4 建立查看訂單明細功能
//07-4-1 在HomeController裡撰寫OrderDetail Action
//07-4-2 在public ActionResult OrderDetail()上按右鍵,新增檢視,建立OrderDetail View
//07-4-3 進行下列設定:
// View name:OrderDetail
// Template:List
// Model class:tOrderDetail(_08ShoppingCar.Models)
// Data context class:dbShoppingCarEntities(_08ShoppingCar.Models)
// 勾選Use a layout pages
// 按下Add
//07-5 修改OrderDetail View
//07-5-1 修改英文字為中文
//07-5-2 刪除Create連結功能
//07-5-3 將最後一欄刪除下一個單元會講
其實客戶直接打網址 雖然會跳出例外錯誤
( 查不到session所以報錯
但其實應該轉為index ( 可以寫判斷在layout 或 master
Filter.config
Global.asax
以上為MVC單元劇 結束了 接著Part2為連續性的旦有主題
#響應式RWD Bootstrap Component
##Popovers 約克夏布丁? 提示
Keyword
Data-placement=”bottom”
Data-container=”body”
Data-toggle=”popover”
要寫jQuery
物件的選擇器要放在[]
可以用在驗證或勾選提示
檢查是否有勾選
出現bug啥底層事件是click ??
改為使用
##tooltip 提示
Keyword
Data-togget=”tooltip”
Data-placement=”right”
Jq改為寫這個
不管是popover點擊 或 tooltip 滑鼠移過去 就是提示
只是popover變化性比較多? 給 title就會有title
最後發現要配合Jq使用 ( 其實就是 Bootstrap的jq 一定要引入庫不然就沒有
方法.popover
不曉得用法就 …
範例
###ftp://web@10.10.3.189/RWD/30Popover_Tooltip.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>
<div class="container">
<form>
<div class="container">
<div class="form-group">
<label for="email">Email:</label>
<input id="email" type="text" class="form-control" placeholder="Enter email..." />
<small class="form-text text-muted">忘記帳號</small>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input id="pwd" type="password" class="form-control" placeholder="Password" />
</div>
<div class="form-group form-check">
<input id="remember" type="checkbox" class="form-check-input" title="必須勾選" data-toggle="tooltip" data-placement="top" />
<label for="remember">我同意</label>
</div>
<!--<input id="Submit1" type="submit" value="submit" class="btn btn-secondary" />-->
<input id="Submit1" type="button" value="submit" class="btn btn-secondary" />
</div>
</form>
<hr /><hr /><hr /><hr /><hr /><hr /><hr />
<button type="button" class="btn btn-secondary" data-toggle="popover" title="Popover展示" data-placement="bottom" data-content="這是一個Popover" data-container="body">
Popover
</button>
<img src="Desert.jpg" title="這是沙漠" alt="這是沙漠" data-toggle="tooltip" data-placement="right" />
</div>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script>
$('#Submit1').click(function () {
console.log($('#remember').is(':checked'));
if (!$('#remember').is(':checked'))
$('#remember').tooltip('show');
});
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
</script>
</body>
</html>
##Jumbotron 標頭
###keyword
Lead 小title
接著應用排版 三種範例
###ftp://web@10.10.3.189/RWD/31Jumbotron.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>
<div class="container">
<div class="jumbotron">
<h1><strong>Bootstrap 4</strong></h1>
<p class="lead">This is a framework for RWD</p>
<hr />
<input id="Button1" type="button" value="Learn more..." class="btn btn-primary" />
</div>
<div class="row">
<div class="col-2 col-md-4 col-sm-6">
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
</div>
<div class="col-7 col-md-4 col-sm-6">
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
</div>
<div class="col-3 col-md-4">
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
</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>
###ftp://web@10.10.3.189/RWD/31Jumbotron-2.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>
<div class="jumbotron">
<div class="container">
<h1><strong>Bootstrap 4</strong></h1>
<p class="lead">This is a framework for RWD</p>
<hr />
<input id="Button1" type="button" value="Learn more..." class="btn btn-primary" />
</div>
</div>
<div class="container">
<div class="row">
<div class="col-2 col-md-4 col-sm-6">
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
</div>
<div class="col-7 col-md-4 col-sm-6">
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
</div>
<div class="col-3 col-md-4">
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
</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>
###ftp://web@10.10.3.189/RWD/31Jumbotron-3.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>
<div class="jumbotron">
<h1><strong>Bootstrap 4</strong></h1>
<p class="lead">This is a framework for RWD</p>
<hr />
<input id="Button1" type="button" value="Learn more..." class="btn btn-primary" />
</div>
<div class="container">
<div class="row">
<div class="col-2 col-md-4 col-sm-6">
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
</div>
<div class="col-7 col-md-4 col-sm-6">
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
</div>
<div class="col-3 col-md-4">
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
台灣高等法院審理「W飯店女子命案」，今天做出更一審判決，認為朱家龍等人轉讓藥品與女子死亡無相當因果關係，依藥事法轉讓偽藥或禁藥罪，改判朱2年10月徒刑。
土豪哥朱家龍（前左）被控「W飯店女模案件」。（中央社／資料照）
更多
「土豪哥」朱家龍被控於民國105年12月2日訂房入住W Hotel，邀約友人洪聖晏、蔡逸學舉辦毒品派對，另邀郭姓被害女子等人參加，並提供大批毒軟糖、毒梅片同歡，導致郭女於12月7日因用毒過量身亡。
朱家龍4月初在高院更一審就W飯店命案庭做無罪答辯，強調對死者死亡結果感到抱歉，他遭押2年多，請求法官讓他交保回家向父母懺悔。他在庭上指出，對自己之前吸毒玩樂感到後悔，也對死者死亡結果感到遺憾及抱歉，已和死者家屬達成和解，法律上他應負的責任不會逃避，但他已遭押2年多，也2年多沒看到父母，希望法官能讓他交保，讓他回家向父母認錯及懺悔，他會記取這次教訓，不會再發生憾事。
朱家龍律師表示，朱家龍已和郭女家屬達成和解，和解金也已全數匯款賠償完畢，但並未透露金額。
蔡逸學及洪聖晏也做無罪答辯；洪聖晏表示，已與死者家屬和解，他會盡力去彌補及贖罪，過兩天就是清明節，之前奶奶過世，他都沒去上香，希望法官讓他具保停押。
一、二審依藥事法轉讓偽藥致人於死罪判朱家龍10年徒刑；蔡逸學、洪聖晏各被判刑10年、10年6月。最高法院將朱家龍、蔡逸學、洪聖晏所涉部分發回高院更審，高院更一審今天宣判。
</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>
接著一個例子延續下去會講到很多個Component
首先先來改Jumbotron
到核心複製到mystyle
兩種方式 自己做一個 class 然後combine 或 一樣的class名稱加屬性上去
Background屬性
Image > color
Image => 排列方式 repeat
實務上 字型 要直接在下一個class
記得引入的位置要比bootstrap的css下面
Container 動 為何字型不動因為字型要下 em
如果圖沒處理過最好下固定 width 這樣頂多圖解析度跑掉 但不會跑版
###重點
響應式 - > 網格系統 一個media一個格子
Media內容都可以有自己的class設定
排版上Media可以當成row用
##MediaObject ( 有階層性 較複雜 ( 快速排版 ??
keyword
Media-heading
Media-body
Media-right
Media-middle
搭配張博通
### ftp://web@10.10.3.189/RWD/34MediaObject.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>
<div class="container">
<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>
</div>
<script src="Scripts/jquery-3.0.0.min.js"></script>
<script src="Scripts/bootstrap.bundle.min.js"></script>
<script>
</script>
</body>
</html>
##旋轉木馬?照片輪播 Carousel
捲動式
很多功能與樣式需要時最好到官網上查看
更活的話要去看文件最底下做核心設定
###ftp://web@10.10.3.189/RWD/35Carousel.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>
<div class="container">
<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>
<div class="carousel-item">
<img src="images/13.jpg" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="images/14.jpg" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="images/15.jpg" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="images/16.jpg" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="images/17.jpg" class="d-block w-100" />
</div>
<div class="carousel-item">
<img src="images/18.jpg" class="d-block w-100" />
</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>
##補充觀念 字型
三版有提供快兩百個icon給大家用?
四版的沒有預設icons extend 但有提供來源
Last updated
Was this helpful?
