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 網頁不用換頁 ( 下一個例子一起講 ???? 局部視圖

Partial views in ASP.NET CoreMicrosoftLearn

把範本一些需要客制化的地方做修改

做一顆查看明細按鈕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>&copy; @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>&copy; @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

🔎 asp.net filter - Google Searchwww.google.com

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

不曉得用法就 …

彈出提示框 (Popovers)getbootstrap

範例

http://mcsdd.tw/mcsdd.tw

###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

輪播 (Carousel)getbootstrap

捲動式

很多功能與樣式需要時最好到官網上查看

更活的話要去看文件最底下做核心設定

###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給大家用?

Components · Bootstrapgetbootstrap.com

四版的沒有預設icons extend 但有提供來源

Iconsgetbootstrap