:::

4. BootStrap響應式框架

一、 BootStrap網站

  1. 官網:http://getbootstrap.com/
  2. 正體中文手冊:https://kkbruce.tw/bs3
  3. 簡體中文手冊:http://v3.bootcss.com/
  4. 範例:http://www.candoapp.net/
  5. 向量圖:http://www.flaticon.com/
  6. 線上語法測試:https://codepen.io/pen/

二、 BootStrap(v3.3.7)基本頁面

  1. http://v3.bootcss.com/getting-started/#download
  2. 下載BootStrap並解壓,得到三個資料夾,和index.html放在一起即可。
  3. 基本頁面直接複製網站上範例,將語言改為<html lang="zh-Hant-TW">
  4. X-UA-Compatible用來指定IE瀏覽器的渲染模式 ,不分大小寫,必須用在 head 中,必須在除 title 外的其他 meta 之前使用。IE=edge指定IE用最新的渲染模式解析頁面。
  5. 建議下載jquery:https://jquery.com/download/,並存放於js目錄中
  6. 預設引入jquery在最下方,但若搭配其他jquery使用時,移致上方會比較沒問題。
  7. 基本用法,幾乎全靠class=”樣式名稱”來套用。

三、 格線系統

  1. 容器:「.container」最大寬度為1170px左右;「.container-fluid」則是滿版容器。
  2. 同一個頁面中可以同時分開使用,但不可互相套嵌使用。
  3. 格線系統:將畫面分成12格(等份),透過行 (row) 與欄 (column) 的組合建立頁面佈局。
    <div class="container">
        <div class="row">
            <div class="col-md-3"><h2>XOOPS 網站架設</h2></div>
            <div class="col-md-3"><h2>XOOPS 模組開發</h2></div>
            <div class="col-md-3"><h2>XOOPS 佈景設計</h2></div>
            <div class="col-md-3"><h2>XOOPS 維護升級</h2></div>
        </div>
    </div>
  4. .col-sm-6代表佔6格的欄位(column),sm代表只要螢幕解析度大於768px,就分成左右兩欄之意。若寫成.col-md-6就代表螢幕要992px以上,才分左右兩欄,若是遇到992以下螢幕,則自動變成單欄式。

     

    手機 (<768px)

    平板 (≧768px)

    桌面顯示器 (≧992px)

    大屏幕 (≧1200px)

    容器最大寬度

    None (自動)

    750px

    970px

    1170px

    類前綴

    .col-xs-

    .col-sm-

    .col-md-

    .col-lg-

    每欄欄寬

    自動

    ~62px

    ~81px

    ~97px

  5. col-可以同時使用,例如以下就是指定:.col-md-3指定當螢幕992px以上時每欄3格 ,共分成4欄;.col-sm-6指定當螢幕小於992但大於768時每欄6格,分成左右2欄。
    <div class="col-md-3 col-sm-6"><h2>XOOPS 網站架設</h2></div>
  6. 有時候,某些欄位內容較多
    <div class="clearfix visible-sm-block"></div>
  7. 若是一個row裡面的col超過12時,會再獨立另一個row出來。
  8. 注意,只要是放在col-xx中,就一定會有所謂的gutter(欄和欄之間的間距)
  9. 「.col-md-4 .col-md-offset-4」-offset代表跳過4格,會出現在中間佔4格
  10. 當螢幕大於992時,欄位左右交替(右推左拉),文字會變成在右邊(往右推6格),圖片在左邊(往左拉6格);當螢幕小於992時,就會變成文字在上,圖片在下的單欄模式:
    <div class="row">
        <div class="col-md-6 col-md-push-6">文字</div>
        <div class="col-md-6 col-md-pull-6">圖片</div>
    </div>

四、 排版

  1. http://v3.bootcss.com/css/#type
  2. Bootstrap將<body>和所有段落元素的font-size預設為 14px,line-height預設為 1.428。<p>元素的margin-bottom預設了 1/2 行高(即 10px)
  3. 段落中內容對齊(在表格中無效):.text-left(靠左對齊);.text-center(置中對齊);.text-right(靠右對齊);.text-justify(分散對齊);.text-nowrap(不換行)
  4. 向左浮動是.pull-left;向右浮動是.pull-right;要清除浮動則用.clearfix
  5. 顯示某元件可套用.show,隱藏某元件則用.hidden
  6. 練習素材
  7. 自己設定字型的CSS(字型網站):
    @font-face {
        font-family: myfont;
        src: url('setofont.ttf');
    }

     

五、 表格

  1. .table 賦予表格基本的樣式,橫底線,較舒服的排版,可搭配底下表格樣式一起使用。
  2. .table-striped(套用斑馬紋);.table-bordered(加上框線);.table-hover(滑鼠滑過變色);.table-condensed(較緊湊表格);.table-responsive(自適應表格)
  3. 套用表格行<tr>或儲存格<td>的顏色,請參考「顏色」單元。

六、 水平表單

  1. 表單基本結構如下,.form是一般表單;.form-horizontal是水平表單;.form-inline是行內表單。至於role是無障礙用的,詳細請見:http://www.zhangxinxu.com/wordpress/?p=2277
    <form action="#" class="form-horizontal" role="form">
        <div class="form-group">
            <label class="col-sm-2 control-label">標籤</label>
            <div class="col-sm-10">
                <input type="text" class="form-control">
            </div>
        </div>
    </form>
  2. 每組表單可套用.form-group,可同時搭配.has-success(綠).has-warning(黃).has-error(紅)來呈現不同表單狀態。若有使用.has-feedback還可以在有.form-control的框中插入圖示。
    <div class="form-group has-success has-feedback">
        <label class="col-sm-2 control-label">姓名:</label>
        <div class="col-sm-10">
            <input type="text" name="user_name" class="form-control" placeholder="請輸入姓名">
            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
        </div>
    </div>
  3. 調整表單大小:較大表單組.form-group-lg,較小表單組.form-group-sm
  4. 除了radio及chechbox外,其他表單均可加入.form-control美化之。
  5. radio及chechbox選項可用<label>包住,並用.radio-inline或.chechbox-inline來將選項水平化。
  6. 在表單中若只是要呈現一般文字,可套用.form-control-static看起來較美觀。
  7. .help-block可用於表單的說明文字

七、 按鈕

  1. <a><button><input type=”button”>都可以套用.btn來做出按鈕,強烈建議使用<button>以便在各種瀏覽器達到一致的外觀。
  2. 按鈕的六種顏色外觀,請參考「顏色」單元,若要將按鈕做成連結可用.btn-link。
  3. 預設尺寸外的其他三種尺寸:.btn-lg、.btn-sm 或 .btn-xs;另外,.btn-block可以做滿版按鈕。

八、 輸入框組

  1. 利用.input-group可將幾個表單元件或文字組合在一起,文字或其他輸入框用span.input-group-addon來附加,按鈕則用span.input-group-btn包住。
    <div class="input-group">
      <span class="input-group-addon">關鍵字</span>
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-primary" type="button">搜尋</button>
      </span>
    </div>

九、 圖片

  1. 圖片可用.img-responsive使之自適應,若要讓套用.img-responsive的圖片置中,請搭配.center-block,而非.text-center。
  2. 圖片還有三種樣式:(圓角).img-rounded;(圓形).img-circle;(外框).img-thumbnail

十、 自適應工具

  1. 搭配 hidden-*及 visible-*,可設定在哪些尺寸下哪些元件要隱藏,哪些要顯示,詳情請看http://v3.bootcss.com/css/#responsive-utilities
  2. 下例在小尺寸螢幕中,會以另一張不同比例的圖來顯示:
    <img src="images/header.jpg" alt="logo" class="img-responsive hidden-xs">
    <img src="images/header_xs.jpg" alt="logo" class="img-responsive visible-xs-block">

十一、 圖示

  1. 建議使用Font Awesome取代內建圖示:http://fontawesome.io,下載解壓,將其中的CSS和Fonts等目錄放至和index.html同一層即可,並於index.html引入css檔。
    <link href="css/font-awesome.min.css" rel="stylesheet">
  2. 套用圖示,.fa-5x是放大5倍,用.fa-fw可固定寬度,另aria-*是用於其他裝置,如螢幕閱讀器,跟一般人的畫面顯示幾乎沒有關係。
    <i class="fa fa-desktop fa-5x" aria-hidden="true"></i>
  3. 可利用.fa-stack 組合不同圖示
    <span class="fa-stack fa-5x">
      <i class="fa fa-circle-thin fa-stack-2x text-info"></i>
      <i class="fa fa-desktop fa-stack-1x"></i>
    </span>
  4. 插圖部份用http://www.flaticon.com的向量圖示會更好。

十二、 標籤與徽章

  1. 利用.label可以做出圓角文字標籤,其顏色請參考「顏色」單元
    <span class="label label-primary">標籤內容</span>
  2. 利用.badge通常用來顯示數字,類似FB未讀資訊那種。若放在按鈕中,會以反白顯示。
    <span class="badge">12</span>

十三、 頁面標題

  1. 利用.page-header搭配<h1>主標題<small>副標題,可做出精美標題組
    <div class="page-header">
      <h1>點兩下電腦工作室 <small>只要點兩下滑鼠,這個世界就能連起更多友善的網</small></h1>
    </div>

十四、 縮圖組及媒體組

  1. 利用.thumbnail將圖文包住,文字部份用.caption包住,會產生一組上圖下文帶框的縮圖組。
    <div class="thumbnail">
        <img src="圖">
        <div class="caption">
            <h3>標題</h3>
            <p>內文</p>
        </div>
    </div>
  2. 利用.media將圖文包住,圖片用.media-left,文字部份用.media-body 包住,會產生一組左圖右文的媒體組。當圖使用.media-right時,應置於.media-body之後,會變成右圖左文。
    <div class="media">
      <div class="media-left">
        <a href="#"><img src="圖"></a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">媒體標題</h4>
        內文
      </div>
    </div>

十五、 警告提示框組、well框及巨幕

  1. 利用.alert搭配各種alert顏色,可做出精美圓角外框的警告或提示框組,若裡面有連結,可在連結中用 .alert-link,即可以為連結設置與當前警告框相符的顏色。
    <div class="alert alert-info">
      相關內容
    </div>
  2. .well一樣是圓角框,只能設大小如.well-lg無法設顏色,一律為淺灰色。
    <div class="well">
      相關內容
    </div>
  3. .jumbotron用於醒目的需求下,除了有灰色框外,裡面的內容會被放大。
    <div class="jumbotron">
      <h1>標題</h1>
      <p>文字</p>
    </div>

十六、 列表組

  1. 利用清單元件搭配.list-group及.list-group-item,即可產生類似表格的圓角列表組。
    <ul class="list-group">
      <li class="list-group-item">列表1</li>
      <li class="list-group-item">列表2</li>
    </ul>
  2. 可搭配<a>連結或<button>按鈕來使用。.list-group-item亦可套用顏色
    <div class="list-group">
      <a href="#" class="list-group-item active">選項1</a>
      <a href="#" class="list-group-item">選項2</a>
    </div>

十七、 面板組

  1. 利用.panel搭配.panel-heading及.panel-title或 .panel-body或.panel-footer,即可產生類似表格的圓角面板組。其中可搭配列表組或表格一起使用。
    <div class="panel panel-primary">
      <div class="panel-heading"><h3 class="panel-title">面板標題</h3></div>
      <div class="panel-body">面板內容</div>
      <div class="panel-footer">面板註腳</div>
    </div>

十八、 選單

  1. http://v3.bootcss.com/components/#nav
  2. 用清單<ul>搭配.nav來做成純選單,.nav-tabs及.nav-pills可定義其外觀,.nav-stacked可做成垂直選單,.nav-justified則可把選項分散對齊。
    <ul class="nav navbar-nav">
        <li><a href="#">首頁</a></li>
        <li><a href="service">服務項目</a></li>
        <li><a href="#about">關於我們</a></li>
        <li><a href="#contact">聯繫我們</a></li>
        <li><a href="#map">工作室位置</a></li>
    </ul>
    
  3. 若要將其中的「服務項目」選項做成下拉選單,需加入:
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
       </ul>
    </li>

十九、 各種組件顏色總整理

 

前景色

背景色

按鈕

表格

表單

標籤

警告

列表

面板

muted灰

.text-muted

 

.btn-default

.active

 

label-default

 

 

 

primary深藍

.text-primary

.bg-primary

.btn-primary

 

 

label-primary

 

 

panel-primary

success綠

.text-success

.bg-success

.btn-success

.success

.has-success

label-success

alert-success

list-group-item-success

panel-success

info淺藍

.text-info

.bg-info

.btn-info

.info

 

label-info

alert-info

list-group-item-info

panel-info

warning橘黃

.text-warning

.bg-warning

.btn-warning

.warning

.has-warning

label-warning

alert-warning

list-group-item-warning

panel-warning

danger紅

.text-danger

.bg-danger

.btn-danger

.danger

.has-error

label-danger

alert-danger

list-group-item-danger

panel-danger

二十、導覽列

  1. http://v3.bootcss.com/components/#nav
  2. 我們可以將原來的選單,利用<nav>括大成導覽列,其架構如下(.navbar-fixed-top是將選單固定在上方):
    <nav class="navbar navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                選單標題
            </div>
            原本<ul>選單
        </div>
    </nav>
  3. 若需要修改選項顏色,可自行加入CSS樣式表

    /*選單項目*/
    ul.nav>li>a {
        color: white;
    }
    
    /*滑鼠移過選單項目時*/
    ul.nav>li>a:hover {
        background-color: transparent;
        border-bottom: 3px solid #ff7f00;
    }
    
    /*焦點在項目上時*/
    ul.nav>li>a:focus {
        background-color: transparent;
        border-bottom: 3px solid red;
    }
    
    /*開啟下拉選單時*/
    ul.nav>li.open>a,
    ul.nav>li.open>a:hover {
        background-color: transparent;
        color: yellow;
    }
  4. 若點選選項,卻遮住,可以在標題上方加入空白已避免被固定選單遮住:

    .page-header{
      padding-top:60px;
    }
  5. 「選單標題」可套用.navbar-brand

    <a class="navbar-brand" href="#">點兩下電腦工作室</a>
    
  6. 若要做成自適應選單,則將選單包起來,並給一個ID(id="myNavbar"),搭配.collapse navbar-collapse,利用.navbar-right可以讓選單靠右邊。

  7. 而原本標題部份須加上一個切換按鈕button,並設定其啟動事件為data-toggle="collapse",作用目標剛指定的選單ID(data-target="#myNavbar"):

    <nav class="navbar navbar-fixed-top" id="navbar-spy">
        <div class="container">
            <div class="navbar-header">
                選單標題
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>
    
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">首頁</a></li>
                    ...略...
                </ul>
            </div>
        </div>
    </nav>
  8. 若縮小後,由於透明背景看不到切換按鈕,可以,自行加入切換按鈕的樣式設定:
    .navbar-toggle .icon-bar{
        background-color: #fff;
    }

二十一、滑動監視

  1. 指選單可根據目前頁面位置自動切換到對應選項。
  2. <nav>加上一個ID,例如:
    <nav class="navbar navbar-fixed-top" id="navbar-spy">
  3. <body> 須加入data-target,將目標鎖定在剛剛設定的ID上,並透過data-spy來指定啟動事件:
    <body data-target="#navbar-spy" data-spy="scroll">

二十二、自動縮小選單

  1. 當畫面捲動時,透明背景的導覽列會看不清楚,故當畫面捲動時,可改變一下選單的CSS設定,我們先設定一個新的選單樣式:
    .mini_menu {
        padding-bottom: 10px;
        background: #000 url('images/min-header.jpg') top left /cover;
        border-bottom: 1px solid #156785;
        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.4);
    }
  2. 接著加入javascript,讓瀏覽器偵測,一旦有捲動,就套用新的樣式外觀:

    <script>
      $(function() {
          $(window).scroll(scroll_style);
      });
    
      function scroll_style() {
          var window_top = $(window).scrollTop();
          if (window_top > 2) {
              $(".navbar").addClass("mini_menu");
          } else {
              $(".navbar").removeClass("mini_menu");
          }
      }
    </script>

二十三、簡易滾動視差

  1. 先設置一個固定背景圖的樣式,如:
    .parallax {
        background: #ffffff url('images/bg.jpg') center center/cover no-repeat fixed;
        min-height: 300px;
        padding: 30px 0px;
    }
  2. 接著將該樣式套用到div上,並包住 container容器即可。

    <div class="parallax">
        <div class="container">
        </div>
    </div>
    

     

 

 

 


:::

書籍目錄

展開 | 闔起

線上使用者

49人線上 (9人在瀏覽線上書籍)

會員: 0

訪客: 49

更多…