:::

3-4 style.css 動態標題背景

4-1 bootstrap/index.html next

[1061] XOOPS佈景設計

4. BootStrap響應式框架

一、 BootStrap網站

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

二、 BootStrap（v3.3.7）基本頁面

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

三、格線系統

容器：「.container」最大寬度為1170px左右；「.container-fluid」則是滿版容器。
同一個頁面中可以同時分開使用，但不可互相套嵌使用。

格線系統：將畫面分成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>

.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

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>
```

有時候，某些欄位內容較多

<div class="clearfix visible-sm-block"></div>

若是一個row裡面的col超過12時，會再獨立另一個row出來。
注意，只要是放在col-xx中，就一定會有所謂的gutter（欄和欄之間的間距）
「.col-md-4 .col-md-offset-4」-offset代表跳過4格，會出現在中間佔4格
當螢幕大於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>
```

四、排版

http://v3.bootcss.com/css/#type
Bootstrap將<body>和所有段落元素的font-size預設為 14px，line-height預設為 1.428。<p>元素的margin-bottom預設了 1/2 行高（即 10px）
段落中內容對齊（在表格中無效）：.text-left（靠左對齊）；.text-center（置中對齊）；.text-right（靠右對齊）；.text-justify（分散對齊）；.text-nowrap（不換行）
向左浮動是.pull-left；向右浮動是.pull-right；要清除浮動則用.clearfix
顯示某元件可套用.show，隱藏某元件則用.hidden
練習素材

自己設定字型的CSS（字型網站）：

@font-face {
    font-family: myfont;
    src: url('setofont.ttf');
}

五、表格

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

六、水平表單

表單基本結構如下，.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>

每組表單可套用.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>

調整表單大小：較大表單組.form-group-lg，較小表單組.form-group-sm
除了radio及chechbox外，其他表單均可加入.form-control美化之。
radio及chechbox選項可用<label>包住，並用.radio-inline或.chechbox-inline來將選項水平化。
在表單中若只是要呈現一般文字，可套用.form-control-static看起來較美觀。
.help-block可用於表單的說明文字

七、按鈕

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

八、輸入框組

利用.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>

九、圖片

圖片可用.img-responsive使之自適應，若要讓套用.img-responsive的圖片置中，請搭配.center-block，而非.text-center。
圖片還有三種樣式：（圓角）.img-rounded；（圓形）.img-circle；（外框）.img-thumbnail

十、自適應工具

搭配 hidden-*及 visible-*，可設定在哪些尺寸下哪些元件要隱藏，哪些要顯示，詳情請看http://v3.bootcss.com/css/#responsive-utilities

下例在小尺寸螢幕中，會以另一張不同比例的圖來顯示：

<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">

十一、圖示

建議使用Font Awesome取代內建圖示：http://fontawesome.io，下載解壓，將其中的CSS和Fonts等目錄放至和index.html同一層即可，並於index.html引入css檔。
```
<link href="css/font-awesome.min.css" rel="stylesheet">
```
套用圖示，.fa-5x是放大5倍，用.fa-fw可固定寬度，另aria-*是用於其他裝置，如螢幕閱讀器，跟一般人的畫面顯示幾乎沒有關係。
```
<i class="fa fa-desktop fa-5x" aria-hidden="true"></i>
```

可利用.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>

插圖部份用http://www.flaticon.com的向量圖示會更好。

十二、標籤與徽章

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

十三、頁面標題

利用.page-header搭配<h1>主標題<small>副標題，可做出精美標題組

<div class="page-header">
  <h1>點兩下電腦工作室 <small>只要點兩下滑鼠，這個世界就能連起更多友善的網</small></h1>
</div>

十四、縮圖組及媒體組

利用.thumbnail將圖文包住，文字部份用.caption包住，會產生一組上圖下文帶框的縮圖組。

<div class="thumbnail">
    <img src="圖">
    <div class="caption">
        <h3>標題</h3>
        <p>內文</p>
    </div>
</div>

利用.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框及巨幕

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

十六、列表組

利用清單元件搭配.list-group及.list-group-item，即可產生類似表格的圓角列表組。

<ul class="list-group">
  <li class="list-group-item">列表1</li>
  <li class="list-group-item">列表2</li>
</ul>

可搭配<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>

十七、面板組

利用.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>

十八、選單

http://v3.bootcss.com/components/#nav

用清單<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>

若要將其中的「服務項目」選項做成下拉選單，需加入：

<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

二十、導覽列

http://v3.bootcss.com/components/#nav

我們可以將原來的選單，利用<nav>括大成導覽列，其架構如下（.navbar-fixed-top是將選單固定在上方）：

<nav class="navbar navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            選單標題
        </div>
        原本<ul>選單
    </div>
</nav>

若需要修改選項顏色，可自行加入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;
}

若點選選項，卻遮住，可以在標題上方加入空白已避免被固定選單遮住：
```
.page-header{
  padding-top:60px;
}
```

「選單標題」可套用.navbar-brand

<a class="navbar-brand" href="#">點兩下電腦工作室</a>

若要做成自適應選單，則將選單包起來，並給一個ID（id="myNavbar"），搭配.collapse navbar-collapse，利用.navbar-right可以讓選單靠右邊。

而原本標題部份須加上一個切換按鈕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>

若縮小後，由於透明背景看不到切換按鈕，可以，自行加入切換按鈕的樣式設定：
```
.navbar-toggle .icon-bar{
    background-color: #fff;
}
```

二十一、滑動監視

指選單可根據目前頁面位置自動切換到對應選項。

<nav>加上一個ID，例如：

<nav class="navbar navbar-fixed-top" id="navbar-spy">

<body> 須加入data-target，將目標鎖定在剛剛設定的ID上，並透過data-spy來指定啟動事件：
```
<body data-target="#navbar-spy" data-spy="scroll">
```

二十二、自動縮小選單

當畫面捲動時，透明背景的導覽列會看不清楚，故當畫面捲動時，可改變一下選單的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);
}

接著加入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>

二十三、簡易滾動視差

先設置一個固定背景圖的樣式，如：

.parallax {
    background: #ffffff url('images/bg.jpg') center center/cover no-repeat fixed;
    min-height: 300px;
    padding: 30px 0px;
}

接著將該樣式套用到div上，並包住 container容器即可。

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

3-4 style.css 動態標題背景

4-1 bootstrap/index.html next

友善列印 & 下載 PDF 匯出 MarkDown 格式

:::

搜尋

進階搜尋

QR Code 區塊

https%3A%2F%2Ftad0616.net%2Fmodules%2Ftad_book3%2Fpage.php%3Ftbdsn%3D1307%26tbsn%3D42

快速登入

書籍目錄

展開 | 闔起

線上使用者

69人線上 (7人在瀏覽線上書籍)

會員: 0

訪客: 69

更多…

4. BootStrap響應式框架

一、 BootStrap網站

二、 BootStrap（v3.3.7）基本頁面

三、 格線系統

四、 排版

五、 表格

六、 水平表單

七、 按鈕

八、 輸入框組

九、 圖片

十、 自適應工具

十一、 圖示

十二、 標籤與徽章

十三、 頁面標題

十四、 縮圖組及媒體組

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

十六、 列表組

十七、 面板組

十八、 選單

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