C50108
Search…
職訓局里程碑
2019/0515/RWD Utility+Card&MVC ViewModel+CRUD(RD)

上次講的是排版方式 flexbox bs4
這次繼續講通用Utility類別 字型 字體 顏色 背景
Bs4比bs3顏色更多
全幅背景圖??

text- …

bg- …

p ? padding
mb ? marginbotton
bs3沒有通用屬性要自己下css
transparent 透明

<!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>
</style>
</head>
<body>
<div class="container">
<p class="text-primary">Welcome My Website</p>
<p class="text-secondary">Welcome My Website</p>
<p class="text-success">Welcome My Website</p>
<p class="text-danger">Welcome My Website</p>
<p class="text-warning">Welcome My Website</p>
<p class="text-info">Welcome My Website</p>
<p class="text-light bg-dark">Welcome My Website</p>
<p class="text-dark">Welcome My Website</p>
<p class="text-body">Welcome My Website</p>
<p class="text-muted">Welcome My Website</p>
<p class="text-white bg-dark">Welcome My Website</p>
<hr />
<div class="text-white bg-primary p-3 mb-2">Welcome My Website</div>
<div class="text-white bg-secondary p-3 mb-2">Welcome My Website</div>
<div class="text-white bg-success p-3 mb-2">Welcome My Website</div>
<div class="text-white bg-danger p-3 mb-2">Welcome My Website</div>
<div class="text-white bg-warning p-3 mb-2">Welcome My Website</div>
<div class="text-white bg-info p-3 mb-2">Welcome My Website</div>
<div class="text-white bg-dark p-3 mb-2">Welcome My Website</div>
<div class="text-dark bg-light p-3 mb-2">Welcome My Website</div>
<div class="text-dark bg-transparent p-3 mb-2">Welcome My Website</div>
</div>
</body>
</html>

keyword
<h1-6>
<small>
<pre>
<code>
<kbd>
沒套的時候其實只是有含意的區位沒有樣式

<!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>
</style>
</head>
<body>
<div class="container">
<h1>h1. Bootstrap 4</h1>
<h2>h2. Bootstrap 4</h2>
<h3>h3. Bootstrap 4</h3>
<h4>h4. Bootstrap 4</h4>
<h5>h5. Bootstrap 4</h5>
<h6>h6. Bootstrap 4</h6>
<p class="h1">h1. Bootstrap 4</p>
<p class="h2">h2. Bootstrap 4</p>
<p class="h3">h3. Bootstrap 4</p>
<p class="h4">h4. Bootstrap 4</p>
<p class="h5">h5. Bootstrap 4</p>
<p class="h6">h6. Bootstrap 4</p>
<span class="h1">h1. Bootstrap 4</span>
<span class="h2">h2. Bootstrap 4</span>
<span class="h3">h3. Bootstrap 4</span>
<span class="h4">h4. Bootstrap 4</span>
<span class="h5">h5. Bootstrap 4</span>
<span class="h6">h6. Bootstrap 4</span>
<hr />
<h1>Welcome My Website<small>sub title</small></h1>
<h2>Welcome My Website<small>sub title</small></h2>
<h3>Welcome My Website<small>sub title</small></h3>
<hr />
<pre>
function updateData() {
$.ajax({
type: 'GET',
url: 'https://ptx.transportdata.tw/MOTC/v2/Rail/TRA/LiveBoard?$format=JSON',
format: 'json',
success: function (data) {
//alert(data.length);
var TripLine;
var DelayTime;
var Direction;
$('#tb1').append("<thead><tr><td>站名</td><td>車次</td><td>車種</td><td>山/海線</td><td>行車方向</td><td>到站時間</td><td>發車時間</td><td>誤點時間</td></tr></thead>");
$('#tb1').append("<tbody>");
for (var i = 0; i < data.length; i++) {
switch (data[i].TripLine) {
case 0:
TripLine = "不經山海線";
break;
case 1:
TripLine = "山線";
break;
case 2:
TripLine = "海線";
break;
}
DelayTime = data[i].DelayTime == 0 ? "準點" : "<span style='color:red'>誤點" + data[i].DelayTime+"分鐘</span>"
Direction = data[i].Direction == 0 ? "順行" : "逆行";
$('#tb1').append("<tr><th>" + data[i].StationName.Zh_tw + "</th><th>" + data[i].TrainNo + "</th><th>" + data[i].TrainTypeName.Zh_tw + "</th><th>" + TripLine + "</th><th>" + Direction + "</th><th>" + data[i].ScheduledArrivalTime + "</th><th>" + data[i].ScheduledDepartureTime + "</th><th>" + DelayTime + "</th></tr>");
}
$('#tb1').append("</tbody>");
},
error: function () {
alert('Error!!');
}
});
setTimeout("updateData()",1000);
}
updateData();
</pre>
<hr />
<code>alert('Error!!');</code>
<hr />
<span>請按下<kbd>Ctrl+F</kbd>進行文件搜尋</span>
</div>
</body>
</html>

<div class="row">
<div class="col-2 text-truncate">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
</div>
</div>

<div class="row">
<div class="d-inline-block text-truncate" style="max-width:150px">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
</div>
</div>

其實以上bsclass css裡面就是overflow hidden
還有很多例如
去除底線
開頭字變大寫 capitalize 其實都是 css style 只是在稍加更改

<!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>
</style>
</head>
<body>
<div class="container">
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
<p class="text-capitalize">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
<p class="text-left">h1. Bootstrap 4</p>
<p class="text-center">h1. Bootstrap 4</p>
<p class="text-right">h1. Bootstrap 4</p>
<p class="text-sm-left">h1. Bootstrap 4</p>
<p class="text-md-center">h1. Bootstrap 4</p>
<p class="text-lg-right">h1. Bootstrap 4</p>
<p class="text-xl-center">h1. Bootstrap 4</p>
<hr />
<div class="badge badge-danger text-wrap" style="width:50px">
This text window aaaaaa ssss aaaaaaa
</div>
<hr />
<div class="row">
<div class="col-2 text-truncate">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
</div>
</div>
<div class="row">
<div class="d-inline-block text-truncate" style="max-width:150px">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
</div>
</div>
<hr />
<p class="text-break">
PneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosisPneumonoultramicroscopicsilicovolcanoconiosis
</p>
</div>
</body>
</html>

Rem 從根 window 繼承

<!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>
span{
width:200px;height:200px;
}
</style>
</head>
<body>
<div class="container">
<hr />
<div class="row">
<div class="col-sm-12 bg-dark">
<span class="border"> </span>
<span class="border-top"> </span>
<span class="border-right"> </span>
<span class="border-bottom"> </span>
<span class="border-left"> </span>
</div>
</div>
<div class="row">
<div class="col-sm-12 bg-dark">
<span class="border border-danger"> </span>
<span class="border-top border-info"> </span>
</div>
</div>
<div class="row">
<div class="col-sm-12 bg-dark">
<span class="rounded"> </span>
<span class="rounded-top"> </span>
<span class="rounded-left"> </span>
<span class="rounded-circle"> </span>
<span class="rounded-pill"> </span>
</div>
</div>
</div>
</body>
</html>

Display 顯示
Flex 對齊
color顏色
border邊框
剩下的老師沒講需要在看docs
Borders
getbootstrap

table
caption
tfoot
thead
tr td
原本都有自己的位置定位
但放入bs就會整個布局都不一樣
Tables
getbootstrap
有很多種bs樣式要去docs看比較清楚
然後連hover都會有改變

最好的方式是 複製起來然後自己弄個自己網站的css後置程式碼 然後改顏色等等 然後?只要link位置比原bs.css引入得更後面 就會吃越後面link那種
Table有沒有響應式呢? table-responsive-md

<!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="table-responsive-md">
<table class="table table-striped table-borderless table-hover">
<caption>成績單</caption>
<tfoot>
<tr>
<th colspan="9" class="">製表人:林老師</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
</tbody>
<thead class="table-dark">
<tr class="">
<th>姓名</th>
<th>性別</th>
<th>成績</th>
<th>姓名</th>
<th>性別</th>
<th>成績</th>
<th>姓名</th>
<th>性別</th>
<th>成績</th>
</tr>
</thead>
</table>
</div>
<hr />
<table class="table table-sm">
<caption>成績單</caption>
<tfoot>
<tr>
<th colspan="9" class="">製表人:林老師</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr class="bg-dark text-light">
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
<tr>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
<td>王大明</td>
<td>男</td>
<td>97</td>
</tr>
</tbody>
<thead class="table-dark">
<tr class="">
<th>姓名</th>
<th>性別</th>
<th>成績</th>
<th>姓名</th>
<th>性別</th>
<th>成績</th>
<th>姓名</th>
<th>性別</th>
<th>成績</th>
</tr>
</thead>
</table>
</div>
</body>
</html>

Pano? Bs3 改成
Card bs4
Components 組件
Content 內容

Card-header/body/footer
接著用用flexbox去排版 col-md-4 …
Columns 列
Row 行
如果要擺圖片?
首先圖片先給響應式class card-img
1擺在卡片最上方
然後跟header/body/footer同階層
接著又分左側右側
2圖片左邊文字右邊 ( 卡片系統無法 ???
所以要利用網格系統 ( 會很多層 ( 好像是 卡片系統無法跟網格系統互相 扛拜 所以需要用 div下網格系統在 包住 卡片系統
還可以扛拜很多東西,老師說自己看 …
Cards
getbootstrap
卡片 (Card)
getbootstrap

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title></title>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="MyStyle.css" rel="stylesheet" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="card bg-warning">
<div class="card-header">
Header
</div>
<img src="Desert.jpg" style="width:100%" />
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-primary" />
</footer>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card bg-danger">
<div class="card-header">
Header
</div>
<div class="card-body">
<h1>Title</h1>
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-outline-light" />
</footer>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card bg-primary">
<div class="card-header">
Header
</div>
<div class="row no-gutters">
<div class="col-md-4">
<img src="Desert.jpg" class="card-img" />
</div>
<div class="col-md-8">
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
</div>
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-warning" />
</footer>
</div>
</div>
</div>
</div>
</body>
</html>

Card-text/title/subtitle
Card-link

List-group
List-group-item
List-group-flush
也可以直接放到gridsystem ??
然後下head 可以融合看起來像一體設計
就是大小顏色樣式寫好了 可以共存的style
一樣去官網看

<hr />
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle">Sub Card Title</h6>
<p class="card-text">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</p>
<a href="#" class="card-link">加入購物車</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card">
<div class="card-header">
Header
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">aaaaaa</li>
<li class="list-group-item">bbbbbb</li>
<li class="list-group-item">cccccc</li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card bg-primary">
<div class="card-header">
Header
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">aaaaaa</li>
<li class="list-group-item">bbbbbb</li>
<li class="list-group-item">cccccc</li>
</ul>
<img src="Desert.jpg" style="width:100%" />
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-primary" />
</footer>
</div>
</div>
</div>
<hr />
<ul class="list-group">
<li class="list-group-item">aaaaaa</li>
<li class="list-group-item">bbbbbb</li>
<li class="list-group-item">cccccc</li>
</ul>
</div>

預設是gridsystem https://getbootstrap.com/docs/4.0/layout/grid/
除了content 也可以用 row 或 card-group
總之card可以跟其他組件扛拜 要舉一反三十六

<hr />
<div class="card-group">
<div class="card bg-warning">
<div class="card-header">
Header
</div>
<img src="Desert.jpg" style="width:100%" />
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-primary" />
</footer>
</div>
<div class="card bg-danger">
<div class="card-header">
Header
</div>
<div class="card-body">
<h1>Title</h1>
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-outline-light" />
</footer>
</div>
<div class="card bg-primary">
<div class="card-header">
Header
</div>
<div class="row no-gutters">
<div class="col-md-4">
<img src="Desert.jpg" class="card-img" />
</div>
<div class="col-md-8">
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
</div>
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-warning" />
</footer>
</div>
</div>
</div>

<!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="row">
<div class="col-md-4 col-sm-6">
<div class="card bg-warning">
<div class="card-header">
Header
</div>
<img src="Desert.jpg" style="width:100%" />
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-primary" />
</footer>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card bg-danger">
<div class="card-header">
Header
</div>
<div class="card-body">
<h1>Title</h1>
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-outline-light" />
</footer>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card bg-primary">
<div class="card-header">
Header
</div>
<div class="row no-gutters">
<div class="col-md-4">
<img src="Desert.jpg" class="card-img" />
</div>
<div class="col-md-8">
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
</div>
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-warning" />
</footer>
</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<h6 class="card-subtitle">Sub Card Title</h6>
<p class="card-text">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</p>
<a href="#" class="card-link">加入購物車</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card">
<div class="card-header">
Header
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">aaaaaa</li>
<li class="list-group-item">bbbbbb</li>
<li class="list-group-item">cccccc</li>
</ul>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="card bg-primary">
<div class="card-header">
Header
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">aaaaaa</li>
<li class="list-group-item">bbbbbb</li>
<li class="list-group-item">cccccc</li>
</ul>
<img src="Desert.jpg" style="width:100%" />
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-primary" />
</footer>
</div>
</div>
</div>
<hr />
<div class="card-group">
<div class="card bg-warning">
<div class="card-header">
Header
</div>
<img src="Desert.jpg" style="width:100%" />
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-primary" />
</footer>
</div>
<div class="card bg-danger">
<div class="card-header">
Header
</div>
<div class="card-body">
<h1>Title</h1>
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-outline-light" />
</footer>
</div>
<div class="card bg-primary">
<div class="card-header">
Header
</div>
<div class="row no-gutters">
<div class="col-md-4">
<img src="Desert.jpg" class="card-img" />
</div>
<div class="col-md-8">
<div class="card-body">
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet
fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est
quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros.
Petierunt uti sibi concilium totius Galliae in diem certam indicere.
Cras mattis iudicium purus sit amet fermentum.
</div>
</div>
</div>
<footer class="card-footer">
<input id="Button1" type="button" value="OK" class="btn btn-warning" />
</footer>
</div>
</div>
</div>
</body>
</html>

Mvc 利用 tD(tDept) tE(tEmp)一個 model 只能配一個 view

先介紹第一種 首先建立基底MODEL 接著建立一個新資料夾取名叫ViewModel藉此區分 ( 也可以放在原資料夾 接著在ViewModel資料夾中新增一個CVM.CS 要將兩個Model合併在這一個class中 記得要引入另外一個models才可以使用物件 using _05ViewModel.Models;
首先使用泛型list塞 tDepartment與tEmployee 這兩個class建立 CVM這個model
接著就要去編輯Controller 記得要把基底,model與原本的model都要進來 但是還是要將 dbEmployeeEntities 建立物件 接著藉由CVM這個類別建立新物件 將資料塞進去 直接將 CVM這個物件return回view
然後不用範本直接空view
打開只會看到layout
接著用razor引入 model資料 @model _05ViewModel.ViewModel.CVM
就開始用BS gridsystem排版左邊引入tDepartment 類別資料右邊tEmployee資料
此時已經把資料合併為CVM而且 讀出來了在這個頁面了
只要寫RAZOR 寫C#即可把資料做顯示
接著做塞選 點左側連結後後右側顯示塞選後的內容
接著要去修改controller傳過去的資料庫model內容要改成查詢式where
即可

//------------------------------------------------------------------------------
// <auto-generated>
// 這個程式碼是由範本產生。
//
// 對這個檔案進行手動變更可能導致您的應用程式產生未預期的行為。
// 如果重新產生程式碼,將會覆寫對這個檔案的手動變更。
// </auto-generated>
//------------------------------------------------------------------------------
namespace _05ViewModel.Models
{
using System;
using System.Collections.Generic;
public partial class tDepartment
{
public int fDepId { get; set; }
public string fDepName { get; set; }
}
}

//------------------------------------------------------------------------------
// <auto-generated>
// 這個程式碼是由範本產生。
//
// 對這個檔案進行手動變更可能導致您的應用程式產生未預期的行為。
// 如果重新產生程式碼,將會覆寫對這個檔案的手動變更。
// </auto-generated>
//------------------------------------------------------------------------------
namespace _05ViewModel.Models
{
using System;
using System.Collections.Generic;
public partial class tEmployee
{
public string fEmpId { get; set; }
public string fName { get; set; }
public string fPhone { get; set; }
public Nullable<int> fDepId { get; set; }
}
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using _05ViewModel.Models;
namespace _05ViewModel.ViewModel
{
public class CVM
{
public List<tDepartment> department { get; set; }
public List<tEmployee> employee { get; set; }
}
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//06-2-3 using _06ViewModel.Models及using _06ViewModel.ViewModel
using _05ViewModel.Models;
using _05ViewModel.ViewModel;
namespace _05ViewModel.Controllers
{
public class HomeController : Controller
{
//06-2-4 於HomeController建立DB物件
dbEmployeeEntities db = new dbEmployeeEntities();
// GET: Home
//06-2-5 編輯ActionResult Index()的內容
public ActionResult Index(int id=1)
{
CVM cvm = new CVM()
{
department = db.tDepartment.ToList(),
employee = db.tEmployee.Where(m => m.fDepId == id).ToList()
};
return View(cvm);
}
}
}

@*//06-3-3 在最上方加上@model _06ViewModel.ViewModel.CVMDepEmp*@
@model _05ViewModel.ViewModel.CVM
@{
ViewBag.Title = "部門員工列表";
}
<h2>Index</h2>
@*//06-3-5 在Index View中撰寫顯示畫面*@
<div class="row">
<div class="col-xs-3">
@foreach (var item in Model.department)
{
<p>
@Html.ActionLink(item.fDepName, "Index", new { id = item.fDepId })
</p>
}
</div>
<div class="col-xs-9">
<table class="table">
<tr>
<th>工號</th>
<th>姓名</th>
<th>電話</th>
<th>部門</th>
</tr>
@foreach (var item in Model.employee)
{
<tr>
<th>@item.fEmpId</th>
<th>@item.fName</th>
<th>@item.fPhone</th>
<th>@item.fDepId</th>
</tr>
}
</table>
</div>
</div>

//06-1 建立ViewModel
//06-1-1 建立dbEmployee.mdb資料庫Model
// 在Models上按右鍵,選擇加入,新增項目,資料,ADO.NET實體資料模型
// 來自資料庫的EF Designer
// 連接dbEmployee.mdf資料庫,連線名稱不修改,按下一步按鈕
// 選擇Entity Framework 6.x, 按下一步按鈕
// 資料表"全選", 按完成鈕
// 若跳出詢問方法按確定鈕
//06-1-2 在專案上按右鍵,建置
//06-1-3 加入ViewModel資料夾
//06-1-4 using _06ViewModel.Models
//06-1-5 建立tDepartment和tEmployee的List物件
//06-2 建立HomeController
//06-2-1 在Controllers資料夾上按右鍵,加入,控制器,選擇 MVC5Controller-Empty
//06-2-2 指定控制器名稱為HomeController,並開啟HomeController
//06-2-3 using _06ViewModel.Models及using _06ViewModel.ViewModel
//06-2-4 於HomeController建立DB物件
//06-2-5 編輯ActionResult Index()的內容
//06-3 建立各個View
//06-3-1 在public ActionResult Index()上按右鍵,新增檢視,建立Index View
//06-3-2 進行下列設定: