最近在學習前端開發，發現使用 CSS 布局框架可以很好地幫助快速實現頁面布局，減少代碼量。下面介紹兩種常用的 CSS 布局框架：Bootstrap 和 Foundation。

//Bootstrap 布局框架
<link rel="stylesheet" >
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
//Foundation 布局框架
<link rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/foundation/6.2.4/foundation.min.js"></script>

布局框架使用起來非常簡便，例如列的布局：

//Bootstrap 列布局
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
<p>This is a column.</p>
</div>
//Foundation 列布局
<div class="column small-12 medium-6 large-4 xlarge-3">
<p>This is a column.</p>
</div>

除了布局框架，在前端開發中經常需要進行組件之間的傳值操作。下面介紹兩種傳值方式：URL 參數傳值和本地存儲傳值。

//URL 參數傳值
<a href="details.html?id=123&name=abc">Details</a>
//details.html 頁面獲取參數
var id = getUrlParam('id');
var name = getUrlParam('name');
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
//本地存儲傳值
localStorage.setItem('key', 'value');
var value = localStorage.getItem('key');

以上就是布局框架及傳值的介紹，希望對前端入門學習者有所幫助。