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

Bootstrap教學－「TouchCarousel」讓廣告輪播支援手指滑動切換

November 2, 2016, 3:00 pm
$
0
0
梅問題－Bootstrap教學－「TouchCarousel」讓廣告輪播支援手指滑動切換
　　先前曾分享過swipe.js，讓Bootstrap內建的Carousel廣告輪播支援手機模式時，可以透過手指左右滑動，來切換上下則廣告，雖然說很方便，但卻有一點小小的BUG，雖然廣告可以正常的切換，一來沒有過場的動態滾動效果，二來是下方的小圓點，也不會隨著滑動後，自行的切換到指定的廣告則數，需等到自動輪播時，才會進行變換。 　　這問題也困擾梅干許久，所以上網找尋相關的解決辦法，而無意間發現另一隻外掛，不但讓Bootstrap的Carousel廣告輪播支援滾動的過場，甚至切換廣告時，下方的小圓鈕也會跟著一起變換，如此一來就可知道，目前的廣告是那一則下，因此有在使用Bootstrap的朋友，現在也趕快來看看，要如何使用TouchCarousel這個擴充元件。
TouchCarousel
外掛名稱：TouchCarousel
外掛下載：http://ixisio.github.io/bootstrap-touch-carousel/
Step1
進入外掛的網站後，點一下藍色的 View the project ongithub鈕。
梅問題－Bootstrap教學－「TouchCarousel」讓廣告輪播支援手指滑動切換
Step2
接著再按右上的下載鈕，將外掛全部給下載回來。
梅問題－Bootstrap教學－「TouchCarousel」讓廣告輪播支援手指滑動切換
Step3
下載回來後，將bootstrap-touch-carousel.css，放到專案的css目錄下。
梅問題－Bootstrap教學－「TouchCarousel」讓廣告輪播支援手指滑動切換
Step4
再將bootstrap-touch-carousel.jg檔，放到專案的js目錄下。
梅問題－Bootstrap教學－「TouchCarousel」讓廣告輪播支援手指滑動切換
Step5
接著再把剛的css引用到自己的專案頁面中。
梅問題－Bootstrap教學－「TouchCarousel」讓廣告輪播支援手指滑動切換
Step6
以及也將js引用到專案頁面中。
梅問題－Bootstrap教學－「TouchCarousel」讓廣告輪播支援手指滑動切換
Step7
完成後，再用手機開啟，接著當用手指頭，就可左右的滾動切換廣告，同時下方的小圓鈕也會自動的變換，是不是超酷的呀!
梅問題－Bootstrap教學－「TouchCarousel」讓廣告輪播支援手指滑動切換
[範例預覽] | [範例下載]
↧
Search

MAC專用的網頁壓縮器「Smaller」可合併多個CSS、JS檔案並壓縮

November 24, 2016, 2:10 pm
$
0
0
這對於只是一人作業來說，相當的麻煩，因此梅干就不斷在尋找，是否有相關的工具，可以直接將多個JS與CSS檔合併起來並壓縮，找了好久終於找到Smaller這款壓縮器，不但操作簡單，且壓縮後不會出現錯誤，同時只需將專案中所有JS檔，拖到Smaller壓縮器的視窗中，就可將JS合併起來並壓縮，同時支援CSS、JS檔，如此一來就可讓網頁的開啟速度更快，因此身為網頁設計的朋友，這款Smaller網頁專用的壓縮器，千萬別錯過了。
↧
↧

「Animate.css」讓Boostrap導覽列的下拉選單動起來

November 28, 2016, 2:00 pm
$
0
0
當建立好導覽列選單後，點撃選單時，就會開啟或隱藏選單，完全沒有任何花俏的特效，而現在只要將Animate.css的動畫引用後，立即就可讓Bootstrap的導覽列選單動起來，像是常見的淡入淡出或是彈跳、旋轉、飛進飛出.....等，完全不會CSS3動畫也能輕鬆上手，至於要怎麼將Animate.css這個動畫套件，整合到Bootstrap中現在就一塊來看看吧!
↧

「Mobirise」不懂網頁語法，拖拉就可完成精美、酷炫的RWD網頁工具

November 30, 2016, 2:00 pm
$
0
0
之所以現在製作網頁會愈來愈麻煩的原因，就在於現在的行動裝置愈來愈普及，再加上行動裝的螢幕尺寸也很不一，因此要如何讓網頁在各裝置不跑版外，同時還能有酷炫的特效，還真是考驗設計師的功力，而現在竟然有如此簡易的工具，透過Mobirise不但一樣也是透過拖拉的方式，甚至要修改設定與樣式時，也全部圖形化，且完全無需寫到半個原始碼，立即就可完成高互動的RWD自適應網頁喔!同時Mobirise裡面除了有Bootstrap外，還有許多酷炫的網頁特效，讓網頁質感、動感兼具，同時該軟體不但跨平台還免費，有沒有這麼佛心的呀!因此身為網設人員現在也一塊來看看吧!
↧

加入微軟聯盟行銷!不但荷包賺飽飽，Office還可免費用

December 1, 2016, 2:00 pm
$
0
0
雖然說網路有許多免費Office的替代軟體，但說真的多多少少都有相容性或格式跑掉的問題，光是修正這些問題，有時就得花上不少時間，所以還是使用微軟正宗的Office，不但可提升工作效率，還可降低錯誤的發生，再加上時代的變遷，軟體也從買斷變成包月制，讓軟體價格相對的親民許多，減少購買軟體的壓力與成本，因此也不用再四處尋找快樂版啦!
↧
↧

Bootstrap教學－利用Bootstrap網格系統製作出flickr相片牆效果

December 5, 2016, 2:00 pm
$
0
0
使用flickr的朋友，應該對於flickr的相片牆不感陌生，而flickr的相片牆有別於瀑瀑流，而是橫向式的將所有照片進行堆疊，由於照片有橫向有直向，因此在排列時，讓照片的區塊有大大小小，再加上一列裡的照片數量也不一，讓相片牆看起來相當的豐富，而這個相片牆，其實透過Boostrap的網格系統，就能快速的製作出來，同時也可任意的調整每列的相片數量，因此要如何利用Bootstrap的網格系統，製作出flickr的相片牆，現在也一塊來看看吧!
↧

「W3layouts」上千個免費可商用RWD自適應版型下載

December 6, 2016, 2:00 pm
$
0
0
最近梅干又發現一個免費RWD自適應網頁版型，不但裡面提供的版型相當的多，甚至還有分類，同時裡面的網頁版型不但免費，還可作為商業使用，甚至裡面的網頁版型質感，都相當的更，因此身為網設的朋友，還在等什麼，也趕快來下載囉!
↧

Bootstrap教學－Bootstrap導覽列加入iOS磨砂玻璃的模糊效果

December 14, 2016, 2:00 pm
$
0
0
最近Apple推出的新款Macbook Pro終於開放線上訂購，第一時間梅干也到官網去湊個熱鬧，看看新款的硬體規格有那邊可自訂選購的，就在邊加的同時，發現到當頁面滾動到上方的選單列時，內容會變成那種磨砂玻璃的模糊效果，這效果比自訂選項還要更吸引梅干，　本以為是用javascript的模糊語法，最後才發現到，原來這特效只是使用CSS3的模糊屬性而已，真的是太神奇的，所以梅干也花了點時間，將這效果與Boostrap的導覽列整合在一起，讓內容滾動時，也會呈現出模糊的磨砂效果，喜歡這效果的朋友，也一塊來看看囉!
↧
Search

「Social Icons」收錄所有社群、系統、平台的向量圖示與標準色一次到位

December 18, 2016, 2:00 pm
$
0
0
最近梅干找了好久，發現一個超棒的向量圖示，裡面主要以收錄各式各樣的社群與系統圖示為主，甚至也把每個圖示的標準色一併整理好，因此身為網設的你，也趕快來看看，這款以社群、系統主題為主，網頁用的向量圖示要怎麼套用。
↧
↧

Bootstrap教學－將Bootstrap導覽列加入如Apple官網點導覽列圖示變叉叉

December 26, 2016, 2:00 pm
$
0
0
其實這個特效，只是將圖示加入了CSS3動畫，讓使用點了選單圖示後，再將上下的二條選單線，旋轉45度後，就可形成交叉的樣子，最後再搭配transition，就可實現將原來的二條平行線，變成交叉線啦！而梅干也把這個特效移植到Bootstrap的導覽列中，讓Bootstrap也有此效果，這真的只能說Apple官網處處有驚奇，因此想知道這效果怎作出來的朋友，也一塊來看看囉！
↧

Bootstrap教學－「Bootstrap+Masonry」讓網格系統也支援瀑布流排版

January 2, 2017, 2:00 pm
$
0
0
雖然說Bootstrap的網格系統相當的方便好用，但只要區塊內的元素大小不一致時，就會造成跑版的問題，雖然Bootstrap也有提供長短腳的解決方法，但就得去計算出，每滿12個單位數時，加入一個長短腳的修正，所以當元素有長有短時，或許改用瀑布流是一個不錯的方式，但要如何將瀑布流的套件與Bootstrap網格系統整合在一塊，其實方法很簡單，當整合後不但讓Bootstrap的網格支援瀑布流排版，同時還能透過Bootstrap內建的網格規則，來控制瀑布流的行列數，至於要怎麼在Bootstrap中使用Masonry套件，現在就一塊來看看吧！
↧

Bootstrap教學－「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

January 10, 2017, 2:00 pm
$
0
0
　Bootstrap是目前相當主流的RWD Framework，不但內建的網格系統相當好用外，再來就是也整合了許多jQuery套件，滿足所有RWD網頁製作的需求，雖然說Boostrap已內建下拉選單，同時還可將下拉選單整合到導覽列中，但Bootstrap內建的下拉選單，只支援到第二層，因此當有第三層以上時，則是採用隔線的方式來作區隔，主要的原因就在於當多層選單，在手機操控時，則會顯得有些不便，但對於很多朋友來說，二層似乎有點少。
↧

「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線稿圖示簡潔又具設計感

January 18, 2017, 2:00 pm
$
0
0
網路上有許多免費的UI圖示資源可用，但大部分都以扁平設計為主，最近梅干逛網時，無意間發現一款以線條為主的UI圖示，這不禁讓梅干想到以前在學校時，曾繪製過一筆畫的指示符號，雖然是以線條來呈現，不像色塊來的那麼的強眼，但每個圖示看起來卻相當的簡潔清爽，同時也讓畫面變得更有特色。
↧
↧

「Bootstrap3 Resize Tool」Bootstrap自適應網頁螢幕版型檢測工具

January 23, 2017, 2:00 pm
$
0
0
由於Bootstrap簡單好上手，同時內建了許多製作網頁常會用到的特，因此在短時間內，也變成主流的是RWD Framework，同時將RWD的網頁製作完後，大家最習慣的檢測方式，就是透過拖拉視窗，或是安裝改變視窗大小的外掛套件，針對個各種不同的解析來檢測，而最近梅干發現一套專為Bootstrap的視窗檢測工具，就可知道，所作的RWD自適應網頁，是否都有符合各裝置的解析，因此有在使用Bootstrap設計RWD網頁的朋友，這一個工具千萬別錯過了。
↧

修改Sublime Text預設Tab縮排空間四個變二個

January 29, 2017, 2:00 pm
$
0
0
ublime Text應該是目前相當主流的網頁編輯工具，不但外掛套件相當多，甚至還跨雙平台，以及支援的程式語言相當多，更重要的一點是，可永久試用，以及它相當的小巧不吃資源，所以不用太高規的硬體就可跑的動，由於Sublime Text不像Dreamweaver有工具模組，雙響就可產生所需的代碼，因此所有的碼都得手工一個一個慢慢敲，為了讓原始碼更容易辨視，則會按Tab來編排原始碼。
↧
Search

Bootstrap教學－NavBar導覽列選單在手機版下，選單由側邊開啟

February 5, 2017, 2:00 pm
$
0
0
Bootstrap內建的Nav導覽列選單，不但會自動切換選單模式，甚至還可以設定選單是置頂還是置底，相當的方便，完全不用寫任何的CSS與Javascript，但選單的展開方式只有一種，就是由上到下，當選單太長時，在顯示上則會有些不便，這時將選單變成由左右二側滑出，有它的方便之處，所以先前梅干也曾分享過左右的滑出選單，但那選單無論桌機還手機版，都是隱藏在側邊，因此今天要來分享另一種作法，讓Bootstrap Nav導覽列選單，在桌機版選單則在上方顯示，當變為手機版時，選單就由左或右滑出，這對於多層選單的朋友來說，在手機版下就更加方便操控，至於要怎麼做現在砫一塊來看看吧！
↧

Bootstrap教學－Bootstrap導覽列選單加入網格讓選單圖文並茂

February 14, 2017, 2:00 pm
$
0
0
使用Bootstrap內建的導覽列，再加上Dropbox的下拉選單後，就可讓Bootstrap的導覽列變成雙層選單，當點撃選單後，就跳到對應的頁面，而這就是一個很單純的選單功能，但這樣條列的選單是較制式與平淡，就跟點餐看到一堆菜單的名稱一樣，因此當菜單附上圖片後，除了更能吸引人外，也更易了解每個選項的內容物。 　　所以今天要來分享，如何將Bootstrap導覽列的下拉選單進行擴充，讓原來只有條列式選單，變成一個Mega Menu的大型選單，就是當選單展開後，除了選項還能在裡面加入圖片，讓選單更加的吸引人，至於要怎麼做呢?現在就一塊來看看吧！
↧
↧

免寫程式！HTML5新屬性自動檢核表單與欄位格式是否填寫正確

February 19, 2017, 2:00 pm
$
0
0
表單驗證是件相當麻煩的事，除了要驗證欄位是否有填寫外，還要針對填入的資料格式是否正確，光是一個表單驗證，就相當的傷神，因此很早之前，也曾分享過一些驗表單的javascript套件，來解決這惱人的問題，但現在透過HTML5所提供的新屬性後，完全不用寫任何的程式，就可實現表單的驗證。甚至還可審核資料格的是否正確，像是Email、網址、電話.....等，因此有表單驗證需求的朋友，現在也一塊來看看HTML5的個表單驗證要如何使用，與格式驗證的設定
↧

Bootstrap教學－將Bootstrap網格系統加入資料篩選器功能

February 26, 2017, 2:00 pm
$
0
0
最近梅干花了點時間，找到另一個也是資料篩選的jQuery語法，不但整合了Bootstrap的GridSystem，同時設定上更簡單，而梅干也作了點小修正，讓在設定上更加的方便，無論是靜態或套程式都方便，因此有需要的朋友，現在也一塊來看看！
↧

Bootstrap教學－Bootstrap4.0新版GridSystem網格系統大革新！搶先用

March 13, 2017, 12:00 pm
$
0
0
用過許多套的RWD的Framework，還是最愛Bootstrap除了內建了許多特效外，再來就是它的Gridsystem網格系統，不但架構清楚好上手，同時還能加快RWD版型的設計，而Bootstrap4.0雖然目前還是alpha，但在Gridsystem有重大的改變，將原來的浮動靠齊改為flexbox，讓版型分割變得更靈活。 　　同時還打破了原來的12等份的限制，甚至還可以混用，但這也是正式的與IE9.0說掰掰，雖然目前的Bootstrap4.0還不是正式版，但可以先一起來看一下，而梅干現在就簡單的來為大家介紹一下，此次Bootstrap4.0版，在Gridsystem網格系統的重大革新吧！
↧
Viewing all 164 articles
Browse latest View live
Search