2020-11-17 學習總結：bootstrap基礎

Bootstrap 是一個用於快速開發 Web 應用程式和網站的前端框架，可以幫助我們更快的編寫網頁。

在官網下載bootstrap

下載內容如下：
預編譯版

Bootstrap 原始碼

把檔案直接放在我們的站點專案中就可以引用了。

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

元件使用

Glyphicons 字型圖示

直接引入，輸入符號名稱就可以直接使用符號

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

下拉選單

通過下面程式碼直接使用

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>

導航

標籤頁導航

使用nav-tabs 類：

通過下面程式碼直接使用

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

膠囊式標籤頁

使用 .nav-pills 類：

通過下面程式碼直接使用

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

垂直方向堆疊排列，只需新增 .nav-stacked 類：

通過下面程式碼直接使用

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

巨幕

這是一個輕量、靈活的元件，它能延伸至整個瀏覽器視口來展示網站上的關鍵內容。

通過下面程式碼直接使用

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

由於本人水平有限，部落格錯誤之處，煩請指正！