2019/0426/Asp.Net_MVC增刪修實作(補修)&bootstrap – gridsystem– 網格系統&第六次專題報告&全國技能競賽網頁設計

Asp.Net_MVC 增刪修實作(補修)

接續上一次的增刪修裡面的修

管理系統通常就是增刪修

刪除之前只是做簡單的前端提醒刪除確定

也可以像是新增確定頁面一樣做一個刪除確定頁面confirm(確定)

可以去比較web form寫法跟MVC寫法

以下先寫編輯

要寫一個功能一定有一個控制器與動作不一定有視圖(顯示

多載同樣方法動作名稱但不同參數

首先編輯

先有轉換表單視圖(顯示動作

(且要把產品編號值傳進編輯確定表單(用url傳值

再藉由新增確定表單接產品編號值傳進視圖做顯示

在右鍵動作名稱用精靈新增視圖(到時會講手刻

此時編譯dll檔案 (是因為View裡面是Razor如果要顯示一定要編譯

經過編修動態連結執行(瀏覽器檢視)

然後title是放在_layout

因為標題是動態的跟隨頁面變動動的所以特別有一頁來整理title

此時的視圖layout程式碼

<!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>
    <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>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

此時來修改視圖form抓產品編號值利用@URLhelper? ( 最上面 model …

裡面利用了很多Razor (html混後端語言)還有helper

ASP.NET Razor - 标记www.w3school.com.cn

🔎 asp helper 是什麼 - Google Searchwww.google.com

裡面編修一些範本以外的功能

像是說如果編輯者沒有上傳編輯圖片必須顯示原圖片

或是將@helper form 接值改為html方式接值

現階段的

控制器Edit動作程式碼

public ActionResult Edit(string fId)
        {
            var product = db.tProduct.Where(m => m.fId == fId).FirstOrDefault();

            return View(product);
        }

現階段的Edit視圖程式碼

@model MVC2.Models.tProduct

@{
    ViewBag.Title = "產品編輯";
}

<h2>產品編輯</h2>

@*@using (Html.BeginForm())
{*@
<form method="post" action="@Url.Action("Edit")" enctype="multipart/form-data">
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @*<h4>tProduct</h4>
            <hr />*@
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.fId)
        
        <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.fPrice, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.fPrice, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.fPrice, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.fImg, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.EditorFor(model => model.fImg, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.fImg, "", new { @class = "text-danger" })*@
                <img src="~/images/@Model.fImg" />
                <input id="oldImg" name="oldImg" type="hidden" value="@Model.fImg" />
                <input id="fImg" name="fImg" type="file" class="form-control" />
            </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>
    @*}*@
</form>
<div>
    @Html.ActionLink("返回產品列表", "Index")
</div>

接著在新增httppost回傳資料庫儲存動作

且是多載同動作名旦不同參數的動作

視圖內的htmltagname取名跟控制器內動作的參數name相同時

就會產生簡單繫結讓參數有辦法傳至控制器的動作內使用

此時編修控制器edit回傳資料庫動作

鑄造物件與變數並用方法操控物件與變數

邏輯:

如果有新增檔案上傳新增檔案沒有的話傳回原來的檔案

且要注意資料庫內的檔名與伺服器內檔案位置的差別

執行錯誤必須要從index去瀏覽如果直接從edit會因為沒參數報錯

此時的edit控制器程式碼

public ActionResult Edit(string fId)
        {
            var product = db.tProduct.Where(m => m.fId == fId).FirstOrDefault();

            return View(product);
        }


        [HttpPost]
        public ActionResult Edit(string fId, string fName, decimal fPrice, HttpPostedFileBase fImg,string oldImg)
        {
            try
            {
                string fileName = "";

                if (fImg != null)
                {

                    if (fImg.ContentLength > 0)
                    {
                        fileName = Path.GetFileName(fImg.FileName);
                        fImg.SaveAs(Server.MapPath("~/images/" + fileName));
                    }
                }
                else
                {
                    fileName = oldImg;
                }


                //tProduct product = new tProduct();
                var product = db.tProduct.Where(m => m.fId == fId).FirstOrDefault();
                product.fId = fId;
                product.fName = fName;
                product.fPrice = fPrice;
                product.fImg = fileName;

                db.SaveChanges();

                return RedirectToAction("Index");
            }
            catch (Exception ex)
            {
                ViewBag.Error = ex.Message;
            }
            return View();
        }

此時的edit視圖程式碼

@model MVC2.Models.tProduct

@{
    ViewBag.Title = "產品編輯";
}

<h2>產品編輯</h2>

@*@using (Html.BeginForm())
{*@
<form method="post" action="@Url.Action("Edit")" enctype="multipart/form-data">
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @*<h4>tProduct</h4>
            <hr />*@
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.fId)
        
        <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.fPrice, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.fPrice, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.fPrice, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.fImg, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*@Html.EditorFor(model => model.fImg, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.fImg, "", new { @class = "text-danger" })*@
                <img src="~/images/@Model.fImg" />
                <input id="oldImg" name="oldImg" type="hidden" value="@Model.fImg" />
                <input id="fImg" name="fImg" type="file" class="form-control" />
            </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>
    @*}*@
</form>
<div>
    @Html.ActionLink("返回產品列表", "Index")
</div>

所以要有兩個Action

Action name 可以自己取

為什麼編譯會快因為第一次執行時都必須要編譯但做完鏈結後就會很快

而直譯則是每次每行逐一翻譯

[HttpPost]方法類似webform的postback

Enable JavaScript to use searchwww.google.com

关于HttpPost与HttpGet访问Action的顺序_post方式中action能用get方式使用吗-CSDN博客blog.csdn.net

Routing to controller actions in ASP.NET CoreMicrosoftLearn

最後有一個控制器六個動作三個視圖一個布局一個模型

步驟

//00-1 利用Entity Framework建立Model(DB First)

//00-1-1 建立dbProduct.mdb資料庫Model

// 在Models上按右鍵,選擇加入,新增項目,資料,ADO.NET實體資料模型,名稱輸入"dbProductModel",按新增

// 來自資料庫的EF Designer

// 連接dbProduct.mdf資料庫,連線名稱不修改,按下一步按鈕

// 選擇Entity Framework 6.x, 按下一步按鈕

// 資料表勾選"tProuct", 按完成鈕

// 若跳出詢問方法按確定鈕

//00-1-2 在專案上按右鍵,建置

//00-1-3 在tProduct.cs裡加入欄位名稱顯示(需using System.ComponentModel)

//00-1-4 在Controllers資料夾上按右鍵,加入,控制器,選擇 MVC5Controller-Empty

//00-1-5 指定控制器名稱為HomeController,並開啟HomeController

//00-1-6 using _MVC2.Models

//00-1-7 使用Entity建立DB物件

//00-2 製作Index頁面的顯示所有產品功能

//00-2-1 在HomeController裡撰寫Index的Action

//00-2-2 在public ActionResult Index()上按右鍵,新增檢視,建立Index View

//00-2-3 進行下列設定:

// View name:Index

// Template:List

// Model class:tProduct(MVC2.Models)

// Data context class:dbProductEntities(MVC2.Models)

// 勾選Use a layout pages

// 按下Add

//00-2-4 修改 _Layout.cshtml

//00-2-5 修改Index View,英文文字為中文

//00-2-6 修改圖片顯示處

//00-2-7 修改功能連結處 (id=>fId)

//00-3 製作刪除功能

//00-3-1 在HomeController裡撰寫Delete的Action

//00-4 製作Create頁面及新增產品功能

//00-4-1 在HomeController裡撰寫GET及POST的Create Action

//00-4-2 在public ActionResult Create()上按右鍵,新增檢視,建立Create View

//00-4-3 進行下列設定:

// View name:Create

// Template:Create

// Model class:tProduct(MVC2.Models)

// Data context class:dbProductEntities(MVC2.Models)

// 勾選Use a layout pages

// 按下Add

//00-4-4 修改Index View,英文文字為中文

//00-4-5 修改form的HTML Helper為一般的from

//00-4-6 修改圖片上傳處表單

//00-4-7 加入例外訊息顯示處

控制器程式碼

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//00-1-6 using _MVC2.Models
using MVC2.Models;
using System.IO;

namespace MVC2.Controllers
{
    public class HomeController : Controller
    {
        //00-1-7 使用Entity建立DB物件
        dbProductEntities db = new dbProductEntities();

        // GET: Home
        //00-2-1 在HomeController裡撰寫Index的Action
        public ActionResult Index()
        {
            var product = db.tProduct.ToList();
            return View(product);
        }

        //00-3-1 在HomeController裡撰寫Delete的Action
        public ActionResult Delete(string fId)
        {
            //依網址傳來的fId編號取得要刪除的產品記錄
            var product = db.tProduct.Where(m => m.fId == fId).FirstOrDefault();
            string fileName = product.fImg;//取得要刪除產品的圖檔
            System.IO.File.Delete(Server.MapPath("~/images/"+fileName));//刪除指定圖檔
            db.tProduct.Remove(product);//依編號刪除產品記錄
            db.SaveChanges();//回存結果

            //return View();
            return RedirectToAction("Index");
        }

        //00-4-1 在HomeController裡撰寫GET及POST的Create Action
        public ActionResult Create()
        {
          
            return View();
        }

        [HttpPost]
        public ActionResult Create(string fId, string fName, decimal fPrice, HttpPostedFileBase fImg)
        {
            try
            {
                string fileName = "";

                if (fImg.ContentLength > 0)
                {
                    fileName = Path.GetFileName(fImg.FileName);
                    fImg.SaveAs(Server.MapPath("~/images/" + fileName));
                }

                tProduct product = new tProduct();
                product.fId = fId;
                product.fName = fName;
                product.fPrice = fPrice;
                product.fImg = fileName;

                db.tProduct.Add(product);
                db.SaveChanges();

                return RedirectToAction("Index");
            }
            catch(Exception ex)
            {
                ViewBag.Error = ex.Message;
            }
            return View();
        }


        public ActionResult Edit(string fId)
        {
            var product = db.tProduct.Where(m => m.fId == fId).FirstOrDefault();

            return View(product);
        }


        [HttpPost]
        public ActionResult Edit(string fId, string fName, decimal fPrice, HttpPostedFileBase fImg,string oldImg)
        {
            try
            {
                string fileName = "";

                if (fImg != null)
                {

                    if (fImg.ContentLength > 0)
                    {
                        fileName = Path.GetFileName(fImg.FileName);
                        fImg.SaveAs(Server.MapPath("~/images/" + fileName));
                    }
                }
                else
                {
                    fileName = oldImg;
                }


                //tProduct product = new tProduct();
                var product = db.tProduct.Where(m => m.fId == fId).FirstOrDefault();
                product.fId = fId;
                product.fName = fName;
                product.fPrice = fPrice;
                product.fImg = fileName;

                db.SaveChanges();

                return RedirectToAction("Index");
            }
            catch (Exception ex)
            {
                ViewBag.Error = ex.Message;
            }
            return View();
        }

    }
}

視圖index程式碼

@model IEnumerable<MVC2.Models.tProduct>

@*//00-2-5 修改Index View,英文文字為中文*@
@{
    ViewBag.Title = "產品列表";
}

<h2>產品列表</h2>

<p>
    @Html.ActionLink("新增產品", "Create")
</p>
<table class="table">
    <tr>
        <th>
            產品編號
        </th>
        <th>
            @Html.DisplayNameFor(model => model.fName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.fPrice)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.fImg)
        </th>
        <th>
            項目管理
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.fId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.fName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.fPrice)
            </td>
            <td>
                @*//00-2-6 修改圖片顯示處,處理沒有圖片的產品*@
                <img src="~/images/@item.fImg" width="130" />

            </td>
            <td>
                @*//00-2-7 修改功能連結處 (id=>fId) *@
                @Html.ActionLink("編輯", "Edit", new { fId = item.fId }) |
                @*@Html.ActionLink("Details", "Details", new { id = item.fId }) |*@
                @Html.ActionLink("刪除", "Delete", new { fId = item.fId }, new { OnClick = "return confirm('確定刪除？')" })
            </td>
        </tr>
    }

</table>

視圖creat程式碼

@model MVC2.Models.tProduct

@*//00-4-4 修改Create View,英文文字為中文*@
@{
    ViewBag.Title = "產品新增";
}

<h2>新增產品</h2>

<form method="post" enctype="multipart/form-data" action="@Url.Action("Create")">
    @*@using (Html.BeginForm())
        {*@
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @*把這個標題註解掉*@
        @*<h4>tProduct</h4>
        <hr />*@
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        <div class="form-group">
            @Html.LabelFor(model => model.fId, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.fId, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.fId, "", 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.fPrice, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.fPrice, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.fPrice, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.fImg, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*//00-4-6 修改圖片上傳處表單*@
                @*@Html.EditorFor(model => model.fImg, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.fImg, "", new { @class = "text-danger" })*@
                <input id="fImg" name="fImg" type="file" class="form-control" />

            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="新增產品" class="btn btn-default" />
                @*//00-4-7 加入例外訊息顯示處*@
                @ViewBag.Error
            </div>
        </div>
    </div>
    @*}*@
</form>
<div>
    @Html.ActionLink("返回產品列表", "Index")
</div>

視圖edit程式碼

@model MVC2.Models.tProduct

@*//00-5-4 修改Edit View,英文文字為中文*@
@{
    ViewBag.Title = "產品編輯";
}

<h2>產品編輯</h2>

@*//00-5-5 修改form的HTML Helper為一般的from*@
@*@using (Html.BeginForm())
    {*@
<form method="post" action="@Url.Action("Edit")" enctype="multipart/form-data">
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        @*<h4>tProduct</h4>
            <hr />*@
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.fId)

        <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.fPrice, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.fPrice, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.fPrice, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.fImg, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @*//00-5-6 修改圖片上傳處表單*@
                @*@Html.EditorFor(model => model.fImg, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.fImg, "", new { @class = "text-danger" })*@
                <img src="~/images/@Model.fImg" />
                <input id="oldImg" name="oldImg" type="hidden" value="@Model.fImg" />
                <input id="fImg" name="fImg" type="file" class="form-control" />
            </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>
    @*}*@
</form>
<div>
    @Html.ActionLink("返回產品列表", "Index")
</div>

布局程式碼

<!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>
    <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>
                @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                </ul>
            </div>
        </div>
    </div>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
        </footer>
    </div>

    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
</body>
</html>

模型程式碼

//------------------------------------------------------------------------------
// <auto-generated>
//     這個程式碼是由範本產生。
//
//     對這個檔案進行手動變更可能導致您的應用程式產生未預期的行為。
//     如果重新產生程式碼，將會覆寫對這個檔案的手動變更。
// </auto-generated>
//------------------------------------------------------------------------------

namespace MVC2.Models
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;

    public partial class tProduct
    {
        [DisplayName("產品編號")]
        public string fId { get; set; }
        [DisplayName("產品名稱")]
        public string fName { get; set; }
        [DisplayName("單價")]
        public Nullable<decimal> fPrice { get; set; }
        [DisplayName("圖示")]
        public string fImg { get; set; }
    }
}

總結

不一定每次都1-7會是動到哪裡就執行哪裡

畫面可以跟商業邏輯分離

設計跟程式會分離

到這告段落

到時先物件導向技術然後再MVC一個個單元講

bootstrap – gridsystem– 網格系統

Flatbox 平面盒子?? Flexbox 彈性盒子

接續上次是分成四個解析度斷點

12個網格

Combine寫法:一種以上的classname用空格分隔

優先權一樣 (要看bs.css裡面誰寫上誰寫下

1920 xl 解析度都在講寬不講高

網格系統中網頁其實就是一列一列一行一行的flatbox 彈性盒子flexbox??

所以易於排版

RWD程式碼

<!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" />

        
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="text-center">
                <h1 class="text-center">My Website</h1>
            </div>
        </div>


        <div class="row">
            <div class="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 class="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 class="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.min.js"></script>
</body>
</html>

forDesktop <md以上>

如果容器與瀏覽器同寬

可以用container-flort

桌機跟行動裝置的斷點通常用md 中間值

大於md用一個

小於md堆疊起來

字不會併再一起?

Border畫div邊是contend跟bord的pading距離

了解原理就有辦法更改核心

像是文字就有對齊方式 helper 輔助類別??

程式碼

<!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" />

        
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="text-center">
                <h1 class="text-center">My Website</h1>
            </div>
        </div>


        <div class="row">
            <div class="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 class="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 class="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.min.js"></script>
</body>
</html>

forPad <md-sm>

程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title></title>

    <link href="Content/bootstrap.min.css" rel="stylesheet" />

        
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="text-center">
                <h1 class="text-center">My Website</h1>
            </div>
        </div>


        <div class="row">
            <div class="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-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-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.min.js"></script>
</body>
</html>

forPhone <比sm小不用寫斷點直接寫格數>

3版Row會自成row四版必須要上col ??所以後來直接刪掉標題的row

4版的Gridsystem用到css3的flexbox

Enable JavaScript to use searchwww.google.com

程式碼

<!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" />

        
</head>
<body>
    <div class="container">
  
            <div class="textcenter">
                <h1 class="text-center">My Website</h1>
            </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.min.js"></script>
</body>
</html>

gridsystemalign 四版才有三沒有

Div是根據內容寬度高度所改變但是會繼承父輩

關係到col的垂直對齊方式align

純CSS對齊比較複雜

CSS 布局 – 水平 & 垂直对齐 | 菜鸟教程www.runoob.com

以下為BS4各種對齊效果

易於方便排版

4 4 4 三等份其實不是真的全滿只會每個都 33.3333….%

再BS4裡面要用no-gutters 沒有間隙

以上都可以有解析度斷點非常易於排版

且操控方式更豐富Order 排列方式 0-12 越大越優先排

為了響應式(大螢幕排序是那樣(小螢幕是這樣

甚至是Gridsystem巢狀?row裡面有row?

Enable JavaScript to use searchwww.google.com

https://ithelp.ithome.com.tw/articles/10196050ithelp.ithome.com.tw

程式碼

<!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" />
    <style>
        .col1{
            background-color:aqua;
        }

        .col2 {
            background-color: #ffd800;
        }
        .col3 {
            background-color: #b6ff00;
        }
        .col5 {
            background-color: #0094ff;
        }

        .col6 {
            background-color: #ff00dc;
        }
        .col7 {
            background-color: #808080;
        }

        .row{
            height:200px; 
            background-color:#bfbfbf;
            border:1px solid;
        }
        .row div {
            height: 40px;
            
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="row align-items-center">
            <div class="col1 col-md-4">Col 1</div>
            <div class="col2 col-md-4">Col 2</div>
            <div class="col3 col-md-4">Col 3</div>
        </div>

        <div class="row align-items-end">
            <div class="col1 col-md-4">Col 1</div>
            <div class="col2 col-md-4">Col 2</div>
            <div class="col3 col-md-4">Col 3</div>
        </div>

        <div class="row">
            <div class="col1 col-md-4 align-self-center">Col 1</div>
            <div class="col2 col-md-4 align-self-end">Col 2</div>
            <div class="col3 col-md-4">Col 3</div>
        </div>
        <div class="row justify-content-center">
            <div class="col1 col-md-2">Col 1</div>
            <div class="col2 col-md-2">Col 2</div>
            <div class="col3 col-md-2">Col 3</div>
        </div>
        <div class="row justify-content-end">
            <div class="col1 col-md-2">Col 1</div>
            <div class="col2 col-md-2">Col 2</div>
            <div class="col3 col-md-2">Col 3</div>
        </div>
        <div class="row justify-content-around">
            <div class="col1 col-md-2">Col 1</div>
            <div class="col2 col-md-2">Col 2</div>
            <div class="col3 col-md-2">Col 3</div>
        </div>
        <div class="row justify-content-between">
            <div class="col1 col-md-2">Col 1</div>
            <div class="col2 col-md-2">Col 2</div>
            <div class="col3 col-md-2">Col 3</div>
        </div>

        <div class="row no-gutters">
            <div class="col1 col-md-4">Col 1</div>
            <div class="col2 col-md-4">Col 2</div>
            <div class="col3 col-md-4">Col 3</div>
        </div>

        <div class="row">
            <div class="col1 col-md-4">Col 1</div>
            <div class="col2 col-md-4 order-12">Col 2</div>
            <div class="col3 col-md-4 order-1">Col 3</div>
        </div>


    </div>



    <script src="Scripts/jquery-3.0.0.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
</body>
</html>