iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
0
Modern Web

前端網頁設計學習旅程系列 第 21

Day21_Bootstrap-Get Start

Boorstrap

Bootstrap 是一個由 HTML、CSS 和 JavaScript 寫成的前端框架。他預先定義好大量的元素設定,讓你可以方便地引用,而不需要寫繁瑣的語法。
Bootstrap 的特色是讓你不寫 CSS,只需要架構基本的 HTML 元件,並引入一些 CSS Class就可以套用樣式,方便的操作讓他成為最容易被使用的前端框架之一

開發資源

Bootstrap的官網即提供非常豐富的文件索引,新手可以一步一步照著做,就可以方便的使用。
以下舉些例子,可以看出來為什麼Bootstrap會如此受歡迎

// 透過CDN引用CSS & JS檔案
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

Button 樣式

下面是框架提供的 Button 樣式

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

https://ithelp.ithome.com.tw/upload/images/20201003/20130503rVY7YDbAXx.png

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

https://ithelp.ithome.com.tw/upload/images/20201003/201305033GUMeZ0nm8.png

Button 尺寸

<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

https://ithelp.ithome.com.tw/upload/images/20201003/20130503nYYn9U2P0C.png
https://ithelp.ithome.com.tw/upload/images/20201003/20130503fnApjSqtxE.png

試試看

https://ithelp.ithome.com.tw/upload/images/20201003/20130503Y4fQrpkjmg.png

再有了基礎概念之後,可以嘗試看看使用官網的文件,做出類似上面圖片的元件


	<h1>Bootstrap Basics</h1>
	<button class="btn btn-danger btn-xs">CLICK ME!</button>
	<button class="btn btn-success btn-xs active">CLICK ME!</button>
	<button class="btn btn-success btn-xs" disabled="disabled">CLICK ME!</button>

	<a href="http://www.getbootstrap.com" class="btn btn-info btn-lg">Bootstrap Docs</a>


	<form>
	  <div class="form-group">
	    <label for="exampleInputEmail1">Email address</label>
	    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
	  </div>
	  <div class="form-group">
	    <label for="exampleInputPassword1">Password</label>
	    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
	  </div>
	  <div class="form-group">
	    <label for="exampleInputFile">File input</label>
	    <input type="file" id="exampleInputFile">
	    <p class="help-block">Example block-level help text here.</p>
	  </div>
	  <div class="checkbox">
	    <label>
	      <input type="checkbox"> Check me out
	    </label>
	  </div>
	  <button type="submit" class="btn btn-default">Submit</button>
	</form>

上一篇
Day20_jQuery-Event
下一篇
Day22_Bootstrap-Nav Bars
系列文
前端網頁設計學習旅程30

尚未有邦友留言

立即登入留言