:::
3-4 style.css 動態標題背景
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) 的組合建立頁面佈局。
<divclass="container"><divclass="row"><divclass="col-md-3"><h2>XOOPS 網站架設</h2></div><divclass="col-md-3"><h2>XOOPS 模組開發</h2></div><divclass="col-md-3"><h2>XOOPS 佈景設計</h2></div><divclass="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欄。
<divclass="col-md-3 col-sm-6"><h2>XOOPS 網站架設</h2></div> - 有時候，某些欄位內容較多
<divclass="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時，就會變成文字在上，圖片在下的單欄模式：
<divclass="row"><divclass="col-md-6 col-md-push-6">文字</div><divclass="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（字型網站）：
1@font-face {2font-family: myfont;3src:url('setofont.ttf');4}
五、 表格
- .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
<formaction="#"class="form-horizontal"role="form"><divclass="form-group"><labelclass="col-sm-2 control-label">標籤</label><divclass="col-sm-10"><inputtype="text"class="form-control"></div></div></form> - 每組表單可套用.form-group，可同時搭配.has-success（綠）.has-warning（黃）.has-error（紅）來呈現不同表單狀態。若有使用.has-feedback還可以在有.form-control的框中插入圖示。
<divclass="form-group has-success has-feedback"><labelclass="col-sm-2 control-label">姓名：</label><divclass="col-sm-10"><inputtype="text"name="user_name"class="form-control"placeholder="請輸入姓名"><spanclass="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包住。
<divclass="input-group"><spanclass="input-group-addon">關鍵字</span><inputtype="text"class="form-control"><spanclass="input-group-btn"><buttonclass="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
- 下例在小尺寸螢幕中，會以另一張不同比例的圖來顯示：
<imgsrc="images/header.jpg"alt="logo"class="img-responsive hidden-xs"><imgsrc="images/header_xs.jpg"alt="logo"class="img-responsive visible-xs-block">
十一、 圖示
- 建議使用Font Awesome取代內建圖示：http://fontawesome.io，下載解壓，將其中的CSS和Fonts等目錄放至和index.html同一層即可，並於index.html引入css檔。
<linkhref="css/font-awesome.min.css"rel="stylesheet"> - 套用圖示，.fa-5x是放大5倍，用.fa-fw可固定寬度，另aria-*是用於其他裝置，如螢幕閱讀器，跟一般人的畫面顯示幾乎沒有關係。
<iclass="fa fa-desktop fa-5x"aria-hidden="true"></i> - 可利用.fa-stack 組合不同圖示
<spanclass="fa-stack fa-5x"><iclass="fa fa-circle-thin fa-stack-2x text-info"></i><iclass="fa fa-desktop fa-stack-1x"></i></span> - 插圖部份用http://www.flaticon.com的向量圖示會更好。
十二、 標籤與徽章
- 利用.label可以做出圓角文字標籤，其顏色請參考「顏色」單元
<spanclass="label label-primary">標籤內容</span> - 利用.badge通常用來顯示數字，類似FB未讀資訊那種。若放在按鈕中，會以反白顯示。
<spanclass="badge">12</span>
十三、 頁面標題
- 利用.page-header搭配<h1>主標題<small>副標題，可做出精美標題組
<divclass="page-header"><h1>點兩下電腦工作室 <small>只要點兩下滑鼠，這個世界就能連起更多友善的網</small></h1></div>
十四、 縮圖組及媒體組
- 利用.thumbnail將圖文包住，文字部份用.caption包住，會產生一組上圖下文帶框的縮圖組。
<divclass="thumbnail"><imgsrc="圖"><divclass="caption"><h3>標題</h3><p>內文</p></div></div> - 利用.media將圖文包住，圖片用.media-left，文字部份用.media-body 包住，會產生一組左圖右文的媒體組。當圖使用.media-right時，應置於.media-body之後，會變成右圖左文。
<divclass="media"><divclass="media-left"><ahref="#"><imgsrc="圖"></a></div><divclass="media-body"><h4class="media-heading">媒體標題</h4>內文</div></div>
十五、 警告提示框組、well框及巨幕
- 利用.alert搭配各種alert顏色，可做出精美圓角外框的警告或提示框組，若裡面有連結，可在連結中用 .alert-link，即可以為連結設置與當前警告框相符的顏色。
<divclass="alert alert-info">相關內容</div> - .well一樣是圓角框，只能設大小如.well-lg無法設顏色，一律為淺灰色。
<divclass="well">相關內容</div> - .jumbotron用於醒目的需求下，除了有灰色框外，裡面的內容會被放大。
<divclass="jumbotron"><h1>標題</h1><p>文字</p></div>
十六、 列表組
- 利用清單元件搭配.list-group及.list-group-item，即可產生類似表格的圓角列表組。
<ulclass="list-group"><liclass="list-group-item">列表1</li><liclass="list-group-item">列表2</li></ul> - 可搭配<a>連結或<button>按鈕來使用。.list-group-item亦可套用顏色
<divclass="list-group"><ahref="#"class="list-group-item active">選項1</a><ahref="#"class="list-group-item">選項2</a></div>
十七、 面板組
- 利用.panel搭配.panel-heading及.panel-title或 .panel-body或.panel-footer，即可產生類似表格的圓角面板組。其中可搭配列表組或表格一起使用。
<divclass="panel panel-primary"><divclass="panel-heading"><h3class="panel-title">面板標題</h3></div><divclass="panel-body">面板內容</div><divclass="panel-footer">面板註腳</div></div>
十八、 選單
- http://v3.bootcss.com/components/#nav
- 用清單<ul>搭配.nav來做成純選單，.nav-tabs及.nav-pills可定義其外觀，.nav-stacked可做成垂直選單，.nav-justified則可把選項分散對齊。
<ulclass="nav navbar-nav"><li><ahref="#">首頁</a></li><li><ahref="service">服務項目</a></li><li><ahref="#about">關於我們</a></li><li><ahref="#contact">聯繫我們</a></li><li><ahref="#map">工作室位置</a></li></ul> - 若要將其中的「服務項目」選項做成下拉選單，需加入：
<liclass="dropdown"><ahref="#"class="dropdown-toggle"data-toggle="dropdown">Page 1 <spanclass="caret"></span></a><ulclass="dropdown-menu"><li><ahref="#">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是將選單固定在上方）：
<navclass="navbar navbar-fixed-top"><divclass="container"><divclass="navbar-header">選單標題</div>原本<ul>選單</div></nav> -
若需要修改選項顏色，可自行加入CSS樣式表
/*選單項目*/ul.nav>li>a {color:white;}/*滑鼠移過選單項目時*/ul.nav>li>a:hover {background-color:transparent;border-bottom:3pxsolid#ff7f00;}/*焦點在項目上時*/ul.nav>li>a:focus {background-color:transparent;border-bottom:3pxsolidred;}/*開啟下拉選單時*/ul.nav>li.open>a,ul.nav>li.open>a:hover {background-color:transparent;color: yellow;} -
若點選選項，卻遮住，可以在標題上方加入空白已避免被固定選單遮住：
.page-header{padding-top:60px;} -
「選單標題」可套用.navbar-brand
<aclass="navbar-brand"href="#">點兩下電腦工作室</a> -
若要做成自適應選單，則將選單包起來，並給一個ID（id="myNavbar"），搭配.collapse navbar-collapse，利用.navbar-right可以讓選單靠右邊。
-
而原本標題部份須加上一個切換按鈕button，並設定其啟動事件為data-toggle="collapse"，作用目標剛指定的選單ID（data-target="#myNavbar"）：
<navclass="navbar navbar-fixed-top"id="navbar-spy"><divclass="container"><divclass="navbar-header">選單標題<buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target="#myNavbar"><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button></div><divclass="collapse navbar-collapse"id="myNavbar"><ulclass="nav navbar-nav navbar-right"><li><ahref="#">首頁</a></li>...略...</ul></div></div></nav> - 若縮小後，由於透明背景看不到切換按鈕，可以，自行加入切換按鈕的樣式設定：
.navbar-toggle .icon-bar{background-color:#fff;}
二十一、滑動監視
- 指選單可根據目前頁面位置自動切換到對應選項。
- <nav>加上一個ID，例如：
<navclass="navbar navbar-fixed-top"id="navbar-spy"> - <body> 須加入data-target，將目標鎖定在剛剛設定的ID上，並透過data-spy來指定啟動事件：
<bodydata-target="#navbar-spy"data-spy="scroll">
二十二、自動縮小選單
- 當畫面捲動時，透明背景的導覽列會看不清楚，故當畫面捲動時，可改變一下選單的CSS設定，我們先設定一個新的選單樣式：
.mini_menu {padding-bottom:10px;background:#000url('images/min-header.jpg')topleft/cover;border-bottom:1pxsolid#156785;box-shadow:0px5px5px-3pxrgba(0,0,0,0.4);} -
接著加入javascript，讓瀏覽器偵測，一旦有捲動，就套用新的樣式外觀：
<script>$(function() {$(window).scroll(scroll_style);});functionscroll_style() {varwindow_top = $(window).scrollTop();if(window_top > 2) {$(".navbar").addClass("mini_menu");}else{$(".navbar").removeClass("mini_menu");}}</script>
二十三、簡易滾動視差
- 先設置一個固定背景圖的樣式，如：
.parallax {background:#ffffffurl('images/bg.jpg')centercenter/coverno-repeatfixed;min-height:300px;padding:30px0px;} -
接著將該樣式套用到div上，並包住 container容器即可。
<divclass="parallax"><divclass="container"></div></div>
:::
搜尋
QR Code 區塊
快速登入
