什麼是 Bootstrap ? Bootstrap 4 入門教學

 


1. Bootstrap 4 的介紹

Bootstrap 是一個由 HTML、CSS 和 JavaScript 寫成的前端框架，核心的設計目標是達成RWD響應式與行動優先，也就是讓你的網站排版可以自動適應螢幕大小。它預先做好一套網站的基礎建設，讓你能在框架的基礎上進行開發，不需要再去煩惱瑣碎的設定。

Bootstrap 的特色是讓你不寫 CSS，只需要配置恰當的 HTML 架構並加上幾個 Bootstrap class，這種高效讓大家對他愛不釋手。

本篇是介紹 boostrap 4 , 不過官方預計在不久的將來 將推出 boostrap 5 , 我們拭目以待吧 !

以下我們將會列出我認為幾個比較重要的重點 , 讓我們開始吧~ 


2. 如何使用 Bootstrap 4

在此感謝六角學院 👍👍👍 , 還好他們有翻譯成繁體中文 , 讓大家能更快的入門 ~

繁體中文網址連結 : https://bootstrap.hexschool.com/

引入bootstrap 4

方法一 : 使用cdn的方式引入

cdn的方式 方便又快速 , 但如果cdn連結失效 , bootstrap也會跟著失效

css 

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

jquery

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

完整結果如下

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>


方法二 : 把bootstrap下載下來 再引入程式當中

這個方式稱為本地部屬 ,雖然步驟比較多 , 但是不用怕連結失效 , 非常穩定

下載連結 : https://bootstrap.hexschool.com/docs/4.2/getting-started/download/

注意紅色框 : bootstrap4 記得要引入 jquery , 但bootstrap5 預計會將jquery移除改用原生javascript



接著引入下方兩隻紅色框框的檔案就完成了

完整結果如下

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    
    <script src="./bootstrap/js/bootstrap.min.js" crossorigin="anonymous"></script>
  </body>
</html>


3. bootstrap排版教學

容器

container 是第一層 , 也就是最外層

一般的容器

<div class="container">
    <!-- 內容  -->
</div>

滿版的容器

<div class="container-fluid">
    <!-- 內容  -->
</div>

網格

row  是第二層  , 稱為行 , 行是欄的水平群組 , 可以想像成橫排

<div class="container">
	<div class="row">
		<!-- 內容  -->
	</div>
	<div class="row">
		<!-- 內容  -->
	</div>
</div>

col    是第三層  , 稱為 欄 , 可以想像成直排 , 欄後面的數字(如 : col-4 , col-8 , col-9 ...)表示你希望使用的欄的數量 , 每行(row)最多12欄, row裡面所有col的後面的數字加起來超過12的話就會到下一行

<div class="container">
	<div class="row">
		<div class="col-4">
			<!-- 內容  -->
		</div>
		<div class="col-4">
			<!-- 內容  -->
		</div>
		<div class="col-4">
			<!-- 內容  -->
		</div>
	</div>
	<div class="row">
		<div class="col">
			<!-- 內容  -->
		</div>
		<div class="col">
			<!-- 內容  -->
		</div>
		<div class="col">
			<!-- 內容  -->
		</div>
	</div>
</div>

說明 : 如果沒寫數字的話 就會自動幫你設定寬度 , (12/三個col = 4, 一個col是4 ), 所以上方兩個row的是同樣的排版


col的網格 🔥重要🔥

在每個不同的螢幕寬度 , 而變化欄位數量


範例 : 

<div class="container">
    <div class="row">
        <div class="col-12 col-md-4">
            <div style="border: 1px solid black;height: 200px;">第一格</div>
        </div>
        <div class="col-12 col-md-4">
            <div style="border: 1px solid black;height: 200px;">第二格</div>
        </div>
        <div class="col-12 col-md-4">
            <div style="border: 1px solid black;height: 200px;">第三格</div>
        </div>
    </div>
</div>

說明 : 螢幕在768px以上看的時候是3個欄 , 以下的話是變成1個欄

電腦版結果


手機板結果


排版結語

幾乎所有的內容都會包在這三個class裡面 , 一定要記得他們

<div class="container">
    <div class="row">
        <div class="col">
            <!-- 內容 -->
        </div>
    </div>
</div>


4. Flex排版

bootstrap flex的排版 , 讓你更快速的使用 CSS 的 display : flex ,當然您也可以自己用CSS直接寫 , 以下將會簡單的說明 , 詳細內容可以參考以下官方繁體網址

可以直接參考網址 : bootstrap flex 文件

啟用 flex

<div class="d-flex">
    <!-- 內容 -->
</div>

長的是不是有點像 css 的 display : flex的縮寫呢~

水平軸

如 : 全部靠左 ,  全部靠右 , 全部水平置中 , 等...


<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>

垂直軸

如 : 全部靠上 ,  全部靠下 , 全部垂直置中 , 等...

<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>

order排序

order排序滿好用的 , 可以排序你的div順序 

例如 : 電腦版的時候 順序是 1 , 2 , 3 手機版的時候 變成 3 , 2 , 1

電腦版結果 : 



手機板結果 :


<div class="d-flex">
    <div class="order-3 order-md-1" style="background-color: red;">第一格</div>
    <div class="order-2 order-md-2" style="background-color: blue;">第二格</div>
    <div class="order-1 order-md-3" style="background-color: green;">第三格</div>
</div>


5. 元件的使用

bootstrap 4 元件的使用非常簡單 , 只要複製貼上幾乎就完成了 , 而且如果有自己想要的css樣式 , 直接新增css就好 , 非常方便 ~

由於bootstrap的元件實在太多了 ,  這邊就只舉例 警報(alerts)元件 的使用 , 因為其他的元件使用方式都一樣的~

網址連結 : https://bootstrap.hexschool.com/docs/4.2/components/alerts/

如何使用

點選右上方的 copy , 在貼到編輯器上


顯示結果


如何客製化元件

如果想更改樣式直接增加CSS就可以了 , 不過還是建議寫個class管理起來比較好

範例 : style = "height: 300px"

<div class="alert alert-primary" role="alert" style="height: 300px;">
  A simple primary alert—check it out!
</div>

高度增加 300px , 結果如下



5. 總結

Bootstrap 知名的原因是它的RWD響應式佈局框架。即使你想要鍛練自己手刻 CSS 的技術，我們仍然會建議你先使用一陣子 Bootstrap 直到你熟悉他，因為 Bootstrap 撰寫 CSS 的方式也很值得你學習，在導入 Bootstrap 之後，你可以隨時打開 DevTools 來查看 Bootstrap 的原始碼，這會幫助你觀摩很多專業的 CSS 設定細節。


引用網址 : https://bootstrap.hexschool.com/



留言

張貼留言

這個網誌中的熱門文章

網頁入門教材目錄

  0.網頁運作原理 網頁運作原理與專業名詞 1.程式編輯器sublime 3 介紹 sublime 3 使用介紹 2. PHP開發環境介紹  Xampp介紹 3. 認識HTML HTML介紹 4. 認識CSS CSS基礎篇 CSS基礎語法 5.認識 Javascript Javascript基礎 6. 認識 Jquery Jquery與ajax介紹 7. Bootstrap 4 基礎介紹 Bootstrap 4 介紹 Bootstrap 4 範例製作 8. 資料庫入門 MariaDB入門教學 9. PHP介紹 PHP基礎用法 - 1 PHP基礎用法 - 2 PHP物件導向 PHP與資料庫連線 10. Laravel框架入門 Laravel 基礎概念 Laravel下載安裝、MVC流程編寫、資料庫設定 Laravel 新增資料與顯示資料 Laravel 資料修改與刪除 Laravel 完整筆記本範例
閱讀完整內容

什麼是HTML?

圖片
  1. HTML 是什麼呢 ? html介紹 HTML 的英文原文是 HyperText Markup Language ，中文譯為「超文字標示語言」。為什麼要說「 超文字 」呢？如果你曾經用過 Windows 上的「記事本」打過字，你應該知道一般的純文字輸入是無法顯示不同的字型大小、不同的文字顏色、甚至插入與文字說明相關的圖片的。而 超文字則可包含這些不同的文字變化、加入圖片或影音多媒體、畫表格、甚至可做一些基本的排版功能 。而「標記語言」指的是 HTML 透過一些定義好的結構化標籤 (Tag) 語法，讓你把超文字放到你所想要的位置、或去指定它的呈現方式。因此，再簡單的說， HTML 就是可以讓你將您所想要呈現給別人看的資料，儘可能以較豐富的方式去呈現。 我可以用什麼工具編寫 HTML 網頁？ 很簡單，用 Windows 內建的「記事本」小軟體，就可以拿來練習編寫網頁了。但如果可以的話，真心推薦您使用以下其中一套「免費的進階版記事本」小軟體：  Notepad++  、  sublime ，因為它們可以幫您將 HTML 語法和您的網頁文章內容用不同的顏色做一些區隔，讓您更方便閱讀 HTML 內容，並且也可以及早讓您發現可能的編寫錯誤，讓您的學習之路更為順暢。 我要如何瀏覽及測試我的 HTML 網頁呢？ 當您使用前述的「記事本」工具編寫完內容後， 可以將檔案儲存成 test.html 這樣的檔名 ， test 即是您網頁的主檔名，而 .html 則為網頁的副檔名。假設您的檔案是儲存在「桌面」，您可用檔案總管或是任何可能的方式到桌面去找到 .html 的檔案，例如前述的 test.html 檔，然後用 滑鼠在 test.html 檔案上按左鍵快速點選兩下 ，則電腦即會自動以您系統預設的  網頁瀏覽器  開啟這個練習的網頁 2. HTML 基本語法 基本的HTML文件格式 < HTML > 　 < HEAD > 　　 < TITLE > 網頁主題 </ TITLE > 　　 < Meta > 　 </ HEAD > 　 < BODY > 　　網頁內容的主要呈現部分 　 </ BODY > </ H...
閱讀完整內容

網頁是怎麼運作的呢?

圖片
  短期來看，在撰寫網站程式碼時，這些理論並不是非懂不可，但在之後，了解這些背後原理，對你會很有幫助。 網頁know-how : 用戶端與伺服器端 用戶端 是網路用戶的典型上網設備（像是連到 Wi-Fi 的電腦、或是連到手機網路的手機），這些設備通常有能夠上網的軟體（通常是 Firefox 或 Chrome 之類的瀏覽器）。 伺服器端 是放著網頁、網站、或著 app 的電腦。當用戶端設備要訪問網頁時，網頁的副本會從伺服器下載到用戶端，以便顯示在用戶的瀏覽器。 IP位址 為Internet Protocol Address的縮寫，中文被稱為網際協議位址。 是一種在Internet上的給主機編址的方式。  IP位址可以說是網頁伺服器的門牌 讓系統可以透過這個號碼找到正確的網頁伺服器在哪裡。 DNS Domain Name System的縮寫，中文又稱領域名稱解析系統。 是網際網路的一項的服務，是個可將網址和IP位址相互對應的資料庫，能夠使人更方便的存取網際網路。( 不用記長長一串的數字啦！ ) 伺服器 伺服器作為硬體來說，通常是指那些具有較高計算能力，能夠提供給多個使用者使用的電腦。伺服器與PC機的不同點太多了，例如PC機在一個時刻通常只為一個使用者服務。伺服器與主機不同，主機是透過終端給使用者使用的，伺服器是透過網路給用戶端使用者使用的。 而近期 雲端伺服器 越來越盛行,常見的雲端服務有 AWS , GCP , AZURE 等.... , 雲端伺服器擁有非常多的服務, 可以節省開發時間 , 直接使用服務(但通常都不便宜...) 、擁有高擴展的硬體資源, 隨時調整你的硬體資源、安全性高等等.... , 想必之後會成為伺服器的主流 網頁伺服器 又叫做 Web Server 。 Apache是接洽的服務員負責將網頁畫面傳遞給瀏覽器，只要網頁中有需要資料的部分Apache就會向DB索取資料後一起交給瀏覽器。 DB(Data Base)就是存放資料的地方。 web server 的種類有： apache、nginx、iis apache 和nginx的差別在於nginx可能速度會比較快，用的資源少。 iis是微軟做的，如果是寫 asp.net  就可用這套iis但環境就是要在window server上。 瀏覽器輸入網址的流程 :...
閱讀完整內容