Bootstrap @ ~米漿牛奶~

首先在搜尋打Bootstrap就可到官網,然後選Getting started

往下拉可以看到Download,選擇Source code下載rar檔

我們要載入Bootstrap的檔案放置在dist資料夾下,有css,fonts和js

然後我創個boot資料夾把剛剛看到三個資料夾放置裡面

接著新增網頁,引用bootstrap的css和js範例

然後我大概建個簡單版

simple

.container : 內容區塊

以下為簡單版程式碼:

<!doctype html> <<html 5文件
<html>
<head>
<meta charset="utf-8"> <<網頁支援utf-8
<title>bootstrap設計</title> <<網頁標題
<link href="css/bootstrap.css" rel="stylesheet"> <<套用bootstrap 其中一個css
<script src ="js/bootstrap.js"></script> <<套用bootstrap 其中一個js
</head>
<body>
<div style="background-color:#099">Bootstrap設計實作</div>
<div class="container" style="background-color:#0FC">
Bootstrap是能讓我們更快速製作網頁的框架,在下載框架後會發現dist資料夾,裡面有css、fonts、js共三個資料夾,能讓我們引用Bootstrap寫好的檔案
以下為引用範例
link href="css/bootstrap.css" rel="stylesheet"
script src ="js/bootstrap.js" /script
當我們載入後但不知怎麼讓內容區塊置中,可用class的container
div class="container"
...
/div
如果想讓內容隨著視窗大小變動,可用class的container-fluid
div class=" container-fluid" >
...
/div
</div>
<div style="background-color:#0F9">
請注意上方
</div>
</body>
</html>

說真的我不喜歡呆呆地用,而不知道他背後作啥,如果想讓css進步就該看他css寫什麼

cont

內容是左右各留白(padding)15px,然後使用margin左右開自動(auto)讓他浮動置中

突然發現下方container-fluid也跟上方container一樣,真不懂為何要重複寫兩次@@

Bootstrap最大特色是欄！

大部分網頁通常是1欄n列,但Bootstrap是12欄n列

會使用12這個數字是因為可以分成6 6或4 4 4,讓人看起來舒服的介面

針對不同裝置,以下為設定值表格

	Grid Size	Grid Class	Offset Class	Screen Size
手機	Extra Small	col-xs-*	col-xs-offset-*	0px+
平板	Small	col-sm-*	col-sm-offset-*	768px+
筆電	Medium	col-md-*	col-md-offset-*	992px+
桌電	Large	col-lg-*	col-lg-offset-*	1200px+

.row:列

.col-xx-* : xx為哪種款式螢幕,*為1~12欄

.col-xx-offset-* : xx為哪種款式螢幕,*為0~12欄,padding-left幾個欄位

接著我把簡單版增加這些class

<body>
<div style="background-color:#099">Bootstrap設計實作</div>
<div class="container" style="background-color:#0FC">
<div class="row">
<div class="col-lg-12">
Bootstrap是能讓我們更快速製作網頁的框架,在下載框架後會發現dist資料夾,裡面有css、fonts、js共三個資料夾,能讓我們引用Bootstrap寫好的檔案
</div>
</div>
<div class="row">
<div class="col-lg-6" style="float:left">
當我們載入後但不知怎麼讓內容區塊置中,可用class的container <br/>
div class="container" <br/>
... <br/>
/div
</div>
<div class="col-lg-6" style="float:right">
如果想讓內容隨著視窗大小變動,可用class的container-fluid <br/>
div class=" container-fluid" > <br/>
... <br/>
/div
</div>
</div>
</div>
<div style="background-color:#0F9">
請注意上方
</div>
</body>

展示

再來我們去逛逛css

row

沒想到row只是把margin左右往內縮15px,接著他設定col開頭都往左靠

頭身尾都有只差指揮,於是我把導覽列增加上去

.navbar:導覽列

.navbar-nav:清單列不顯示前點.不要換行

<body>
<div class="navbar" style="background-color:#0FA; margin-bottom:0px; min-height:30px;">
<ul class="navbar-nav" style="float:right;">
<li class="nav"><a href="#">A</a></li>
<li class="nav"><a href="#">B</a></li>
<li class="nav"><a href="#">C</a></li>
</ul>
</div>
<div style="background-color:#099;">Bootstrap設計實作</div>
<div class="container" style="background-color:#0FC">
<div class="row">
<div class="col-lg-12">
Bootstrap是能讓我們更快速製作網頁的框架,在下載框架後會發現dist資料夾,裡面有css、fonts、js共三個資料夾,能讓我們引用Bootstrap寫好的檔案
</div>
</div>
<div class="row">
<div class="col-lg-6" style="float:left">
當我們載入後但不知怎麼讓內容區塊置中,可用class的container <br/>
div class="container" <br/>
... <br/>
/div
</div>
<div class="col-lg-6" style="float:right">
如果想讓內容隨著視窗大小變動,可用class的container-fluid <br/>
div class=" container-fluid" > <br/>
... <br/>
/div
</div>
</div>
</div>
<div style="background-color:#0F9">
請注意上方
</div>
</body>