Skip to content

Latest commit

 

History

History
185 lines (147 loc) · 6 KB

bootstrap-learning-note.md

File metadata and controls

185 lines (147 loc) · 6 KB
Raw

Bootstrap Learning Note

基本介紹

Bootstrap 是由 Twitter 推出的一套前端框架，是目前最被廣為使用來做 Responsive Web Design 的 framework 。Bootstrap 包括 HTML 、 CSS 及 JavaScript ，但是以應用目的來說，個人覺得 Bootstrap 屬於 CSS framework 而非 JavaScript framework ，它利用了 JavaScript 來更完善其視覺效果，讓動態網頁與 Web 應用的開發變得更容易與快速。

當然，還有很多其他很有名的 CSS framework ，像是 yahoo 的 Prue.css 或是 Zurb 的 Fundation 。因此，Bootstrap 並不是唯一可以做 RWD 的前端框架，在開發的時候只要選擇一套最適合自己的一套即可。

Bootstrap 3 以 mobile first 為主，與之前版本的 bootstrap 不一樣。

如何使用

  • 下載與安裝

直接import js與css

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Install with Bower

$ bower install bootstrap

Install with npm

$ npm install bootstrap@3

P.S. 如果有需要用到Bootstrap的JavaScript外掛，就必須要include JQuery.

  • 基本template
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Template</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>

Grid 的設計方法

Bootstrap 需要一個 .container 來裝整個 grid system，可以使用兩種不同的 css class:

  • .container
  • .container-fluid

container定義了適當的寬度：

  • screen > 768px，.container 750px
  • screen > 992px，.container 970px
  • screen > 1200px，.container 1170px

而container-fluid則是採用滿版，適用於滿版的頁面設計

####設計方法： 一個頁面主要會由container、row與column組合而成。

其中，column的class分為四種大小:

  • .col-xs- : Extra small devices Phones (<768px)
  • .col-sm- : Small devices Tablets (≥768px)
  • .col-md- : Medium devices Desktops (≥992px)
  • .col-lg- : Large devices Desktops (≥1200px) 詳細內容可以參考官方提供的表格: grid-options

一般來說在設計的時候，container (.container or .container-fluid) 之中會包含多個 row ，用這些 row 來裝切分為12等分的 column。 ex:

<div class="container">
    <div class="row">
        <div class="col-md-6">A-1</div>
        <div class="col-md-6">B-1</div>
    </div>
    <div class="row">
        <div class="col-md-4">A-2</div>
        <div class="col-md-8">B-2</div>
    </div>
</div>

在Grid system之中，總共平分為12等分。舉例來說，如果頁面設計在一般螢幕左右兩欄A與B要在手機瀏覽時候變成上下排列，可以利用col-md-6與col-xs-12來達成。 ex:

<div class="container">
    <div class="row">
        <div class="col-md-6 col-xs-12">A</div>
        <div class="col-md-6 col-xs-12">B</div>
    </div>
</div>

#####Column wrapping 當超過12等分的時候，將會自動換行到下一列，原則就是column的總數是以12為一列。 ex:

<!--此例下的C就會被擠到下一列-->
<div class="container">
    <div class="row">
        <div class="col-md-6">A</div>
        <div class="col-md-5">B</div>
        <div class="col-md-6">C</div>
    </div>
</div>

#####Responsive column resets 此外，當你的column高度不一樣的時候，可以使用.clearfix來做平衡調整。

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

另外也可以對column坐位移，利用.col-md-offset-*來達成效果。 ex:

<div class="container">
    <div class="row">
        <div class="col-md-6 col-md-offset-4">A</div>
        <div class="col-md-2">B</div>
    </div>
</div>

CSS 元件

  • Responsive img 在RWD網頁設計中，若要使圖片能夠跟著也一起縮放，可以直接使用img-responsive這個class，如下：
<img src="xxx.png" class="img-responsive">

  • Visible or Hidden 如果要控制在不同螢幕大小，div的顯示或是隱藏，可以使用以下的classes

    • .visible-*-block
    • .hidden-*

  • Bootstrap還提供了許多CSS元件可以使用，如button, form 等等，詳細內容參考官方文件: Bootstrap-css

線上編輯器

由runoob所製作的線上編輯器Bootstrap-online-editor

簡易實作範例

Grid system & media query 簡單實作： demo: demo source code: sample