<!DOCTYPE html> <html> <head> <title>@ViewBag.Title - My ASP.NET Application</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </head> <body> @RenderBody() </body> </html>Controller:
private AdventureWorksEntities db = new AdventureWorksEntities(); public ActionResult Grid() { var contacts = db.Contact.Take(50); return View(contacts.ToList()); }View:
<style type="text/css">.container-fluid { margin: 5px; } div.row > div { border: 1px solid; } /*幾乎萬用型的消除grid重疊格線的css寫法（僅ie會失敗）*/ /*這是將每一個row重複部分的border變成不重複的寫法，參考這個*/ /* http://stackoverflow.com/questions/33810312/using-borders-on-column-divs-in-bootstrap */ /*但是看半天網路上的文章，還是不懂文章的解釋，我個人的理解是：只要div的上面或是左邊有鄰居element，就會被他吸過去1px，因此造成border重疊的情況...*/ /*ie:85％以上重複的線條消除，沒消除的大概就是ie的bug*/ /*chrome:成功！*/ /*iphone 6 plus:成功！*/ /*Samsung S4：成功！*/ div.row div { margin-top: -1px; margin-left: -1px; } @@media only screen and (max-width: 768px) { /*瀏覽器寬度小於768px的時候，會套用這個css*/ .container-fluid .row:nth-child(even) { background-color: #dcdcdc; } .container-fluid .row:nth-child(odd) { background-color: #f0f0f0; } } @@media screen and (min-width: 768px) { /*瀏覽器寬度大於768px的時候，會套用這個css*/ .container-fluid .row:nth-child(even) { background-color: #dcdcdc; } .container-fluid .row:nth-child(odd) { background-color: #f0f0f0; } } </style> @model IEnumerable<RWDMVC.Models.Contact> @{ ViewBag.Title = "TestGrid"; } <div class="container-fluid"> <h1>RWD Grid Test</h1> <p>根據瀏覽器寬度調整grid的樣式</p> @if (Model.Count() > 0) { <div class="row" style="background-color: #c1eaff; text-align: center;"> <div class="col-sm-4 col-md-3 col-lg-2">ContactName</div> <div class="col-sm-4 col-md-3 col-lg-2">Phone</div> <div class="col-sm-4 col-md-6 col-lg-8">EmailAddress</div> </div> foreach (var item in Model) { <div class="row"> <div class="col-sm-4 col-md-3 col-lg-2">@Html.DisplayFor(modelItem => item.LastName) @Html.DisplayFor(modelItem => item.FirstName)</div> <div class="col-sm-4 col-md-3 col-lg-2">@Html.DisplayFor(modelItem => item.Phone)</div> <div class="col-sm-4 col-md-6 col-lg-8">@Html.DisplayFor(modelItem => item.EmailAddress)</div> </div> } } </div>
...
...
沒有留言:
張貼留言