step1. 先到官方網站去下載Bootstrap
http://getbootstrap.com/
step2.進入網站後 點選 左邊的Download 將套件下載回來！！！
step3.完畢解壓縮，分別會看到css、fonts、js的資料夾
step4.接著到jQuery官網中，下載jqury並放到js的資料夾中。
Bootstrap(RWD)應用：
接著在官網中，可找到以下的表格，此表格相當的重要，主要是在說明，該套件中的螢幕尺寸的那些，分別有四個尺寸，且代稱分別為lg、md、sm、xs....等。
而Bootstrap是將版面欄位，等分等12塊，因此在設計RWD的版面需用百分比的方式來作設計。
step5.這樣都懂了吧！！！來自己手做一個網頁試試嚕！！！
範例code
<!DOCTYPE html>
<html>
<head>
<title>test101</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<style type="text/css">
#header{height: 100px; background: :#1ab2f1;}
#header .container, #footer .container{border:solid 1px #fff;}
#content-body, #sidebar{border: solid 1px #333;}
html,
body{
height: 100%;
}
#wrap{
min-height: 100%;
height: auto;;
margin: 0 auto -60px;
padding: 0 0 60px;
}
#footer{height: 60px; background: #1ab2f1;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="container" style="border:solid 1px #fff;">
check
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-9" id="content-body">內容</div>
<div class="col-lg-3" id="sidebar">側邊攔</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
版尾
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
結果
0 意見:
張貼留言