Quantcast
Channel: 網頁資源 –梅問題．教學網
Viewing all 164 articles
Browse latest View live
↧

FlatIcon免費上萬個平面化UI圖示平台，要多少下載多少

June 13, 2016, 3:00 pm
$
0
0
梅問題－FlatIcon上萬個平面化UI圖示免費平台，要多少下載多少
　　先前梅干曾分享過icomoon這個平台，在這個平台中提供了各式各樣的UI圖示，與一般免費的圖示平台最大不同點在於，使用者可以依需求，選擇自己所需要的圖示，並打包發佈一份屬於自己的Icon Fonts，如此一來瀏覽者也不用下載一大包，二來也可加速網站的載入速度，除了iconmoon這平台外，梅干最近也發現另一個平台，除了與icomoon一樣使用者可以依需求，要多少下載多少外，裡面提供的圖示更多元，且全部扁平化，同時也有提供Photoshop、Illstrator的外掛套件，讓你直接在影像工具中就可使用這些圖示，除此之外該平台提供的格式也相當的多，像是SVG、PNG、PSD..外，還有WebFont等多種格式，因此身為網頁設計的朋友，也趕快來看看囉!
FlatIcon
網站名稱：FlatIcon
連結網址：http://www.flaticon.com/
Step1
進入網站後，可透過上方的搜尋框輸入要找尋圖兆的關鍵字。
梅問題－FlatIcon上萬個平面化UI圖示免費平台，要多少下載多少
Step2
或是向下拉，也會看到目前較受歡迎的圖示有那些。
梅問題－FlatIcon上萬個平面化UI圖示免費平台，要多少下載多少
Step3
點一下進入後，就可看到所有的圖示的縮圖，當滑鼠滑到上方時，分別會出現是要加入收藏還是要預覽。
梅問題－FlatIcon上萬個平面化UI圖示免費平台，要多少下載多少
Step4
點預覽圖示後，下方就可看到可下載的檔案格式外，上方的灰色鈕，也可將該圖示加入收藏。
梅問題－FlatIcon上萬個平面化UI圖示免費平台，要多少下載多少
Step5
當把圖示加入收藏後，在畫面的右上角就會看到已加入的收藏圖示的數量，點一下就會展開目前已收藏的圖示。
梅問題－FlatIcon上萬個平面化UI圖示免費平台，要多少下載多少
Step6
點一下調色盤就可修改圖示的預設色彩。
梅問題－FlatIcon上萬個平面化UI圖示免費平台，要多少下載多少
Step7
甚至還可自訂圖示名稱。
梅問題－FlatIcon上萬個平面化UI圖示免費平台，要多少下載多少
Step8
定義好名稱後，再按右上的Back鈕返回。
梅問題－FlatIcon上萬個平面化UI圖示免費平台，要多少下載多少
Step9
當圖示已被收藏時，四周就會出現虛線框。
梅問題－FlatIcon上萬個平面化UI圖示免費平台，要多少下載多少
Step10
都選擇與設定好後，再點下方的Download鈕。
梅問題－FlatIcon上萬個平面化UI圖示免費平台，要多少下載多少
Step11
接著再點右邊的Free downlad
梅問題－FlatIcon上萬個平面化UI圖示免費平台，要多少下載多少
Step12
下載回來解壓縮後，就會看到各式各樣的檔案格式。
梅問題－FlatIcon上萬個平面化UI圖示免費平台，要多少下載多少
Step13
而WebFont算是梅干比較常用的，這時進入font資料夾後，再點flaticon.html。
梅問題－FlatIcon上萬個平面化UI圖示免費平台，要多少下載多少
Step14
接著就會看到該圖示的套用方法，與圖示的名稱，剛floaticon也有提供Photoshop、Illustrator、AfterEffects的外掛套件可使用 因此也可以將foation的圖示直接引用到軟體中啦!
梅問題－FlatIcon上萬個平面化UI圖示免費平台，要多少下載多少
↧
Search

Bootstrap導覽列擴充，電腦版滑入展開與第一層支援連結

June 14, 2016, 3:00 pm
$
0
0
梅問題-Bootstrap教學－Bootstrap導覽列擴充，電腦版滑入展開，與第一層支援連結
　　先前梅干曾分享過，將Bootstrap的導覽列透過CSS設定後，將click點擊開啟選單變成hover滑入展開，但這樣的第一層選單都無法有連結效果，必需在第二層才能連結，這對於有些朋友若把第一層設為大分類時，就無法展開，所以梅干最近就花了點時間，將Bootstrap的導覽列再作擴充，讓它在電腦版時，滑入選單可以展開子選單，當點擊第一層選單連結時，則會開啟連結， 若在手機版時，則會變成點選的方式，當點後方的三角形則是展開選單，點前方的選單名稱，則會開啟連結，如此一來就更符合大家的使用經驗，至於要怎麼來修改呢?有在使用Bootstrap的朋友，也一塊來看看囉!
Step1
加入CSS樣式，當在螢幕解晰小於480時，就套用此樣式，而此樣式是將原來的倒三角形，加入一些效果。
/*當視窗小於480時，套用此樣式*/
@media (max-width: 480px) {
    .caret::before{
        content: '▾';
        color: #fff;
        font-size: 24px;
        line-height: 28px;
    }
    .caret{
            display: inline-block;
            text-align: center;
            float: right;
            width: 50px;
            height: 30px;
            background: #111;
            border: 0;
            margin-right: -10px;
            border-radius: 30px;
            margin-top: -5px;
    }
    .dropdown-menu{
                position: relative;
                width: 100%;
                background: transparent;
    }
    .dropdown-menu>li>a{
         color: #9d9d9d;
    }
  }
Step2
加入javascript控制，在電腦版時，滑入時展開，同時第一層也支援可連結，當在手機版時，點選倒三角形展開選單，點選單名稱，則會開啟連結。
$(function(){
    $('ul.nav li.dropdown>a').click(function(){
        location.href = $(this).attr('href');
    });

    $('.caret').click(function(){
        $(this).parent().next('ul').slideToggle();
            $(this).parent().parent().addClass('dropdown');
  			$(this).parent().parent().toggleClass('open');      
        return false;
    });
	//當視窗大於480時，滑入展開選單
     if($(window).width() > 480){
           $('ul.nav li.dropdown').hover(function() {
              $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
           }, function() {
              $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
          });
      }
});
Step3
完成後，在電腦時，滑入選單時就會展開子選單，當點擊選單則會開啟連結。
梅問題-Bootstrap教學－Bootstrap導覽列擴充，電腦版滑入展開，與第一層支援連結
Step4
當在手機模式下時，點選後方的倒三角形則會開啟選單。
梅問題-Bootstrap教學－Bootstrap導覽列擴充，電腦版滑入展開，與第一層支援連結
Step5
點選單名稱時，則會開啟連結，這樣就更符合一般的操控習慣，有在使用bootstrap的朋友，也趕快試試囉!
梅問題-Bootstrap教學－Bootstrap導覽列擴充，電腦版滑入展開，與第一層支援連結
[範例下載] [範例預覽]
↧
↧

Smartmockups 線上各裝置示意畫面模擬合成器

June 21, 2016, 3:00 pm
$
0
0
梅問題－Smartmockups線上各裝置畫面模擬合成器
　　有時為了讓客戶可以更容易理解，網頁版型與APP界面在實際裝置上的呈現效果，就會將製作好的版型，合成到電腦、平板、手機.....等裝置上作示意，而這時除了自己拍攝素材外，不然就是上網搜尋合適的照片，再把版型合成套用進去，但現在不用麻煩啦!直接透過Smartmockups這平台，就能自動將版型合成到各裝置的螢幕中，且合成的還蠻自然的，同時該平台中，還提供各式各樣的裝置，因此有需要的朋友，也一塊來看看囉!
Smartmockups：
網站名稱：Smartmockups
連結網址：http://smartmockups.com/
Step1
進入網站後，從上方可選擇所需的裝置分類，像是電腦、筆電、平板、手機、手表。
梅問題－Smartmockups線上各裝置畫面模擬合成器
Step2
看到喜歡的縮圖點選後，除了可上傳版型外，也可輸入網址。
梅問題－Smartmockups線上各裝置畫面模擬合成器
Step3
當網站已上線時，直接輸入網站的網址即可。
梅問題－Smartmockups線上各裝置畫面模擬合成器
Step4
過一回網站就會自動合成到剛所選擇的螢幕中，真的是超方便的，當合成完畢後，再點Download鈕，就可選擇所需的尺寸大小。
梅問題－Smartmockups線上各裝置畫面模擬合成器
Step5
這樣就可把剛合成好的示意圖給下載回來啦!
梅問題－Smartmockups線上各裝置畫面模擬合成器
↧

Pingendo免費全視覺化Bootstrap開發工具，設計RWD網頁更直覺

June 29, 2016, 3:00 pm
$
0
0
梅問題－Pingendo免費全視覺化Bootstrap開發工具，設計RWD網頁更直覺
　　先前曾分享過Pinegrow Web Editor這套視覺化的RWD開發工具，透過Pinegrow Web Editor不但可快速的設計出RWD的網頁外，同時支援的模組也相當的多，像是大家所熟悉的Bootstrap、960、Foundation、AngularJS甚至就連Wordpress也可透過Pinegrow來完成，但這麼強大的軟體並非免費，若今天只需使用到Bootstrap來開發RWD的網頁，最近梅干發現另一套，與Pinegrow Web Editor相當雷同的工具，除了視覺化的操作界面，並全面的支援Bootstrap與內建Bootstrap特效，直接拖拉即可完成，因此對於不習慣寫code的朋友，這款Pingendo免費的RWD開發工具，不妨可考慮一下囉!
Pingendo
軟體名稱：Pingendo
軟體性質：免費
支援平台：Windows/MAC/Liunx
下載網址：http://pingendo.com/
Step1
進到軟體網站後，從下方可選擇自己所需的平台，目前支援三大系統，因此無論是使用windows、mac、liunx都可用。
梅問題－Pingendo免費全視覺化Bootstrap開發工具，設計RWD網頁更直覺
Step2
下載安裝完畢後，雙響開啟Pingendo後，點一下畫面中的文字，就可建立新網頁。
梅問題－Pingendo免費全視覺化Bootstrap開發工具，設計RWD網頁更直覺
Step3
接著選擇左邊的空白頁面。
梅問題－Pingendo免費全視覺化Bootstrap開發工具，設計RWD網頁更直覺
Step4
進入軟體後，可看到畫面相當的簡潔，左邊是所有Bootstrap的元件區，右邊是屬性設定，下方是原始碼區，中間是工作區。
梅問題－Pingendo免費全視覺化Bootstrap開發工具，設計RWD網頁更直覺
Step5
操作方式很簡單，採全面拖拉的方式。
梅問題－Pingendo免費全視覺化Bootstrap開發工具，設計RWD網頁更直覺
Step6
當拖曳進來的元素，可透過右邊來修改屬性。
梅問題－Pingendo免費全視覺化Bootstrap開發工具，設計RWD網頁更直覺
Step7
而在廣告輪播系統，不得不稱讚一下Pingendo，設計的相當方便與好控制。
梅問題－Pingendo免費全視覺化Bootstrap開發工具，設計RWD網頁更直覺
Step8
甚至在媒體區域中，有各式各樣的元件可使用，因此有了這工具後，要將RWD頁面套用Bootstrap就更加的簡單，重點是完全免費，身為網設的你也趕快來試試囉!
梅問題－Pingendo免費全視覺化Bootstrap開發工具，設計RWD網頁更直覺
↧

MsgUs.io將Facebook Messenger變成網站線上客服區塊產生器

July 4, 2016, 3:00 pm
$
0
0
梅問題－MsgUs.io將Facebook Messenger變成網站線上客服產生器
　　早期可透過微軟的MSN變成網站的線上客服，讓網友可以即時的與客服人員溝通，但自從MSN與Skype合併之後，這服務也跟著消失了，因此先前梅干也曾分享過免費的線上客服系統zopimchat，透過這服務，就可讓網站擁有線上客服，同時該服務除了web也有推出APP，讓新訊息可以即時的通知線上客服人員，而除了zopimchat外，現在就連Facebook也可變成線上客服系統，同時方法很簡單，只需透過MsgUs.io這個平台，立即就能產生出Facebook網站上線客服的機制，且只要有Facebook都可使用，至於要怎麼設定呢?現在就一塊來看看吧!!
MsgUs.io
網站名稱：MsgUs.io 網站連結：http://msgus.io/
Step1
進入MsgUs網站後，點一下Get Your Button鈕。
梅問題－MsgUs.io將Facebook Messenger變成網站線上客服產生器
Step2
接著輸入自己Facebook的頁面名稱，與輸入框要出現的訊息，和按鈕的圖示，目前只有藍、白二色可選擇。
梅問題－MsgUs.io將Facebook Messenger變成網站線上客服產生器
Step3
都設定後好後，向下拉將第三步驟中輸入框的原始碼複製起來。
梅問題－MsgUs.io將Facebook Messenger變成網站線上客服產生器
Step4
貼到網頁</body>結尾上方，這樣就大功告成。
梅問題－MsgUs.io將Facebook Messenger變成網站線上客服產生器
Step5
重新整理網頁後，在畫面的右下角就會看到Facebook的圖示，點一下後會登入Facebook Message，當網友發送來訊息，會在自己Facebook的聊天室中出現，因此有了這服務後，就可增加與網友的黏著度，有在經營網站的朋友，千萬別錯過了。
梅問題－MsgUs.io將Facebook Messenger變成網站線上客服產生器
↧
↧

Bootstrap Carousel廣告輪播自動調整大小與單則隱藏控制鈕

July 12, 2016, 3:00 pm
$
0
0
梅問題－Bootstrap Carousel廣告輪播自動調整大小與單則隱藏控制鈕
　　Bootstrap內建了許多實用互動特效，由其是它的廣告輪播系統，相當的方便且好用套用，同時也提供許多自訂的選項，像是輪播廣告的文字、連結、預設起始廣告....等，這些完全不用寫任何的Javascript，只需由html的標籤就可進行控制，雖然說相當的方便，但卻有個美中不足的地方，就是每當廣告輪播的尺寸若不是1170px二旁就會出現露白現象，以及廣告輪播只有一則時，畫面則會出現播放的控制鈕，因此梅干就來分享一下，如何讓廣告輪播依圖片的素材自動調整，以及單則廣告時隱藏控制鈕。
Bootstrap Carousel廣告輪播尺寸自動調整：
Step1
首先，先在container後加入coverflow，與加入下方的javascript。
$(function(){
   $('.coverflow').css('max-width',$('.coverflow img').width());
});
梅問題－Bootstrap Carousel廣告輪播自動調整大小與單則隱藏控制鈕
Step2
完成後，就會看到，原先右邊的露白立即就被修正。
梅問題－Bootstrap Carousel廣告輪播自動調整大小與單則隱藏控制鈕
#修正後
梅問題－Bootstrap Carousel廣告輪播自動調整大小與單則隱藏控制鈕
Bootstrap Carousel廣告輪播單則隱藏控制鈕：
Step1
將下方的javascript加入。
if ($('.coverflow .carousel-inner div.item').length < 2 ) { 
	$('.carousel-indicators, .carousel-control').hide();
}
梅問題－Bootstrap Carousel廣告輪播自動調整大小與單則隱藏控制鈕
Step2
加入後，所有的控制鈕就會被隱藏起來，當二則以上就會自動再出現，這樣是不是超方便的呀!
梅問題－Bootstrap Carousel廣告輪播自動調整大小與單則隱藏控制鈕
↧

HTTrack Website Copier砍站軟體!一鍵將網站的所有資料全部下載回來

July 19, 2016, 3:00 pm
$
0
0
梅問題－HTTrack Website Copier砍站軟體!一鍵將網站中的所有資料全部打包回來
　　最近有朋友問梅干，要怎麼將網站備份下來，梅干看了一下網站都是.html的靜態頁面，且網站的結構也很清楚，想說這不就FTP把資料抓回來就好了嗎?結果才知道，原來這些頁面都是透過後台的所產生的，本來想說就手動一一的備份就好，但看一看頁面還真不少，這時才讓梅干想到，好久沒用的砍站軟體，所以就把N年前的軟體給翻出來，終於順利的將網站完整的給備份下來，因此有需要的朋友，也一塊來看看吧!
HTTrack：
軟體名稱：HTTrack
軟體性質：免費
連結網址：https://www.httrack.com/
Step1
進入網站後，點上方的Download，再從下方選擇所需的版本。
梅問題－HTTrack Website Copier砍站軟體!一鍵將網站中的所有資料全部打包回來
Step2
下載完畢雙響啟用後，先按下一步。
梅問題－HTTrack Website Copier砍站軟體!一鍵將網站中的所有資料全部打包回來
Step3
接著設定專案名稱，以及要存放的位置。
梅問題－HTTrack Website Copier砍站軟體!一鍵將網站中的所有資料全部打包回來
Step4
再輸入要砍站的網址。
梅問題－HTTrack Website Copier砍站軟體!一鍵將網站中的所有資料全部打包回來
Step5
都設定好後，再按下方的完成。
梅問題－HTTrack Website Copier砍站軟體!一鍵將網站中的所有資料全部打包回來
Step6
這時就放著給他下載吧!
梅問題－HTTrack Website Copier砍站軟體!一鍵將網站中的所有資料全部打包回來
Step7
當全部都下載完畢後，再按完成退出。
梅問題－HTTrack Website Copier砍站軟體!一鍵將網站中的所有資料全部打包回來
Step8
接著開啟剛所存放的路徑，就會看到所有網站的結構目錄。
梅問題－HTTrack Website Copier砍站軟體!一鍵將網站中的所有資料全部打包回來
Step9
立馬開啟頁面來檢查一下，不但沒跑版還能正常的顯示，甚至頁面中的有連結，也都能正確的連結到頁面，是不是超方便的呀!
梅問題－HTTrack Website Copier砍站軟體!一鍵將網站中的所有資料全部打包回來
↧

Bootstrap導覽列Navbar中的選單自動齊左、齊右、居中

August 10, 2016, 3:00 pm
$
0
0
梅問題－Bootstrap教學－Navbar導覽列中選單自動齊左、齊右、居中
　　Bootstrap內建了許多的互動特效，且完全無須寫到任何的javascript，只要善用html的標籤，與Bootstrap內建的類別樣式，就可以滿足RWD網頁編排的需求，而今天要分享一個相當常用的特效，那就是導覽列選單，而內建就可將導覽列中的選單齊左、齊右，但有時因版型的規畫，也會有居中的需求，因此這時要如何讓導覽列中的選單居中呢?其實方法也很簡單，現在就一塊來看看，如何讓Bootstrap導覽列中的選單，齊左、齊右、居中。
Step1
當要齊右時，只需在navbar-nav的ul中加入navbar-right。
梅問題－Bootstrap教學－Navbar導覽列中選單自動齊左、齊右、居中
Step2
這時選單就會向右靠齊。
梅問題－Bootstrap教學－Navbar導覽列中選單自動齊左、齊右、居中
Step3
當要齊左時，再將原來的改成navbar-left。
梅問題－Bootstrap教學－Navbar導覽列中選單自動齊左、齊右、居中
Step4
這時選單就向左靠齊。
梅問題－Bootstrap教學－Navbar導覽列中選單自動齊左、齊右、居中
Step5
但要居中時，就得自己手動來加工一下，而作法也很簡單，將下方的CSS樣式加入後，再分別將navbar-collapse-center、navbar-center，加到指定的標籤中，就可實現在導覽列中的選單居中啦!
nav居中樣式：
.navbar-center {
  display: inline-block;
  float: none;
  vertical-align: top;
}
.navbar-collapse-center {
  text-align: center;
}
梅問題－Bootstrap教學－Navbar導覽列中選單自動齊左、齊右、居中
Step6
這時選單就變居中啦!
梅問題－Bootstrap教學－Navbar導覽列中選單自動齊左、齊右、居中
↧
Search

Bootstrap教學－Carousel廣告輪播全面進化(滿版/自動產生圓鈕/單則隱藏控制鈕)

August 17, 2016, 3:00 pm
$
0
0
梅問題－Bootstrap教學－Carousel廣告輪播強化(全版+自動產生圓鈕+單則隱藏控制鈕)
　　Bootstrap中內建了許多特效，而讓梅干最使用到的就是它的廣告輪播系統，不但簡單好用且容易自行擴充，而先前也分享過利用CSS來實現全版式的廣告輪播，雖然說很方便，但卻有比例上的問題，因此在等比縮放時，則會造成下方的控制鈕超出一個頁面，而這與一般的全版式廣告還是有點落差，因此最近梅干就找了點資料，並將先前的幾個特點一併作了擴充，讓這個廣告輪播，不但支援全版廣告外，同時當只有一筆時會自動隱藏控制鈕，以及自動偵測廣告數量，並產生控制的小圓鈕，因此有在使用Bootstrap的朋友們，現在也一塊來看看，如何讓Bootstrap的廣告輪播更進化，現在也一塊來看看囉!
Step1
加入CSS樣式：
.full-screen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.item>a{
    display: block;
    height: 100%;
}
Step2
加入HTML廣告輪播碼，可直接從item中設定啟始值。
<div id="mycarousel" class="carousel slide" data-ride="carousel">
	<ol class="carousel-indicators"></ol>
	<!-- 廣告輪播列表 -->
      <div class="carousel-inner" role="listbox">
        <div class="item">
            <a href="http://www.minwt.com">
                <img src="https://unsplash.it/2000/1250?image=001" data-color="#eee">
                <div class="carousel-caption">
                    <h3>廣告輪播1</h3>
                </div>
            </a>
        </div>
        <div class="item">
            <img src="https://unsplash.it/2000/1250?image=002" data-color="#eee">
            <div class="carousel-caption">
                <h3>廣告輪播2</h3>
            </div>
        </div>
        <div class="item active">
            <img src="https://unsplash.it/2000/1250?image=003" data-color="#eee">
            <div class="carousel-caption">
                <h3>廣告輪播3</h3>
            </div>
        </div>
        <div class="item">
            <img src="https://unsplash.it/2000/1250?image=004" data-color="#eee">
            <div class="carousel-caption">
                <h3>廣告輪播4</h3>
            </div>
        </div>
      </div>
      <!-- Controls -->
      <a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">上一則</span>
      </a>
      <a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">下一則</span>
      </a>
</div>
Step3
加入javascript：
$(function(){
    var $item = $('.carousel .item');
    var $wHeight = $(window).height();
    $item.height($wHeight);
    $item.addClass('full-screen');
    $('.carousel img').each(function() {
      var $src = $(this).attr('src');
      var $color = $(this).attr('data-color');
      $(this).parent().css({
        'background-image' : 'url(' + $src + ')',
        'background-color' : $color
      });
      $(this).remove();
    });
    //下方自動加入控制圓鈕
    var total = $('.carousel .carousel-inner div.item').size();
    append_li();
    function append_li()
    {
        var li = "";
        var get_ac = $( ".carousel .active" );
        var ac =  $( ".carousel .carousel-inner div" ).index( get_ac );
        for (var i=0; i <= total-1; i++){
            if(i == (ac)/2){
                li += "<li data-target='#mycarousel' data-slide-to='"+i+"' class='active'></li>";
            }else{
                li += "<li data-target='#mycarousel' data-slide-to='"+i+"' class=''></li>";
                }
            }
            $(".carousel-indicators").append(li);
        }
    //單則隱藏控制鈕
    if ($('.carousel .carousel-inner div.item').length < 2 ) {
            $('.carousel-indicators, .carousel-control').hide();
    }
    //縮放視窗調整視窗高度
    $(window).on('resize', function (){
      $wHeight = $(window).height();
      $item.height($wHeight);
    });
    //輪播秒數與滑入停止
    $('.carousel').carousel({
      interval: 5000,
      pause: "hover"
    });
});
Step4
當完成後，無論在手機還是桌機中，廣告都會全版並居中呈現，同時圓形的切換鈕都在下方。
梅問題－Bootstrap教學－Carousel廣告輪播強化(全版+自動產生圓鈕+單則隱藏控制鈕)
[範例預覽] [範例下載]
↧
↧

Bootstrap教學－Navbar導覽列選單太長，自動隱藏選單並出現選單按鈕

August 29, 2016, 3:00 pm
$
0
0
梅問題－Bootstrap教學－Navbar導覽列選單太長時，自動出現選單按鈕
　　Bootstrap除了廣告輪播很方便也很好用外，Navbar導覽列也是時常會使用到的功能之一，透過內建的機制，可以將導覽列置頂，甚至將選單齊左、齊右，以及在手機版時，還會自動隱藏選單，變成選單按鈕的形式呈現，而最近梅干在幫一個客戶開發頁時，發現到選單有點長，當在平板瀏覽時，橫向沒問題當橫向時，選單就會被擠到第二排，但又不能減少選單的數量，因此讓梅干思考了很久，最後就是當選單過長時，就自動隱藏並出現選單按鈕，與手機裝置一樣，如此一來就可解決此問題，因此也有遇到此問題的朋友，現在也一塊來看看囉!
Step1
首先，先將導覽列的選項先建立好。
梅問題－Bootstrap教學－Navbar導覽列選單太長時，自動出現選單按鈕
Step2
接著將下面的CSS樣式，複製到Style中。
@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}
Step3
完成後，當平板直向時，選單的長度大於平板寬度，就會自動隱藏導覽列的選單，並出現選單鈕啦!當橫向時就可正常的顯示選單。
梅問題－Bootstrap教學－Navbar導覽列選單太長時，自動出現選單按鈕
[範例預覽]
↧

「M+ FONTS免費雲端字型」讓網頁字型也有超細黑、細黑、粗黑、特黑、超黑體

September 4, 2016, 3:00 pm
$
0
0
梅問題－「M+ FONTS免費雲端字型」讓網頁字型也有超細黑、細黑、粗黑、特黑、超黑體
　　自從Google與Adobe聯手後，讓網頁不再只有新細明體，而無論是Google還是Adobe也都有推出雲端字型，供大家免費使用，讓網頁字型多了一個黑體可選擇，當把網頁字型套用黑體字後，比原來的新細明體漂亮許多，但會發現到，當把文字設為粗體時，卻感覺不出變化性，最主要是因為思黑體接近中黑，因此在加粗時，只有相當細微的變化。 　　而最近梅干發現一個也是來自日本的免費字型，除了提供手機安裝、電腦使用外，甚至還提供了雲端字型，不但完全免註冊，同時還不限流量，經梅干實測後，支援的繁體中文還相當齊全，當有掉字時，則會顯示網頁原來的文字，而不會被清空，更重要的是，這個日文字型，總共提供了六種不同的粗細變化的黑體可選擇，因此想要讓網頁字型有不一樣變化的朋友，現在也一塊來看看。
M+ FONTS
網站名稱：M+ FONTS
連結網址：https://mplus-fonts.osdn.jp/
Step1
進到M+ FONTS的網站後，畫面相當的乾淨，從左邊選擇語系。
梅問題－「M+ FONTS免費雲端字型」讓網頁字型也有超細黑、細黑、粗黑、特黑、超黑體
Step2
進入後，從右上方可看到授權的部分，接著在左邊的選單中，除了有提供文字的下載外，還有支援雲端字型，點一下WEB FONTS。
梅問題－「M+ FONTS免費雲端字型」讓網頁字型也有超細黑、細黑、粗黑、特黑、超黑體
Step3
接著在雲端字型的部分，支援七種類型，從極細到特黑。
梅問題－「M+ FONTS免費雲端字型」讓網頁字型也有超細黑、細黑、粗黑、特黑、超黑體
Step4
至於要如何使用呢?方法也很簡單，將二組CSS加入網頁的head中。
梅問題－「M+ FONTS免費雲端字型」讓網頁字型也有超細黑、細黑、粗黑、特黑、超黑體
Step5
接著下方就是要套用的文字字型。
梅問題－「M+ FONTS免費雲端字型」讓網頁字型也有超細黑、細黑、粗黑、特黑、超黑體
Step6
都複製好後，再依序的貼到自己的專案頁面中。
梅問題－「M+ FONTS免費雲端字型」讓網頁字型也有超細黑、細黑、粗黑、特黑、超黑體
Step7
以及指定要顯示的字型。
梅問題－「M+ FONTS免費雲端字型」讓網頁字型也有超細黑、細黑、粗黑、特黑、超黑體
Step8
鏘~鏘~立即就從黑體變成細黑體啦!且此黑體閱讀起來相當的舒服。
梅問題－「M+ FONTS免費雲端字型」讓網頁字型也有超細黑、細黑、粗黑、特黑、超黑體
Step9
雖然都是黑體字，但有了這七種的不同粗細的變化，讓網頁的字型運用上就更加的便利，而目前中文字的部分，支援度還算不錯，當有掉字時，則會顯示原來的預設字型。
梅問題－「M+ FONTS免費雲端字型」讓網頁字型也有超細黑、細黑、粗黑、特黑、超黑體
↧

Bootstrap教學－Carousel廣告輪播滾動切換變成淡入淡出效果

September 12, 2016, 3:00 pm
$
0
0
梅問題－Bootstrap教學－Carousel廣告輪播切換變成淡入淡出效果
　　先前已經不斷的一直強化Bootstrap內建的廣告輪播系統，除了支援全螢幕外，甚至還會自動產生控制小鈕，以及單則廣告時隱藏所有的控制鈕，讓Bootstrap內建的廣告輪播更加的方便好用，但那天在RWD的分享會中，突然有位同學問到，能否將廣告切換時的左右滾動，變成淡入淡出的效果。 　　這也讓梅干當場楞了一下，梅干還真的從未想過這問題，去調整Bootstrap廣告切換的過場效果，於是梅干上網爬了一下文，發現已有熱心的網友分享了相關的作法，而梅干也將原來的控制碼稍作調整，立即就能讓Bootstrap內建的廣告輪播切換由滾動變成淡入淡出的效果啦!有需要的朋友現在也一塊來看看囉!
Step1
首先將下方的CSS碼，加到網頁中。
.carousel-fade .carousel-inner .item {
	transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
   opacity: 0;
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
    z-index: 2;
}
Step2
接著再把class="carousel slide"的中再加入carousel-fade。
梅問題－Bootstrap教學－Carousel廣告輪播切換變成淡入淡出效果
Step3
都完成之後，無論是自動還是手動切換廣告時，都會以淡入淡出的效果呈現，是不是超EZ的呀!
梅問題－Bootstrap教學－Carousel廣告輪播切換變成淡入淡出效果
[範例預覽] [範例下載]
↧

RWD自適應網頁也可切回電腦版模式(Bootstrap)

September 19, 2016, 3:00 pm
$
0
0
梅問題－RWD網頁也可回到電腦版模式(Bootstrap)
　　現在螢幕的尺寸愈來愈多元化，要讓網頁的版面能符合各個螢幕的大小，這時得透過RWD的技術來解決不同裝置的問題，由於RWD是針對裝置的顯示尺寸，自行的縮放區塊，有別於以往的手機版與電腦版，是透過裝置來進行判斷顯示的頁面，因此當使用RWD所製作出來的網頁，就無法再回到電腦版，而RWD網頁在手機時，大部分都是條列式的區塊堆疊，因此在找資料時，就得不斷的向下滾動，這時還不如切回桌機版來尋找會比較快一些。 　　由於RWD網頁則是以裝置的解析進行控制，因此在手機下，即便點了電腦版，也無法讓手機的顯示器變大，所以要如何在RWD網頁下回到電腦版呢?而這問題也有不朋友問到，所以梅干就趁著這次的中秋連假，一邊吃著柚子、一邊看著狂風大雨，突然有了靈感，於是就花了時間實際的實作看看，沒想到辦法總是人想出來的，終於實現了在RWD的網頁下，也可回到電腦版的模式，而這邊梅干是直接套用Bootstrap的Grid System，因此有製作RWD網頁想切回電腦版的朋友，也一塊來看看吧!
Step1
首先，先設定好切換的連結，?mobile=on為電腦版，?mobile=off為手機版。
Step2
由於切換後，會不斷的換頁，因此這時使用了cookie來記錄使用的所設定的模式，同時比較重要的是，在切換為桌機版時，是需要CSS來進行控制，因此這時除了將CSS樣式直接寫在javascript中，也可存成css檔，再用載入的方式將CSS動態載入也可以。 

$(function(){
var m = getVar("mobile");
if($.cookie("mobile") == null){
    $.cookie("mobile","off");
}else{
    if(m != false) {
       $.cookie("mobile", m);
    }
    if($.cookie("mobile") == "on"){
        mobileswitch();
    }
}
});
function getVar(variable){
    var query = window.location.search.substring(1);
   var vars = query.split("&");
   for (var i=0;i<vars.length;i++) {
     var pair = vars[i].split("=");
      if(pair[0] == variable){return pair[1];}
    }
    return(false);
}
function mobileswitch(){
    document.querySelector('style').textContent += "@media(max-width:768px){.container{width: 1170px;}.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {float: left;}.col-md-12 {width: 100%;}.col-md-11 {width: 91.66666667%;}.col-md-10 {width: 83.33333333%;}.col-md-9 {width: 75%;}.col-md-8 {width: 66.66666667%;}.col-md-7 {width: 58.33333333%;}.col-md-6 {width: 50%;}.col-md-5 {width: 41.66666667%;}.col-md-4 {width: 33.33333333%;}.col-md-3 {width: 25%;}.col-md-2 {width: 16.66666667%;}.col-md-1 {width: 8.33333333%;}}";
}
Step3
這時只要按下電腦版，版面立即就會切換會桌機版模式，相當的方便喔!!
Step4
控制模式的切換，主要是透過網頁列上方的參數來作設定的，因此有需要手機與桌機版切換的朋友，也可試試看囉! 如有任何問題也歡迎討論。
[範例預覽] [範例下載]
↧
↧

「Mausr」手畫的就能快速尋找出HTML特殊符號的編碼

October 5, 2016, 10:30 pm
$
0
0
梅問題－「Mausr」用畫的幫你尋找出HTML的特殊符號
　　HTML裡除了提供各種可用的網頁標籤外，還有許多特殊的符號，像是星星、箭頭、幣值....或是數學符號，如此一來就無需將這些符號變成圖像，就能讓這些符號正常的顯示，而網路上也有不少熱心的網友，將HTML的特殊符號整理成頁，方便大家一一的尋找，但說真的光是這些特殊符號加一加就有上百個，光用看的也看到眼花。 　　由於這些都是特殊符號，因此無法透過Ctrl+F的方式進行搜尋，而現在有個更直覺、更方便的搜尋器啦!直接用畫的，立即就能尋找出相似的特太殊符號，同時辨示效果還蠻強的，因此有需要網頁特殊符號的朋友們，這個平台千萬別錯過了，讓你能快速的找到所需的特殊符號喔!
Mausr
網站名稱：Draw a symbol - Mausr
連結網址：http://www.mausr.com/
Step1
進入網站後，左邊的框框中，就是繪製區，只要將要的特殊符號，畫在方框中。
梅問題－「Mausr」用畫的幫你尋找出HTML的特殊符號
Step2
當在邊繪製的過程中，右邊就會開始進行比對與搜尋，當找到所需的符號時，下方就會顯示該符號的HTML編碼。
梅問題－「Mausr」用畫的幫你尋找出HTML的特殊符號
Step3
再把剛的HTML編碼複製，並貼到網頁的原始碼中。
梅問題－「Mausr」用畫的幫你尋找出HTML的特殊符號
Step4
接著開啟瀏覽器，就能顯示此特殊符號，同時還可任意改變它的大小與顏色。
梅問題－「Mausr」用畫的幫你尋找出HTML的特殊符號
Step5
甚至也可搜尋數學符號、幣值、表情.....符號。
梅問題－「Mausr」用畫的幫你尋找出HTML的特殊符號
Step6
萬一畫半天都找不到的話，可切到Symbols頁籤，再一個一個的找吧!
梅問題－「Mausr」用畫的幫你尋找出HTML的特殊符號
↧

「Jpeg.io」線上萬用JPG轉檔平台(支援PSD、EPS、SVG、TIFF)

October 6, 2016, 3:00 pm
$
0
0
梅問題－「Jpeg.io」線上萬用JPG轉檔平台(支援PSD、EPS、SVG、TIFF)
　　雖然說目前網頁支援的圖檔格式相當多，但最通用的還是jpg檔，不但可設定圖片的壓縮比，還可設定圖檔的傳輸方式，當要把手邊的影像格格式轉成jpg時，不外乎就得透過影像軟體，才能將各種影像格式轉成jpg，而最近發現一個平台，可將常用的影像檔，像是PSD、SVG、TIFF、EPS.....等檔案，直接轉成JPG檔，甚至還會將JPG檔進行壓縮，同時當有大量的圖檔時，還可以壓縮ZIP檔並下載，更重要的是，該平台不但完全免費，也沒有張數的限制，因當下回有檔案要轉存時，就無需再開啟影像軟體，直接透過該平台，就可快速的將各種影像檔轉換成jpg檔。 　　而該平台操作也相當的簡單，分別有二種方式，一種是將要壓縮的圖檔，直接拖拉到網站中，立即就會進行上傳與壓縮，另一種方式則是將圖檔放到雲端硬碟，像是Dropbox、Google Drive 、Box.net ，再藉由雲端的方式將圖檔大量的匯入，因此身為網頁小編們，現在也趕快來看看囉！
Jpeg.io
網站名稱：Jpeg.io
連結網址：https://www.jpeg.io/
Step1
進入該網站後，將要轉存的影像直接拖拉到網站的虛線框中。
梅問題－「Jpeg.io」線上萬用JPG轉檔平台(支援PSD、EPS、SVG、TIFF)
Step2
當上傳並壓縮完畢後，在下方分別就會看到壓縮後的檔案大小外，甚至將滑鼠移到Download Files鈕上方，還會出現圖片的縮圖，單點Download Files鈕時，就可下載單一影像。
梅問題－「Jpeg.io」線上萬用JPG轉檔平台(支援PSD、EPS、SVG、TIFF)
Step3
或是也可以點Download All Coverted Files鈕，這時就會將所有的檔案進行壓縮並下載。
梅問題－「Jpeg.io」線上萬用JPG轉檔平台(支援PSD、EPS、SVG、TIFF)
Step4
甚至也可用它來將圖片進行廋身，從下方二張圖片可看到，一張是Photoshop轉存網頁的jpg約328KB，經由此站轉檔後，變成了193KB，而影像的失真率相當的低。
328KB
↧
Search

「iNetTools」透過iPhone手機也可用Ping指令，讓網路狀況無所遁形

October 9, 2016, 3:00 pm
$
0
0
梅問題－「iNetTools」在iPhone手機也可用Ping指令，讓網路狀況無所遁形，透過手機也可使用Ping指令，診斷網路狀況
　　當今天要知道目前網路通不通，只需使用Ping指令，立馬就可知道網路的況狀，無論是Windows還是MAC都支援此指令，同時透過Ping指令，除了知道外網的狀況，也可知道內網，因此梅干平常在開發網頁時，就會使用webserver工具，讓網頁在實機上顯示，如此一來才能確保網頁的版型與特效是否皆正常。 　　這時就得透過內網的方式來進行測試，但手機內建不像電腦，內建命令字元有ping指令可用，因此這時要如何實現在手機中也支援ping指令呢?這也讓梅干找了好久，終於找到一款功能相當好用的網路診斷器，除了有ping指令外，還有dns、whoiso、路由軌跡....等，如此一來就可知道，當手機無法進行連線時，是否是電腦中的防火牆給阻擋住了，甚至透過此APP也清楚知道目前的網路狀況，因此想在手機中使用Ping指令的朋友，現在也一塊來看看。
iNetTools
軟體名稱：iNetTools
軟體性質：免費
適用裝置：iOS8.0+
軟體下載：Apple Store
Step1
安裝完畢，進入iNetTools後，會看到所有指令，由於是該版本是免費版，因此有些指令無法使用，但Ping指令免費版就可使用的。
梅問題－「iNetTools」透過手機也可使用Ping指令，診斷網路狀況
Step2
進入ping指令面板後，用法很簡單，只需將要測試的ip輸入，再按右上的啟動，接著在下方，立即就可知道目前ip的連線狀況與回應時間。
梅問題－「iNetTools」透過手機也可使用Ping指令，診斷網路狀況
Step3
當有在架站的朋友，更是不容錯過，如此一來也可知道目前的DNS是否開通，以及網站的回應時間，所以無論是架站還是網設的朋友，此APP千萬別錯過了。
梅問題－「iNetTools」透過手機也可使用Ping指令，診斷網路狀況
↧

網設必備! Google搜尋引擎內建「色盤選色器」挑選顏色更容易

October 11, 2016, 3:00 pm
$
0
0
梅問題－網頁必備!Google搜尋內建色盤選色器，讓挑選顏色更簡易
　　色彩是一個完全無法透過言語之間，就能說的清楚的，光是一個藍就有上百種的藍，所以這時就得靠色盤與色票，才能讓雙方的認知是一致的，雖然選色不是什麼大學問，只要開啟影像工具，立即就可選擇所需的顏色，甚至網路上也有許多的選色平台，供大家立即進行顏色的挑選，但現在有一個更快更直覺的方法。 　　完全不用開啟任何的網站與影像軟體，只需透過Google搜尋引擎，立即就可進行顏色的挑選，真的只能說Google搜尋引擎總是暗藏了許多有趣又實用的小功能，同時透過Googele搜尋的選色器，不但立即可知道目前所挑選顏色的色碼外，甚至還可以知道印刷的CMYK、HSV、HEX.....等數值。
Step1
進入Google的搜尋引擎後，在搜尋框中，直接輸入色碼，不知道的話，就輸入#ffffff。
梅問題－Google搜尋內建色盤選色器，讓挑選顏色更簡易
Step2
接著在搜尋框下方，就會出現一個色盤工具啦!下方可改變色相，上方可選擇所需的顏色。
梅問題－Google搜尋內建色盤選色器，讓挑選顏色更簡易
Step3
選到後，左邊立即會出現網頁的色碼與RGB數值。
梅問題－Google搜尋內建色盤選色器，讓挑選顏色更簡易
Step4
若需要其它的顏色的數值，點一下Show Color Values。
梅問題－Google搜尋內建色盤選色器，讓挑選顏色更簡易
Step5
接著就可看到更多的數值，像是CMYK、HSL、RGB....等，是不是超方便的呀!因此當下回要挑選顏色時，不用再找半天或開啟影像軟體啦!直接透過Google搜尋大神，立即就可知道。
梅問題－Google搜尋內建色盤選色器，讓挑選顏色更簡易
↧
↧

Bootstrap教學－Navbar導覽列點完選單自動收合

October 16, 2016, 3:00 pm
$
0
0
梅問題－Bootstrap教學－Navbar導覽列點完選單自動收合
　　Bootstrap中Navbar導覽列也是一個相當實用的功能，透過導覽列不但會自動依裝置的解析度，自動縮放並調整模式外，甚至還可以整合Bootstrap內建的頁籤跟隨與跳頁功能， 因此當點了選單中的項目後，下方的頁面就會跳到指定的區塊中，其效果有點像是以前的網頁錨點功能，甚至還可以整合scroolto，就可作出動態的滾動跳頁。 　　有用過的朋友都知道，當把Navbar的選單展開後，再點選單雖然下方的區塊鋰直接跳到指定的區域中，但選單並不會收起來，需再手動點一下那選單鈕，才能將選單收合起來，因此先前有朋友問到，是否能點了選單就自動收合，其實是可以的，只需加入一小段的js控制後，就能實現啦!因此有此需求的朋友，也趕快來看看囉!
Step1
將下方的語法貼到</body>結尾的上方，而此語法主要的功能在於，當點了navbar的選單後，就會自動撃發navbar-toggle，這時選單就會自動的收合起來啦!
$(function(){
$('.navbar a').on('click', function(){
    $('.navbar-toggle').click();
    });
});
梅問題－Bootstrap教學－Navbar導覽列點完選單自動收合
Step2
儲存好後，當點選單鈕，將選單展開後，再點選單中的選項，就會自動將選單收合，並跳到指定的區塊中啦!
梅問題－Bootstrap教學－Navbar導覽列點完選單自動收合
[範例預覽] [範例下載]
↧

「CloudConvert」萬用線上圖檔轉換平台，支援網頁新格式Google Webp

October 17, 2016, 3:00 pm
$
0
0
梅問題－「CloudConvert」萬用線上圖檔轉換平台支援網頁新格式Google Webp
　　網頁的圖檔格式愈來愈多元，從早期的JPG、GIF一直到現在的PNG、SVG，讓網頁支援的圖檔格式愈來愈多，並且可依不同需求使用不同的圖檔格式，例如相片影像就會採用JPG，透明背景與動畫就會使用GIF，當半透明影像就會使用PNG，這些為點陣的圖片格式，若向量則會採用SVG。 　　就在2010年Google推出新的網頁圖片格式Webp，而此格式有何過人之處，其最大特色就在於，Webp集合JPG、PNG、GIF各圖檔的優勢於一身，並且Webp的圖檔格式，具備了高壓縮低失真率，與透明背景和動態效果，但此格式早期需透過指令方式才能轉出，而現在有更簡單的方法，只需透過線上的轉檔平台，就能將JPG、PNG的檔案格式轉換成Webp啦!因此對於此格式有興趣的朋友，不妨也可試試看囉!
cloudconvert
網站名稱：CloudConvert
連結網址：https://cloudconvert.com/jpg-to-jpg
Step1
進入網站後，點選Select Files鈕
梅問題－「CloudConvert」萬用線上圖檔轉換平台支援網頁新格式Google Webp
Step2
選好檔案後，再選擇要轉出的格式，在image的下拉選單中，分別會看到各種的影像格式，像是常見的eps、ico、gif、png....，接著選擇webp。
梅問題－「CloudConvert」萬用線上圖檔轉換平台支援網頁新格式Google Webp
Step3
再按下方的Start Conversion鈕。
梅問題－「CloudConvert」萬用線上圖檔轉換平台支援網頁新格式Google Webp
Step4
當傳換完畢後，再按後方的Download鈕，將影像下載回來。
梅問題－「CloudConvert」萬用線上圖檔轉換平台支援網頁新格式Google Webp
Step5
下載完畢後，立即與先前的jpg相比一下，可看到webp的圖檔大小，足足少了1/3。
梅問題－「CloudConvert」萬用線上圖檔轉換平台支援網頁新格式Google Webp
Step6
當要使用於網頁時，只需用img標籤即可。
梅問題－「CloudConvert」萬用線上圖檔轉換平台支援網頁新格式Google Webp
Step7
畫質不但很不錯，且檔案又比jpg來的小很多。
梅問題－「CloudConvert」萬用線上圖檔轉換平台支援網頁新格式Google Webp
Step8
甚至也支援透明背景，雖然目前只有Google瀏覽器可使用，希望此格式未來的各家瀏覽器也能支援，這樣以後作圖就更加方便啦!
梅問題－「CloudConvert」萬用線上圖檔轉換平台支援網頁新格式Google Webp
↧

Bootstrap4 Cheat Sheet 所有範例特效原始碼速查一覽表

October 26, 2016, 3:00 pm
$
0
0
梅問題－Bootstrap4所有特效速查一覽表
　　Bootstrap是目前相當主流的RWD Framwork，除了Bootstrap所提供的網格系統相當的方便好用外，再來就是內建也有許多的互動特效，像是下拉選單、廣告輪播、滾動頁籤....，同時Boostrap的官方網站的資料也相當的齊全，甚至也有詳盡各特效的範例展示，雖然官方網站中，有詳盡的範例展示，但範例的原始碼，卻不是那麼的完整。　 　　因此有時還得自行看範例頁面的原始碼，再從原始碼中進行拆解，之後自己再自行整理這些特效的原始碼，而最近梅干發現一個相當棒的網站，不但將Bootstrap的所有範例分門別類外，還有詳盡的原始碼與結果預覽畫面，因此立即可知該特效或效果是否為自己所需，有在使用Bootstrap的朋友，這個網站千萬別錯過了。
Bootstrap 4 Cheat Sheet
網站名稱：Bootstrap 4 Cheat Sheet
網站連結：https://hackerthemes.com/bootstrap-cheatsheet/
進入網站後，從下方可看到，所有Bootstrap的效果分類與清單。
梅問題－Bootstrap4所有特效速查一覽表
當點上方最右邊的頁籤，就可看到底色青綠色為4.0版所增加的新功能，由於目前4.0還是測試階段，因此建議等到正式版推出再使用。
梅問題－Bootstrap4所有特效速查一覽表
再點特效清單的名稱，下方的左邊就會顯示該特效的原始碼，右邊則會顯示該特效的結果畫面，有了這一個Bootstrap的小抄表，之後在設計RWD網頁就更加方便，比官網還要來的方便，且範例更加完整好查詢。
梅問題－Bootstrap4所有特效速查一覽表
↧
Viewing all 164 articles
Browse latest View live
Search