官方網站：http://getbootstrap.com/
手機網頁的前端架構
用於開發網站 Responsive 功能

Grid System

Bootstrap comes with a grid that is made up of 12 equal-sized columns. HTML elements are arranged to span different numbers of columns in order to create custom page layouts.

用於排版，在Bootstrap是由12個相同的長條排列，長條上可以擺放HTML elements，排出你要的版型

css 寫法 (Medium devices Desktops)

細節：https://getbootstrap.com/docs/3.3/css/#grid
每一個單位為col-md-1，一個頁面總有col-md-12長

<div class="row">
<div class="col-md-8">
<h4>Content 1</h4>

</div>
<div class="col-md-4">
<h4>Content 2</h4>
</div>
</div>

Bootstrap 的 tab 語法

1.設定 ul 的 class 為"nav nav-tabs"

2.將要打開的 tab 設置 class 為 <li class="active">

<ul class="nav nav-tabs">
<li><a href="#">Primary</a></li>
<li><a href="#">Social</a></li>
<li><a href="#">Promotions</a></li>
<li class="active"><a href="#">Updates</a></li>
</ul>

實際操作可以到這邊

Bootstrap 的 pills 語法

1.設定ul的class為"nav nav-pills"

2.將要打開的tab設置class為<li class="active">

<ul class="nav nav-pills">
<li><a href="#">Primary</a></li>
<li class="active"><a href="#">Social</a></li>
<li><a href="#">Promotions</a></li>
<li><a href="#">Updates</a></li>
</ul>

實際操作可以到這邊

Jumbotron

說明

Jumbotron 案例

<div class="jumbotron">
<h1>Find a place to stay.</h1>
<p>Rent from people in over 34,000 cities and 192 countries.</p>
</div>

在 Html 內設定連結到 bootstrap.css檔案

瀏覽器解讀 link tags的順序

<head>
<link href="shift.css" rel="stylesheet">
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="main.css">
</head>

瀏覽器解讀下列 link tags 中的優先讀取順序，最重要的是最下方的main.css

1.shift.css

2.bootstrap.css, and applies those styles to the page.

3.main.css, and applies those custom styles to the page. The custom styles override(推翻) the Bootstrap styles.

The order of the CSS files tell the browser that your styles in main.css are more important than the styles in bootstrap.css, so the final page that loads is the customized web page.

Intro to Bootstrap