iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 24
0
Modern Web

從前端走到設計,下一步?系列 第 24

Day24-替懶人開發的 CSS 工具:第一次用 Bootstrap

Bootstrap 是一款用來開發網站等等的前端樣式框架,包括表單、按鈕或是各種網頁上常見的元件,基本上 Bootstrap 上也可以找到類似的元件。

至於為什麼要有 Bootstrap 呢?可能是有人覺得網頁每個東西都要用 div 之類的在那邊刻呀刻,實在是太累了,因此才會有 Bootstrap 的誕生。

首先要引入 Bootstrap,要先 html 一開始放入下面這段:

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

如果你嫌看英文太麻煩的話,網路上有許多翻譯過的版本,我自己都是在六角學院翻譯過的 Bootstrap 上找尋我要的元件。

無論是導覽列

或是搜尋框

甚至是各式各樣的按鈕

在你想要的樣式下面都會有對應的語法,只要將語法複製貼上,再將範例文字改成你要的,就完成啦!

Grid

Bootstrap 的 Grid 也很不錯用。它會將網頁分成欄(column)與列(row),又以 12 為單位。

假設今天將整個網頁分成三塊

1 2 3

若你想要在 3 填一個按鈕,那麼必須先新增一個 row,再以 12 為分母,將網頁分成三塊(因此一塊是 4)

<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-4 "></div>
	<div class="col-4 "></div>
	<div class="col-4 ">
		<button type="button" class="btn btn-primary">按鈕</button>
	</div>
</div>	

這樣 3 的部分就是按鈕囉。
而以 12 為單位這樣將網頁分塊,也就是 grid 的概念,很適合用在列表或是圖片的區塊上,能夠確保每個部分都一樣大,不妨可以試試看:)


上一篇
Day23-網頁會動了!Animate.css 超簡單
下一篇
Day25-哪裡出錯了? Chrome 檢查元素
系列文
從前端走到設計,下一步?30

尚未有邦友留言

立即登入留言