[1061] XOOPS佈景設計
一、 BootStrap網站
- 官網：http://getbootstrap.com/
- 正體中文手冊：https://kkbruce.tw/bs3
- 簡體中文手冊：http://v3.bootcss.com/
- 範例：http://www.candoapp.net/
- 向量圖：http://www.flaticon.com/
- 線上語法測試：https://codepen.io/pen/
- 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>
- 利用.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>
|
.text-muted |
|
.btn-default |
.active |
|
label-default |
|
|
|
|
.text-primary |
.bg-primary |
.btn-primary |
|
|
label-primary |
|
|
panel-primary |
|
.text-success |
.bg-success |
.btn-success |
.success |
.has-success |
label-success |
alert-success |
list-group-item-success |
panel-success |
|
.text-info |
.bg-info |
.btn-info |
.info |
|
label-info |
alert-info |
list-group-item-info |
panel-info |
|
.text-warning |
.bg-warning |
.btn-warning |
.warning |
.has-warning |
label-warning |
alert-warning |
list-group-item-warning |
panel-warning |
|
.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>