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

{% embed url="<https://docs.microsoft.com/en-us/aspnet/core/mvc/views/partial?view=aspnetcore-2.2>" %}

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

做一顆查看明細按鈕OrderDeatil

把最後一個OrderDetail功能與頁面完成

看訂單名細

訂單明細當成購物車的方法識別值可以不要有但是亂碼pk一定要可以null

去用訂單編號用linq去查詢訂單明細出來做顯示

新增OrderDetail檢視list Moder OrderDetail

然後把範本客制化即可

其實不用把所有功能都塞在同一個Controller只是要分得清楚

### 做完了 測試&#xD;

登入後 清單入購物車 購物車 入訂單 查看明細

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&#xD;

```
<!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 將最後一欄刪除
```

下一個單元會講

其實客戶直接打網址 雖然會跳出例外錯誤&#x20;

( 查不到session所以報錯

但其實應該轉為index ( 可以寫判斷在layout 或 master

{% embed url="<https://www.google.com/search?q=asp.net+filter&rlz=1C1GCEU_zh-TWTW835TW836&oq=asp.net+filter&aqs=chrome..69i57j0l5.5479j0j4&sourceid=chrome&ie=UTF-8>" %}

Filter.config

Global.asax

以上為MVC單元劇 結束了 接著Part2為連續性的旦有主題

\#響應式RWD Bootstrap Component

### ##Popovers 約克夏布丁? 提示&#xD;

Keyword

Data-placement=”bottom”

Data-container=”body”

Data-toggle=”popover”

要寫jQuery

物件的選擇器要放在\[]

可以用在驗證或勾選提示

檢查是否有勾選

出現bug啥底層事件是click ??

改為使用&#x20;

### ##tooltip 提示&#xD;

Keyword

Data-togget=”tooltip”

Data-placement=”right”

Jq改為寫這個

不管是popover點擊 或 tooltip 滑鼠移過去 就是提示

只是popover變化性比較多? 給 title就會有title

最後發現要配合Jq使用 ( 其實就是 Bootstrap的jq 一定要引入庫不然就沒有

方法.popover

不曉得用法就 …

{% embed url="<https://bootstrap.hexschool.com/docs/4.2/components/popovers/>" %}

範例

{% embed url="<http://mcsdd.tw/>" %}

#### ###ftp\://web\@10.10.3.189/RWD/30Popover\_Tooltip.html&#xD;

```
<!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>

```

![](/files/-LgLFbEaB8RJwwefgjsi)

### ##Jumbotron 標頭&#xD;

#### ###keyword&#xD;

Lead 小title

接著應用排版 三種範例

#### ###ftp\://web\@10.10.3.189/RWD/31Jumbotron.html&#xD;

```
<!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>

```

![](/files/-LgLFsXYEl5B4Wv6Vy04)

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

```

![](/files/-LgLG7dw2MB_bOvB1gOA)

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

```

![](/files/-LgLGKaYGJCIWvMJGESB)

接著一個例子延續下去會講到很多個Component

首先先來改Jumbotron

到核心複製到mystyle

兩種方式 自己做一個 class 然後combine 或 一樣的class名稱加屬性上去

Background屬性

Image > color

Image => 排列方式 repeat

實務上 字型 要直接在下一個class&#x20;

記得引入的位置要比bootstrap的css下面

Container 動 為何字型不動因為字型要下 em

如果圖沒處理過最好下固定 width 這樣頂多圖解析度跑掉 但不會跑版

#### ###重點&#xD;

響應式 - > 網格系統 一個media一個格子

Media內容都可以有自己的class設定

排版上Media可以當成row用

### ##MediaObject ( 有階層性 較複雜 ( 快速排版 ??&#xD;

keyword

Media-heading

Media-body

Media-right&#x20;

Media-middle

搭配張博通

#### ### ftp\://web\@10.10.3.189/RWD/34MediaObject.html&#xD;

```
<!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>

```

![](/files/-LgLGqBHEs-K7owBK-IX)

### ##旋轉木馬?照片輪播 Carousel&#xD;

{% embed url="<https://bootstrap.hexschool.com/docs/4.2/components/carousel/>" %}

捲動式

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

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

#### ###ftp\://web\@10.10.3.189/RWD/35Carousel.html&#xD;

```
<!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>

```

![](/files/-LgLHHWfTc9ti0VEVX2D)

### ##補充觀念 字型 &#xD;

三版有提供快兩百個icon給大家用?

{% embed url="<https://getbootstrap.com/docs/3.4/components/>" %}

![](/files/-LgLHNunpNIIYlpY-nhS)

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

{% embed url="<https://getbootstrap.com/docs/4.3/extend/icons/>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://johch3n611u.gitbook.io/c50108/ju-li-cheng-bei/201905/2019-0529.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.