2015年12月21日 星期一

[RWD][w3school＋MVC]建立grid - 完整程式碼

layout： 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     
  5.     <title>@ViewBag.Title - My ASP.NET Application</title>
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1">
  8.     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  9.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  10.     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  11. </head>
  12. <body>
  13.     @RenderBody()
  14. </body>
  15. </html>
Controller:
  1. private AdventureWorksEntities db = new AdventureWorksEntities();
  2.  
  3.         public ActionResult Grid()
  4.         {
  5.             var contacts = db.Contact.Take(50);
  6.             return View(contacts.ToList());
  7.         }
View:
  1.  <style type="text/css">
  2.  
  3.     .container-fluid {
  4.         margin: 5px;
  5.     }
  6.  
  7.     div.row > div {
  8.         border: 1px solid;
  9.     }
  10.  
  11.     /*幾乎萬用型的消除grid重疊格線的css寫法（僅ie會失敗）*/
  12.     /*這是將每一個row重複部分的border變成不重複的寫法，參考這個*/
  13.     /* http://stackoverflow.com/questions/33810312/using-borders-on-column-divs-in-bootstrap */
  14.     /*但是看半天網路上的文章，還是不懂文章的解釋，我個人的理解是：只要div的上面或是左邊有鄰居element，就會被他吸過去1px，因此造成border重疊的情況...*/
  15.     /*ie:85％以上重複的線條消除，沒消除的大概就是ie的bug*/
  16.     /*chrome:成功！*/
  17.     /*iphone 6 plus:成功！*/
  18.     /*Samsung S4：成功！*/
  19.     div.row div {
  20.         margin-top: -1px;
  21.         margin-left: -1px;
  22.     }
  23.  
  24.  
  25.  
  26.  
  27.     @@media only screen and (max-width: 768px) {
  28.         /*瀏覽器寬度小於768px的時候，會套用這個css*/
  29.         .container-fluid .row:nth-child(even) {
  30.             background-color: #dcdcdc;
  31.         }
  32.  
  33.         .container-fluid .row:nth-child(odd) {
  34.             background-color: #f0f0f0;
  35.         }
  36.     }
  37.  
  38.     @@media screen and (min-width: 768px) {
  39.         /*瀏覽器寬度大於768px的時候，會套用這個css*/
  40.         .container-fluid .row:nth-child(even) {
  41.             background-color: #dcdcdc;
  42.         }
  43.  
  44.         .container-fluid .row:nth-child(odd) {
  45.             background-color: #f0f0f0;
  46.         }
  47.     }
  48. </style>
  49.  
  50. @model IEnumerable<RWDMVC.Models.Contact>
  51.  
  52. @{
  53.     ViewBag.Title = "TestGrid";
  54. }
  55.  
  56. <div class="container-fluid">
  57.     <h1>RWD Grid Test</h1>
  58.     <p>根據瀏覽器寬度調整grid的樣式</p>
  59.  
  60.     @if (Model.Count() > 0)
  61.     {
  62.  
  63.         <div class="row" style="background-color: #c1eaff; text-align: center;">
  64.             <div class="col-sm-4 col-md-3 col-lg-2">ContactName</div>
  65.             <div class="col-sm-4 col-md-3 col-lg-2">Phone</div>
  66.             <div class="col-sm-4 col-md-6 col-lg-8">EmailAddress</div>
  67.           
  68.         </div>
  69.         foreach (var item in Model)
  70.         {
  71.  
  72.             <div class="row">
  73.                 <div class="col-sm-4 col-md-3 col-lg-2">@Html.DisplayFor(modelItem => item.LastName) @Html.DisplayFor(modelItem => item.FirstName)</div>
  74.                 <div class="col-sm-4 col-md-3 col-lg-2">@Html.DisplayFor(modelItem => item.Phone)</div>
  75.                 <div class="col-sm-4 col-md-6 col-lg-8">@Html.DisplayFor(modelItem => item.EmailAddress)</div>
  76.                
  77.             </div>
  78.         }
  79.  
  80.  
  81.     }
  82.  
  83. </div>
  84.  

...
...

張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)