<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <!--以移動設備為優先，user-scalable=no禁止用戶縮放--> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> <title>Document</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <script src="bootstrap/js/jquery.min.js"</script> <script src="bootstrap/js/bootstrap.min.js"</script> <style type="text/css" media="screen"> div[class*="col-"] { border:1px solid grey; } </style> </head> <body> <div class="container-fluid" style="background: #fff";> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <img src="image/柵格系統1.jpg" class="img-responsive img-thumbnail"> <h1 class="page-header">柵格系統1</h1> <p>我給網頁柵格系統下的定義為：以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。 網頁柵格系統是從平面柵格系統中發展而來。對於網頁設計來說，柵格系統的使用，不僅可以讓網頁的信息呈現更加美觀易讀，更具可用性。而且，對於前端開發來說，網頁將更加的靈活與規范。</p> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <img src="image/柵格系統2.jpg" class="img-responsive img-thumbnail"> <h1 class="page-header">柵格系統2</h1> <p>我給網頁柵格系統下的定義為：以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。 網頁柵格系統是從平面柵格系統中發展而來。對於網頁設計來說，柵格系統的使用，不僅可以讓網頁的信息呈現更加美觀易讀，更具可用性。而且，對於前端開發來說，網頁將更加的靈活與規范。</p> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <img src="image/柵格系統3.jpg" class="img-responsive img-thumbnail"> <h1 class="page-header">柵格系統3</h1> <p>我給網頁柵格系統下的定義為：以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。 網頁柵格系統是從平面柵格系統中發展而來。對於網頁設計來說，柵格系統的使用，不僅可以讓網頁的信息呈現更加美觀易讀，更具可用性。而且，對於前端開發來說，網頁將更加的靈活與規范。</p> </div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"> <img src="image/柵格系統3.jpg" class="img-responsive img-thumbnail"> <h1 class="page-header">柵格系統3</h1> <p>我給網頁柵格系統下的定義為：以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。 網頁柵格系統是從平面柵格系統中發展而來。對於網頁設計來說，柵格系統的使用，不僅可以讓網頁的信息呈現更加美觀易讀，更具可用性。而且，對於前端開發來說，網頁將更加的靈活與規范。</p> </div> </div> </body> </html>
