Quantcast
Channel: Bootstrap教學 –梅問題．教學網
Viewing all 53 articles
Browse latest View live
↧

Bootstrap教學《Bootstrap自訂欄位》將版面分割成五等分

November 3, 2014, 4:00 pm
$
0
0
　　Bootstrap是目前最常被使用到的自適應框架，除了是由Twiter所研發的外，再來就是相當的簡單好用，且該有的應有盡有，特別是它的網格，設計相當簡易，完全不用寫任何的CSS碼，只需透過HTML的標示，就能快速的將版面，分割成3欄、4欄、6欄....等，有效的縮短網頁開發時間，這也是梅干用過這麼多套的框架中，設計的最為理想與好上手的，但那天正好有位同學問到，怎麼分割成5欄，讓梅干當場楞了一下，預設似乎是沒辦法的，因為總共才12欄，所以這時就只能自行客制化，這也是Bootstrap最好用的地方，不足時都可自行再客制，至於要怎麼將版面分割成5欄呢?有需要的朋友，現在也一塊來看看吧!
放在<head>.....</head>之間：
?View Code CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 
<style type="text/css">
		/* define bootstrap 5 columns */
		.col-xs-1-5,
		.col-sm-1-5,
		.col-md-1-5,
		.col-lg-1-5 {
			position: relative;
			min-height: 1px;
			padding-right: 10px;
			padding-left: 10px;
		}
 
		.col-xs-1-5 {
			width: 20%;
			float: left;
		}
 
		@media (min-width: 768px) {
		.col-sm-1-5 {
				width: 20%;
				float: left;
			}
		}
		@media (min-width: 992px) {
			.col-md-1-5 {
				width: 20%;
				float: left;
			}
		}
		@media (min-width: 1200px) {
			.col-lg-1-5 {
				width: 20%;
				float: left;
			}
		}
</style>
放在<body>.....</body>之間：
當要使用時，只要加入col-lg-1-5、col-md-1-5、col-sm-1-5，畫面就會分割成5等分了。
?View Code HTML
1 2 3 4 5 6 7 
    <div class="row">
        <div class="col-md-1-5">1</div>
        <div class="col-md-1-5">2</div>
        <div class="col-md-1-5">3</div>
        <div class="col-md-1-5">4</div>
        <div class="col-md-1-5">5</div>
    </div>
[範例預覽] [範例下載]
↧
Search

Bootstrap教學《LayoutIt!》視覺化Bootstrap線上編輯器

November 27, 2014, 4:00 pm
$
0
0
梅問題－《LayoutIt!》線上Bootstrap視覺化操作的版型編輯器
　　Bootstrap是目前相當主流自適應套件之一，除了擁有Twitter的加持外，再來就是簡單好上手，且可快速的開發自適應的頁面，同時可變性相當大，內建也提供許多網頁常用的圖示，以及一些下拉選單、頁籤、廣告輪播....等互動特效，無論是功能還是架構都是相當的完整與成熟，但有用過的朋友都知道，Bootstrap並沒有開發工具，因此得自己用手慢慢敲鍵盤，把自己要的區塊給規畫出來，但這對於長期使用DW的朋友來說，可能有些難處，在完全要透過原始碼的模式，來畫出所要的網頁版型，似乎有點棘手，而最近好友阿山，分享了一個線上的Bootstrap開發工具，讓你直接用拖拉的方式，就能快速的產生出Bootstrap的版面來，完全視覺化操作，即見即所得，因此對於剛開始接觸Bootstrap的朋友來說，可真是一大福音，因此想體驗Bootstrap的朋友，現在就一塊來看看吧!
Bootstrap視覺開發工具：
網站名稱：LayoutIt!
連結網址：http://www.layoutit.com/build
這就是「LayoutIt!」編輯畫面，當第一次進入時，先點上方的Chear鈕，將範例畫面給清除。
梅問題－《LayoutIt!》線上Bootstrap視覺化操作的版型編輯器
+GRID SYSTEM：
接著左邊頁籤的「+GRID SYSTEM」，就是Bootstrap的網格總合是12，而下方就有些預設的版型，只要按住後方的drag鈕，拖拉到畫面右手邊，隨即就會產生出畫面。
梅問題－《LayoutIt!》線上Bootstrap視覺化操作的版型編輯器
甚至也可自己規畫，但每個數字後方要空一格，且總合要等於12，當建立好後，一樣按住後方的drag鈕，拖拉到右手邊中。
梅問題－《LayoutIt!》線上Bootstrap視覺化操作的版型編輯器
+BASIC CSS：
接著在「+BASIC CSS」的頁籤中，可產出各式的版型內容，像是標題、內文、按鈕、表單...等。
梅問題－《LayoutIt!》線上Bootstrap視覺化操作的版型編輯器
當把元件拖拉到畫面中後，若該元件有可設定的屬性時，可從上方的面板中設定。
梅問題－《LayoutIt!》線上Bootstrap視覺化操作的版型編輯器
+COMPONENTS：
在「+COMPONENTS」頁籤中，就可產生出像常用的頁籤、下拉選單....等。
梅問題－《LayoutIt!》線上Bootstrap視覺化操作的版型編輯器
+JAVASCRIPT：
在「+JAVASCRIPT」的頁籤中，裡面就有各式各樣的互動特效，像是常用的廣告輪播。
梅問題－《LayoutIt!》線上Bootstrap視覺化操作的版型編輯器
雖然目前是編輯畫面，但已支援自適應效果，當改變視窗大小時，版型也會立即跟著變化。
梅問題－《LayoutIt!》線上Bootstrap視覺化操作的版型編輯器
將版面都規畫好後，按上方的Download鈕，就可將剛所規畫下載回來，若不想登入的話，可按最下方的按鈕 。
梅問題－《LayoutIt!》線上Bootstrap視覺化操作的版型編輯器
接著就會看到剛所規畫好的原始碼，除了可直接複製下來外，也可按下方的Downlad鈕，將檔案下載回來，這個線上編輯器相當的不錯用，因此想體驗Bootstrap的朋友們，也趕快來試試看囉!
梅問題－《LayoutIt!》線上Bootstrap視覺化操作的版型編輯器
↧
↧

Bootstrap教學《Bootstrap廣告輪播加強版》自動產生分頁鈕與變成按鈕

January 7, 2015, 4:00 pm
$
0
0
梅問題-《Bootstrap》廣告輪播加強版，自動產生分頁鈕與標籤鈕
　　Bootstrap是目前相當主流的一個CSS Framework，除了好用易上手外，再來就是內建有許多的特效可使用，而在眾多的特效中，廣告輪播是最為好用，也是最為實用，完全不用寫任何的程式碼，只要按照Bootstrap的標籤架構來使用，就能快速的產生出廣告輪播相當的好用，雖然說很簡單也很好用，但有個比較不方便的就是，要自己手動新增分頁鈕，就有點小小的不便，因此梅干就把花了時間，將它變成自動化產生，自動偵測有幾則廣告，而產生多少分頁鈕外，且還加入了標籤按鈕模式，因此若覺得點不方便使用時，還可將分頁小鈕，改成頁籤鈕，如此一來就更容易切換廣告輪播，因此有在使用Bootstrap的朋友，也一塊來看看吧!!
CSS樣式：
放在<head>....</head>之間：
?View Code CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 
		/*廣告輪播的寬度大小*/
		.coverflow{max-width: 700px;}
 
		.mwt-title-btn{
			bottom: 10px;
		}
 
		/*標籤按鈕樣式與大小*/
		.mwt-title-btn li{
			width: 120px;
			height: 60px;
			float: left;
			margin:3px;
			padding: 3px;
			background: rgba(255,255,255,0.6);
			border-radius: 0;
			border: 0;
			text-indent: 0;
		}
 
		/*正在輪播樣式*/
		.mwt-title-btn li.active{
			width: 120px;
			height: 60px;
			border-bottom:solid 5px #ec2a45;
			background: rgba(0,0,0,0.6);
			color: #fff;
			margin-top: 3px;
		}
HTML：
放在<body>....</body>之間：
?View Code HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 
		<div class="container coverflow">
			<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
				<!-- 若要取消標籤式按鈕，只需將mwt-title-btn拿掉即可 -->
				<ol class="carousel-indicators mwt-title-btn"></ol>
				<div class="carousel-inner">
					<!-- 廣告輪播的圖片與連結位置 -->
					<div class="item"><a href="http://www.minwt.com/life/11795.html"><img src="dist/img/01.jpg" alt="3D列印跨足時尚界"></a></div>
					<div class="item active"><a href="http://www.minwt.com/life/11382.html"><img src="dist/img/02.jpg" alt="自製「星巴克女神」手機保護殼"></a></div>
					<div class="item"><a href="http://www.minwt.com/dc/11774.html"><img src="dist/img/03.jpg" alt="SONY QX1拍照不受限"></a></div>
				</div>
				<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
				<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
			</div>
		</div>
Javascript：
放在</body>之前：
?View Code JAVASCRIPT
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 
		<script src="dist/js/jquery-1.11.0.min.js"></script>
		<script src="dist/js/bootstrap.min.js"></script>
		<script type="text/javascript">
			$(function(){
				var total = $('.carousel-inner div.item').size();
				var mwt = $("ol").index('.mwt-title-btn');
				append_li();
 
				var left = $('.container').width() - ($('.carousel-indicators li').width()*total);
				if(mwt ==0){
					$(".carousel-indicators").css('left',left);
				}
				function append_li()
				{
					var li = "";
					var get_ac = $( ".active" );
					var ac =  $( ".carousel-inner div" ).index( get_ac );
 
 
					for (var i=0; i <= total-1; i++){
						if(i == ac){
							if(mwt == 0){
								li += "<li data-target='#carousel-example-generic' data-slide-to='"+i+"' class='active'>"+$(".item img").eq(i).attr("alt")+"</li>";	
							}else{
								li += "<li data-target='#carousel-example-generic' data-slide-to='"+i+"' class='active'></li>";					
							}
						}else{
							if(mwt == 0){
								li += "<li data-target='#carousel-example-generic' data-slide-to='"+i+"' class=''>"+$(".item img").eq(i).attr("alt")+"</li>";
							}else{
								li += "<li data-target='#carousel-example-generic' data-slide-to='"+i+"' class=''></li>";
 
							}
						}
					}
 
					$(".carousel-indicators").append(li);
				}
			});
 
			$( window ).resize(function() {
  				var total = $('.carousel-inner div.item').size();
				var left = $('.container').width() - ($('.carousel-indicators li').width()*total);
				if(mwt ==0){
					$(".carousel-indicators").css('left',left);
				}
			});
		</script>
完成後，就可看到，原來分頁的小圓按鈕，已變成標籤式按鈕，如此一來好用，二來使用者也知道，每個廣告輪播的項目，就不用老在那試半天。
梅問題-《Bootstrap》廣告輪播加強版，自動產生分頁鈕與標籤鈕
[範例預覽] | [範例下載]
↧

Bootstrap教學《Boostrap自訂欄位》固定col欄位width寬度

March 17, 2015, 3:00 pm
$
0
0
梅問題－Bootstrap教學《Boorstrap自訂欄位》固定col欄位寬度
　　Bootstrap現在已被廣為的使用，最主要的原因很簡單，一來是簡單易上手，二來是效果齊全，該有的都有，就連之前二姐委託的宏碁雲端、Papago、華碩活動頁面....都採用了Bootrap，由此可見它的便利性，且透過Bootstrap可縮短開發自適應網頁的時間，而這麼好用的元件，也不是完全都沒缺點，還是有不足的地方，像之前梅干也曾強化了它的廣告輪播，以及自訂欄位分割的數量，接著梅干要再來分享個，也是大家常會遇到的問題，就是側邊欄固定欄位寬度的部分，由於側邊欄大部分會用來放banner或廣告，因此這時若用百分比縮放區塊時，很容易造成跑版的問題，其實作法很簡單，只要自訂一組類別名稱，立即就可實現固定欄位寬度的夢想啦!至於怎麼做現在就一塊來看看吧!
放在<head>....</head>之間：
?View Code CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 
<style type="text/css">
	.col-fixed, .row {
	  float: left;
	  margin-left: 0;
	  margin-right: 0;
	}
	/*固定欄位寬度300像素*/
	.col-fixed {
	  background: #CCC;
	  width: 300px;
	}
 
	.row {
	  background: #EEE;
	  width:calc(100% - 300px);
	}
 
</style>
放在<body>....</body>之間：
當要固定欄位時，只要加入col-fixed，但要獨立出來，不可包在row裡。
?View Code HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 
<div class="container">
		<div class="row">
			<div class="col-md-6">
			   .col-md-6
			</div>
			<div class="col-md-6">
			   .col-md-6
			</div>
		</div>
		<!-- 固定欄位寬度為300px -->
		<div class="col-fixed">
			固定寬度300px
		</div>
        <!-- 固定欄位寬度為300px end-->
	</div>
結果預覽：
這時候無論怎麼改變預覽尺寸，側邊欄的寬度就會固定成300像素，不會跟著一起縮放，這時就不會再跑版啦!
梅問題－Bootstrap教學《Boorstrap自訂欄位》固定col欄位寬度
↧

Bootstrap教學－Bootstrap3自適應Photoshop網格模版素材檔

July 23, 2015, 1:00 am
$
0
0
梅問題－Bootstrap教學－Bootstrap3自適網格Photoshop模版檔
　　雖然目前有許多RWD的CSS framework，但最常被使用則是由社群網Twitter所推出的Bootstrap，之所以會被大家喜愛，最主要的原因就是簡單好應用，也是因為如此讓梅干對Bootstrap愛不釋手，透過Bootstrap可以快速的完成專案，省去自行一個一個慢慢刻，但許多朋友當開始使用Bootstrap時，第一個會遇到的問題就是，在Photoshop中網頁尺寸要開多大，以及要如何規畫。 　　雖然在Bootstrap的文件中，也已明確的說明每個解析的尺寸與每個欄位的大小，但要一個一個尺寸慢慢的拉出格線，實在有點浪費時間，所以梅干最近在網路上發現一個很佛心的網站，將Bootstrap的網格，作好一份份的PSD檔，因此當下載後，立即就可使用，並依照Bootstrap 12欄來作設計，因此有用Bootstrap的朋友，也趕快來下載囉!
Step1
首先，先到benstewart.net網站後，向下拉就會看到Downlaod連結，點一下隨即可下載。
梅問題－Bootstrap教學－Bootstrap3自適網格Photoshop模版檔
Step2
當下載完畢解壓縮後，分別會看到三個PSD檔，而這三個尺寸，分別就是Bootstrap所設定的三個解析，因此在規畫RWD版型時，只要依照這個解析設計即可。
梅問題－Bootstrap教學－Bootstrap3自適網格Photoshop模版檔
Step3
打開後，在Photoshop中分別會看到淡黃色與深橘色，而淡黃就是padding， 深橘色就是欄位的寬度，因此在規畫版型時，千萬別讓區塊落在淡黃色區域中喔!如此一來下回再開發RWD版型就更加的得心應手啦!
梅問題－Bootstrap教學－Bootstrap3自適網格Photoshop模版檔
↧
↧

《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具

August 16, 2015, 3:00 pm
$
0
0
梅問題－《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
　　Bootstrap是目前相當主流是RWD自適應套件之一，除了功能完善外，再來就是它的網格概念相當的簡易好懂，同時也相當容易客製化，這也是讓梅干愛不釋手的原因，同時也將Bootstrap導入每個專案中，但Bootstrap本身只是一套framework，所以並沒有設計工具，因此只能透過一般的文字編輯器，將所需要用的特效或版面，一一的key到原始碼中，而為了縮短製作時程，有上過梅干的Bootstrap的朋友都知道，梅干將這些Boostrap製作成短code，並快速的產生這些特效的原始碼，但那天梅干開啟許久沒用的Dreamweaver CC 2015後，突然無意發現，在建立新檔案的地方，怎多了一個Bootstrap的頁籤，便引起梅干的好奇，就研究了一下，沒想到大家的需求Dreamweaver終於聽見了，將Bootstrp變成圖形化介可，讓許多習慣DW的網設，也能輕易的使用，因此習慣用DW的朋友，不妨也一塊來看看，怎在DW CC 2015下使用Bootstrap來開發RWD的網頁吧!
Step1
在建立新檔案後，將頁籤切到Bootstrap，並將下方的勾點掉，不用載入預設的版型。
梅問題－《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step2
由於Dreamweaver會自動產生Bootstrap所會用到的元素，因此要先指定一個資料夾。
梅問題－《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step3
當建立完畢後，先進行儲存。
梅問題－《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step4
接著DW會把Bootstrap所會用到的檔案，複製到剛所指定的資料夾中。
梅問題－《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step5
接著切到原始碼模式，可看到這就是基本的Bootstrap的網頁結構，且DW完全沒有加料。
梅問題－《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step6
接著回到編輯模式，在插入面板中，將下拉選單更改為Bootstrap Compoments，這邊裡面都是Bootstrap所有元素。
梅問題－《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step7
就可透過拖拉的方式，建立Bootstrap的版型。
梅問題－《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step8
甚至也可直接嵌入廣告輪播。
梅問題－《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step9
完成後，切到Live來預覽一下，此次的Live功能更加方便了，上方還有尺寸表，可清楚知道目前所在的解析。
梅問題－《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
Step10
直接開啟瀏覽器預覽，一切都正常，因此當習慣DW的朋友，也趕快升到DW CC 2015後，就可用DW中使用Bootstrap，來製作RWD自適應的網頁啦!說真的還蠻方便的。
梅問題－《Dreamweaver CC 2015限定》Bootstrap全圖形化製作工具
↧

精選15款！可商業用「Bootstrap自適應網頁」版型下載

August 17, 2015, 9:10 pm
$
0
0
梅問題－15款可商用Bootstrap自適應網頁版型下載
　　其實有不少朋友，時常問到梅干要如何製作RWD的網頁，有沒有範例可看，其實現在製作網頁，已不像早期那麼單純，只要專心把一個版型處理好就行了，現在還得顧慮到手機、平板等裝置，所以這也是近期RWD這麼夯原因，透過一頁面就可同時在不同的裝置下顯示，而為了加速專案的製作， 現在也有不少人使用Twitter公司所推出的Bootstrap，而用過的朋友都知道Bootstrap的好，但剛接觸的朋友，可能會一時不知該如何設計才好，所以梅干也特地精選了15款，由Bootstrap所製作自適應版型，同時也支援商業使用，因此無論是Bootstrap老手還是新手，不妨也可參考看看，別人是怎設計與規畫的。
Andia：
梅問題－15款可商用Bootstrap自適應網頁版型下載
[預覽] | [下載]
Jedy：
梅問題－15款可商用Bootstrap自適應網頁版型下載
[預覽] | [下載]
Riona：
梅問題－15款可商用Bootstrap自適應網頁版型下載
[預覽] | [下載]
Alissa：
梅問題－15款可商用Bootstrap自適應網頁版型下載
[預覽] | [下載]
flat Bootstrap registration forms：
梅問題－15款可商用Bootstrap自適應網頁版型下載
[預覽] | [下載]
Gioia：
梅問題－15款可商用Bootstrap自適應網頁版型下載
[預覽] | [下載]
Shield – One Page Theme：
梅問題－15款可商用Bootstrap自適應網頁版型下載
[預覽] | [下載]
Bolt：
梅問題－15款可商用Bootstrap自適應網頁版型下載
[預覽] | [下載]
Basic – Personal Page：
梅問題－15款可商用Bootstrap自適應網頁版型下載
[預覽] | [下載]
Instant：
梅問題－15款可商用Bootstrap自適應網頁版型下載
[預覽] | [下載]
Munter：
梅問題－15款可商用Bootstrap自適應網頁版型下載
[預覽] | [下載]
Victoria – Simple vCard：
梅問題－15款可商用Bootstrap自適應網頁版型下載
[預覽] | [下載]
Onassis：
梅問題－15款可商用Bootstrap自適應網頁版型下載
[預覽] | [下載]
Pratt：
梅問題－15款可商用Bootstrap自適應網頁版型下載
[預覽] | [下載]
Kelvin：
梅問題－15款可商用Bootstrap自適應網頁版型下載
[預覽] | [下載]
素材來源：blacktie.co | azmind.com
↧

Bootstrap教學－將Bootstrap下拉選單變成hover滑入展開

September 7, 2015, 3:00 pm
$
0
0
梅問題－Bootstrap教學－將Bootstrap下拉選單改成滑入展開
　　Bootstrap除了內建的Grig很好用以外， 就連許多的javascript互動特效也很方便，像是大家最常使用的廣告輪播、下拉選單、頁籤.....等特效，直接將專案引用Bootstrap後，立即就可使用，同時這些特效也相當容易套用，再也不用每次四處去下載特效，一套用後還會出現問題，雖然說Bootstrap雖然很方便，但一切就只能它說的算，而最近梅干幫朋友設計了一個Wordpress版型，裡面的所用特效都是Bootstrap，其中上方的選單中，當有子選單時，則需點一下才能將它展開，最主要是Bootstrap是RWD的框架，所以在手機模式只有Touch，因此可以理解它的思維，但今天若只單純用於桌機版時，就有滑入的事件，所以當滑鼠滑入時，顯示子選單是比較符合經驗的，難不成要打掉重練嗎?其實並不用，只需要加入二行的css，立即就可實現 當滑鼠滑入時自動展開選單，至於要怎麼作現在就一塊來看看吧!!
其實方法很簡單，只需要在css中，加入以下的語法，立即就可把原先，點擊的下選單變成滑入顯示。
style.css
?View Code CSS
1 2 
.dropdown-menu li:hover .sub-menu {visibility: visible;}
.dropdown:hover .dropdown-menu {display: block;}
完成後，立即測試看看，當滑鼠滑到下拉選單的區塊時，就會自動展開子選單了，是不是超ez的呀!
梅問題－Bootstrap教學－將Bootstrap下拉選單改成滑入展開
[範例預覽]
↧
Search

Boootstrap教學－非RWD自適應網頁也可使用Bootstrap的Grid

September 13, 2015, 3:00 pm
$
0
0
梅問題－Boootstrap教學－使用Bootstrap的Grid，關閉RWD自適應效果
　　現在幾乎所有的大大小小的專案，都使用Bootstrap，尤其是它的Grid相當的好用，只要依照它的格式，就能快速的將版面分割完成，且又具備了RWD自適應的效果，同時完全不用寫到任何的CSS樣式，當習慣了Bootstrap的結構後，現在在製作非RWD的頁面時，也會不自覺的依照Bootstrap結構，但其實非RWD的網頁，一樣也是可使用Bootstrap的Grid，只要作點小修改，就可依照Boostrap的樣式標籤來使用啦!就可快速的用Bootstrap來分割畫面啦!相當快速與好用，因此有在用Bootstrap的朋友，也趕快來看看如何關閉Bootstrap的RWD自適應，並套用到一般的頁面中。
Step1
首先，將container的width設為固定值，接著在html的標籤中，一樣是使用col，但要用col-xs-*這組，這樣才不會當螢幕解析縮小時，區塊就變成手機的形式，區塊堆疊在一起。
梅問題－Boootstrap教學－使用Bootstrap的Grid，關閉RWD自適應效果
Step2
當設定好後，這時無論視窗怎麼變，裡面的區塊都不為所動，同時下方也會出現捲軸，是不是超方便的呀!無論是不是RWD網頁，皆可使用Bootstrap的Grid。
梅問題－Boootstrap教學－使用Bootstrap的Grid，關閉RWD自適應效果
[範例預覽]
↧
↧

Bootstrap教學－網頁嵌YouTube影片也支援RWD自適應調整

September 22, 2015, 3:00 pm
$
0
0
梅問題－Bootstrap教學－讓網頁嵌YouTube影片也支援自適應
　　人家說有圖有真相，有影片賴不掉，透過影片可讓人更容易理解，因此這時就會將錄製好的影片，上傳到一些影音平台中，再把影片嵌入自己的網頁中，但網頁有設計RWD自適應網頁時，則會發現到，所有的區塊都會隨著螢幕解析跟著縮放與調整，但影片卻偏偏就不為所動，這就得再為嵌入的iframe來進行設定，才能解決此問題，其實還有更簡易的方法，當RWD自適應網頁，是採用Bootstrap的朋友有福啦!自從Bootstrap 3.2以後的版本，就已支援iframe自適應的調整了，甚至連高度也跟著一起作變化，且用法相當的簡單，因此還不知道的朋友，現在也一塊來看看吧!!!
Step1
首先，找到影片後，將影片嵌入的碼全部複製起來。
梅問題－Bootstrap教學－讓網頁嵌YouTube影片也支援自適應
Step2
將它貼在body的container區塊中。
梅問題－Bootstrap教學－讓網頁嵌YouTube影片也支援自適應
Step3
接著先把iframe的寬高給刪除，接著在iframe中加入embed-responsive-iteom的class，並再包一層div，並加入embed-responsive emebed-responsive-16by9，這邊要特別留一下，16by9代表影片是16:9，若是4:3要改為4by3。
梅問題－Bootstrap教學－讓網頁嵌YouTube影片也支援自適應
Step4
當完成後，立馬來檢測一下，這時在拖視窗改變解析時，影片除了寬會跟著調整外，就連高度也會跟著一塊作調整，是不是超ez的呀!!
梅問題－Bootstrap教學－讓網頁嵌YouTube影片也支援自適應
[範例預覽] [範例下載]
↧

Bootstrap教學-自訂選項，只下載所需Grid system(網格)系統

November 8, 2015, 2:00 pm
$
0
0
梅問題－Bootstrap教學-自訂並下載Grid system(網格)系統
　　現在所有的專案都脫離不了Bootstrap，除了內建已整合了許多特效外，再來就是它的Grid system網格系統，真的很方便且好用，所有的版面的邏輯控制Bootstrap都已設定好，因此只要在HTML中，加入適當的標籤與類別名稱，網頁立即就支援RWD自適應，同時它的結構也相當容易理解方便，再加上名稱也很易懂，因此上手後幾乎離不開它的Grid，所以今天若只需要它的Grid時，不需其它特效的話，這時只需透過線上的自訂功能，就能只下載它的Grid系統，同時還可自訂區塊間距，因此有在使用Bootstrap的朋友們，若只要它的Grid網格系統的話，現在就一塊來看看，如何只下載它的Grid網格系統與自訂區塊間距吧!
Step1
進入Bootstrap官網後，點上方的Customize。
梅問題－Bootstrap教學-自訂並下載Grid system(網格)系統
Step2
接著向下拉，將下方所有的勾都取消，只保留一個Grid System選項。
梅問題－Bootstrap教學-自訂並下載Grid system(網格)系統
Step3
再向下拉，若不需要它內建的特效時，再將下方的所有選項勾取消掉。
梅問題－Bootstrap教學-自訂並下載Grid system(網格)系統
Step4
接著在下方的Grid System中，可設定區塊的間距，預設是左右各15px，因此若不要用這麼大的話，也可自行修改。
梅問題－Bootstrap教學-自訂並下載Grid system(網格)系統
Step5
都設定好後，拉到最下方，就會看到Download鈕，點一下就會進行編譯與下載了。
梅問題－Bootstrap教學-自訂並下載Grid system(網格)系統
Step6
下載回來解壓縮後，可看到純Grid System的網格系統只有13KB，相當的小巧。
梅問題－Bootstrap教學-自訂並下載Grid system(網格)系統
Step7
這時將它載入，寫法當然與之前完全一樣。
梅問題－Bootstrap教學-自訂並下載Grid system(網格)系統
Step8
哈!這樣就能只單純的使用Bootstrap的網格系統啦!
梅問題－Bootstrap教學-自訂並下載Grid system(網格)系統
↧

SCSS教學-透過SCSS輕易設計出如Bootstrap的Grid System網格系統

November 12, 2015, 2:00 pm
$
0
0
梅問題－SCSS教學-透過SCSS輕易設計出如Bootstrap的Grid System網格系統
　　先前曾分享過SCSS的基本用法，應該可感受到SCSS所帶來的便利性，以及寫法上與CSS差不多，但支援性變得更多，因此只要善用這些基本的語法，就能套用在任何的專案上，同時讓CSS更具結構化，同時也可減少一些重覆性的編寫，除此之外透過這些用法，也能設計出如Bootstrap的Grid System網格系統，且寫法也相當的簡單，因此梅干就簡單的運用SCSS來設計出像Bootstrap的網格系統，甚至也可自行修改符合自己所需的網格數或間距，因此對於RWD網格系統感興趣的朋友，也一塊來看看囉!
這邊梅干也仿照了Bootstrap，將畫面分割成12欄，同時html所用的前綴詞也與Bootstrap一樣，像是col-xs-*、col-sm-*、col-md-*、col-lg-*，且在解析的判斷，也用了三組，分別從768、992、1200像素等， 因此可以說是一個相當簡易版Bootstrap的網格系統。
這時當視窗解析不同時，版面也會自動的調整啦!同時透過過上方的code，應該可感覺到，其實自行開發網格系統，一點也不困難，所以各位也可透過SCSS設計出符合自己所需的網格系統來啦!
梅問題－SCSS教學-透過SCSS輕易設計出如Bootstrap的Grid System網格系統
↧

Bootstrap教學－實現Table表格也支援RWD自適應效果

November 23, 2015, 2:00 pm
$
0
0
梅問題－Bootstrap教學－實現Table表格也支援RWD自適應效果
　　雖然說現在編排網頁時，已經不再使用table了，而是使用div雖然說div很方便，但遇到表單式的內容，還是得透過table來排版，一來比較清楚，二來也比較簡單，因此table還是有它存在的必要性，但現在RWD自適應網頁當道，當在桌機版使用table沒問題，一旦切到手機版時，那可真是要命的，當表格縮到手機的可視範圍時，那可真是眼力大考驗，雖然說Bootstrap內建也支援table自適應的效果，但縮到手機模式時，表格下方則會出現左右滑動的捲軸，雖然說這也是一個不錯的解決辦法，但在操作上就覺得有些不便，因此還是盡量以條列式的方式來呈現，會比較符合手機上的操控，因此梅干就整理了一下手邊的資料，將table自適應並整合到bootstrap中，因此一樣可在bootstrap的grid system的系統來使用，完全沒問題，因此當有需要使用table表格式，不妨也可參考看看囉!
放在<style>...</style>之間：

.rwd-table {
　background: #fff;
　overflow: hidden;
}

.rwd-table tr:nth-of-type(2n){
　background: #eee;
}
.rwd-table th,
.rwd-table td {
　margin: 0.5em 1em;
}
.rwd-table {
　min-width: 100%;
}

.rwd-table th {
　display: none;
}

.rwd-table td {
　display: block;
}

.rwd-table td:before {
　content: attr(data-th) " : ";
　font-weight: bold;
　width: 6.5em;
　display: inline-block;
}

.rwd-table th, .rwd-table td {
　text-align: left;
}

.rwd-table th, .rwd-table td:before {
　color: #D20B2A;
　font-weight: bold;
}

@media (min-width: 480px) {
.rwd-table td:before {
　display: none;
}
.rwd-table th, .rwd-table td {
　display: table-cell;
　padding: 0.25em 0.5em;
}
.rwd-table th:first-child,
.rwd-table td:first-child {
　padding-left: 0;
}
.rwd-table th:last-child,
.rwd-table td:last-child {
　padding-right: 0;
}
.rwd-table th,
.rwd-table td {
　padding: 1em !important;
}
}

放在<body>...</body>之間：
當要使用時，在table加入.rwd-table的class名稱，接著在每個td後方加入data-th的自訂屬性名稱，當縮小到手機尺寸時，則會透過CSS3的選擇器，將data-th的值寫到區塊中，當手機模式，就會依照條列式的方式作呈現。
<table class="rwd-table">
　 <tr>
　　 <th>旅遊名稱</th>
　　 <th>出發日</th>
　　 <th>售價</th>
　　 <th>機位</th>
　　 <th>可售</th>
　 </tr>
　 <tr>
　　 <td data-th="旅遊名稱">【早鳥送、最高再省8000】亞德里亞海之珠、克斯蒙三國、雙國家公園、世界遺產遊13日(含稅) </td>
　　 <td data-th="出發日">03/23〔三〕 </td>
　　 <td data-th="售價">$119,900</td>
　　 <td data-th="機位">26</td>
　　 <td data-th="可售">6</td>
　 </tr>
</table>
[範例預覽] [範例下載]
↧
↧

Bootstrap教學－左右滑出導覽列選單

January 24, 2016, 2:00 pm
$
0
0
梅問題－Bootstrap教學－左右滑出導覽列選單
　　這次總統選舉，三大候選人的官網都有支援RWD自適應網頁，讓支持者無論是使用桌機、平板、手機，都能正常的瀏覽網站，並時時觀注候選人的動態，而在這三大候選人之中，小英除了官網外，還有一個CI的設計規範網頁，一樣也是支援RWD自適應網頁，但比較特別的是，一般都是在手機模式下，才會顯示選單鈕，按一下後才將選單推出，但這個功能則是放在桌機版，直接點上方的目錄，立即就會推出選單，但它則是在上面蓋一層圖層，並將選單滑出，而梅干上網爬了一下文，找到一個類似的效果，唯一的差別則在於，當選單滑出時，內容也會一併被推出去，但網路上這範例只限左選單，梅干作了小修改，讓選單無論在左還右都能滑出，同時一樣架構於Bootstrap下使用。
Step1
將html標籤加入class="easy-sidebar-active"。
?View Code JAVASCRIPT
1 
<html class="easy-sidebar-active">
Step2
在body加入下方的html標籤。
?View Code JAVASCRIPT
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 
<html class="easy-sidebar-active">
<nav class="navbar navbar-inverse easy-sidebar">
  <div class="container-fluid"> 
    <div class="navbar-header">
       <!--easy-sidebar-toggle-right -->
      <button type="button" class="navbar-toggle easy-sidebar-toggle" aria-expanded="false"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a> 
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </div>
  <!-- /.container-fluid --> 
</nav>
 
<div class="container">
  <h1>Bootstrap Easy Sidebar Example</h1>
  <!--easy-sidebar-toggle-right -->
  <button class="btn btn-danger easy-sidebar-toggle">Toggle Sidebar</button>
</div>
Step3
在/body加入下方的script。
?View Code JAVASCRIPT
1 2 3 4 5 6 7 8 9 10 11 12 
<script src="js/jquery-1.11.0.min.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script>
//easy-sidebar-toggle-right
$('.easy-sidebar-toggle').click(function(e) {
    e.preventDefault();
   //$('body').toggleClass('toggled-right');
    $('body').toggleClass('toggled');
   //$('.navbar.easy-sidebar-right').removeClass('toggled-right');
    $('.navbar.easy-sidebar').removeClass('toggled');
});
</script>
Step4
加入easy-sidebar.css。
?View Code CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 
html.easy-sidebar-active {
	height: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	margin: 0;
	padding: 0;
}
 
body {
	transition: 0.2s ease;
	min-height: 100%;
	margin: 0;
	padding: 0;
}
body.toggled {
	-webkit-transform: translateX(250px);
	transform: translateX(250px);
}
 
.navbar.easy-sidebar {
	transition: 0.2s ease;
	position: absolute;
	width: 250px;
	top: 0;
	left: -250px;
	min-height: 100%;
	border-radius: 0;
	margin: 0;
	z-index: 9999;
}
 
.navbar.easy-sidebar.toggled {
	-webkit-transform: translateX(250px);
	transform: translateX(250px);
}
 
 
body.toggled-right {
	-webkit-transform: translateX(-250px);
	transform: translateX(-250px);
}
 
.navbar.easy-sidebar-right {
	transition: 0.2s ease;
	position: absolute;
	width: 250px;
	top: 0;
	right: -250px;
	min-height: 100%;
	border-radius: 0;
	margin: 0;
	z-index: 9999;
}
 
.navbar.easy-sidebar-right.toggled-right {
	-webkit-transform: translateX(-250px);
	transform: translateX(-250px);
}
 
.easy-sidebar .btn {
	width: 100%;
}
 
.navbar.easy-sidebar .navbar-header {
	margin: 0 -15px;
	float: none;
}
 
.navbar.easy-sidebar .navbar-brand {
	margin: 0;
}
 
.navbar.easy-sidebar .navbar-toggle {
	display: inline-block;
}
.navbar.easy-sidebar .navbar-toggle span.icon-bar:nth-child(2) {
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transform: translate(2px, -5px) rotate(45deg);
	transform: translate(2px, -5px) rotate(45deg)
}
.navbar.easy-sidebar .navbar-toggle span.icon-bar:nth-child(3) {
	display: none;
}
.navbar.easy-sidebar .navbar-toggle span.icon-bar:nth-child(4) {
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transform: translate(2px, 4.5px) rotate(-45deg);
	transform: translate(2px, 4.5px) rotate(-45deg);
}
 
.navbar.easy-sidebar .nav.navbar-nav {
	margin: 7.5px -15px;
	float: none;
}
.navbar.easy-sidebar .nav.navbar-nav>li {
	float: none;
}
.navbar.easy-sidebar .nav.navbar-nav>li>a {
	padding: 10px 15px;
}
 
.navbar.easy-sidebar .navbar-nav .open .dropdown-menu .divider {
	box-shadow: 0 1px 0 rgba(255,255,255, 0.1);
}
 
 
.navbar.easy-sidebar .navbar-form {
	padding: 10px 15px;
	margin: 8px -15px;
	border-top-width: 1px;
	border-top-style: solid;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
}
.navbar.easy-sidebar .navbar-form .form-group {
	margin-bottom: 5px;
	display: block;
}
.navbar.easy-sidebar .navbar-form .form-group .form-control {
	display: block;
	width: 100%;
}
 
 
/**/
.navbar.easy-sidebar-right .navbar-header {
	margin: 0 -15px;
	float: none;
}
 
.navbar.easy-sidebar-right .navbar-brand {
	margin: 0;
}
 
.navbar.easy-sidebar-right .navbar-toggle {
	display: inline-block;
}
.navbar.easy-sidebar-right .navbar-toggle span.icon-bar:nth-child(2) {
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transform: translate(2px, -5px) rotate(45deg);
	transform: translate(2px, -5px) rotate(45deg)
}
.navbar.easy-sidebar-right .navbar-toggle span.icon-bar:nth-child(3) {
	display: none;
}
.navbar.easy-sidebar-right .navbar-toggle span.icon-bar:nth-child(4) {
	-webkit-transform-origin: 0 50%;
	transform-origin: 0 50%;
	-webkit-transform: translate(2px, 4.5px) rotate(-45deg);
	transform: translate(2px, 4.5px) rotate(-45deg);
}
 
.navbar.easy-sidebar-right .nav.navbar-nav {
	margin: 7.5px -15px;
	float: none;
}
.navbar.easy-sidebar-right .nav.navbar-nav>li {
	float: none;
}
.navbar.easy-sidebar-right .nav.navbar-nav>li>a {
	padding: 10px 15px;
}
 
.navbar.easy-sidebar-right .navbar-nav .open .dropdown-menu .divider {
	box-shadow: 0 1px 0 rgba(255,255,255, 0.1);
}
 
 
.navbar.easy-sidebar-right .navbar-form {
	padding: 10px 15px;
	margin: 8px -15px;
	border-top-width: 1px;
	border-top-style: solid;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 rgba(255,255,255,.1);
}
.navbar.easy-sidebar-right .navbar-form .form-group {
	margin-bottom: 5px;
	display: block;
}
.navbar.easy-sidebar-right .navbar-form .form-group .form-control {
	display: block;
	width: 100%;
}
@media (max-width:  768px) {
	body.toggled {
		position: fixed;
	}
}
Step5
完成後，可看到一個按鈕，當按一下就可將左選單的導覽開啟。
梅問題－Bootstrap教學－左右滑出導覽列選單
Step6
而梅干作了小調整，只要把註解中的替換後，就可變成右選單，可看下方的範例預覽，或下載原檔比較容易理解。
梅問題－Bootstrap教學－左右滑出導覽列選單
[範例預覽-右選單] [範例預覽-左選單] [範例下載]
↧

Bootstrap教學－Bootstrap讓網格系統內的多個div高度相同

January 28, 2016, 2:00 pm
$
0
0
梅問題－Bootstrap教學－Bootstrap讓網格系統內的多個div高度相同
　　以前使用Table排版，當一列有三個區塊時，Table會依最三個裡面內容元素最多的高度為主，並將其它二個區塊也一併撐高，但到了DIV版本時，若想要將二個DIV等高，除了將DIV原來的屬性變成table外，不然就是使用javascript，而最近梅干發現一個更簡單的方式，就能將多個DIV變成等高，同時還能套用在Bootstrap的網格系統中，並還支援各瀏覽器，因此也有在使用Bootstrap套件的朋友，現在也一塊來看看，如何將Bootstrap的網格系統中，也讓裡面的DIV變成等高。
Step1
在row層中，再包覆一個equalheight的DIV。
<div class="container">
　 <div class="row">
　　　 <div id="equalheight"></div>
　 </div>
</div>
Step2
接著在equalheight的div中，開始使用Boostrap的網格。
<div id="equalheight">
　　<div class="col-md-4"></div>
　　<div class="col-md-4"></div>
　　<div class="col-md-4"></div>
</div>
Step3
完成後，再每個col-md-*中，再用ehdiv包覆，並在div內就可加入內容。
<div class="col-md-4">
　 <div class="ehdiv"></div>
</div>
<div class="col-md-4">
　 <div class="ehdiv"></div>
</div>
<div class="col-md-4">
　 <div class="ehdiv"></div>
</div>
Step4
最後再加入style，這樣就大功告成囉。

.ehdiv{
　margin-bottom: -10000px;
　padding-bottom: 10000px;
　background-color:#efefef;
}

#equalheight {
　overflow: hidden;
}

Step4
完成後，在一般的桌機尺寸時，DIV則會等高，當變成切換成行動版尺寸時，區塊則會自動縮回原先的大小。
梅問題－Bootstrap教學－Bootstrap讓網格系統內的多個div高度相同
[範例預覽] [範例下載]
↧
Search

Bootstrap教學－Bootstrap Affix滾動式滑出置頂導覽列實作

March 9, 2016, 2:00 pm
$
0
0
梅問題－Bootstrap教學－Bootstrap Affix滾動式滑出置頂導覽列實作
　　那天好友正好北上，就來找梅干聊聊天，就與梅干分享了一個免費的CDN服務，同時就近主機節點就在香港，這與目前知名的cloudflare相較下，還真是近多了，雖然說cloudflare的速度也不差，但礙於中華線路每當晚上時，總會有點卡卡的，因此梅干則是有必要時，才會將它開啟，所以那天梅干就抽來研究一下這免費的CDN服務，結果看著看著，竟然對於上方的導覽列給吸引，這時職業病又來了，雖然這個已不是新作法，但想看看寫法有沒有更簡易些，結果才意外的發現到，原來這間CDN竟然也是使用Bootstrap，同時置頂也是使用Bootstrap內建的Afiix，而這滑出滑入的效果，竟然是用CSS3的動畫語法製作的，而非使用javascript，所以梅干也稍稍整理，並加了一點簡易的判斷，讓選單在版頭下方，當頁面滾動超出多少範圍時，才滑動效果套入，至於要怎麼做，現在就一塊來看看吧!!
Step1
首先，在導覽列後方，設定區塊滑到指定的高度後，加入affix的類別名稱，這邊梅干設定了1000像素。
梅問題－Bootstrap教學－Bootstrap Affix滾動式滑出置頂導覽列實作
Step2
接著在下方的動畫效果，加入CSS樣式中。
.fixed-strip.affix {
top: 0;
}
.fixed-strip {
position: fixed;
top: -100px;
right: 0;
left: 0;
z-index: 9999;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
Step3
接著在/body前，加入javascript判斷，當上方的藍色版頭區塊，大於滾動高度再把動態的效果加入，這時再滾動到1000像素時，就會將剛所設定的動畫效果給套進去啦!。
$(window).scroll(function(){
var win_h = $(document).scrollTop();
if(win_h >= $('#header').height()){
$('.navbar').addClass('fixed-strip');
}else{
$('.navbar').removeClass('fixed-strip');
}
});
Step4
當完成時，畫面滾動到1000像素時，上方的導覽列，就會由向上向下滑出，當小於1000時，就會再向上滑動收回。
梅問題－Bootstrap教學－Bootstrap Affix滾動式滑出置頂導覽列實作
[範例預覽] [範例下載]
↧

Bootstrap必知!內建clearfix解決網格DIV區塊長短腳問題

May 9, 2016, 3:00 pm
$
0
0
梅問題－Bootstrap必知!內建clearfix解決網格區塊長短腳問題
　　有用過Bootstrap的朋友，應該對於Bootstrap的Grid System網格系統，感到相當的便利，只需透過css類別的指定後，就可快速的將畫面分割成所需的版型，而這些區塊的比例，Bootrap早已都計算好了，但這些區塊為能隨著裝置解析不同，而跟著作堆疊，因此都是用浮動靠齊的方式，因此在網格系統中的每一個DIV的高度都要一致，當今天有長有短時，就會造成跑版，因此先前梅干也分享一篇DIV區塊等高的作法，除此之外Bootstrap內建也有相關的屬性可設定，只要加入clearfix後，就可解決區塊長短腳，造成區塊跑版的問題啦!至於怎麼做現在也一塊來看看囉!
Step1
透過Bootstrap的網格系統後，可快速的將版型，分割成所需的數量，但區塊中的內容，若長度不一時，就會造成跑版的問題。
梅問題－Bootstrap必知!內建clearfix解決網格區塊長短腳問題
Step2
這時只需在每個區間下，加入clearfix的div區塊，就可解決此問題啦!
梅問題－Bootstrap必知!內建clearfix解決網格區塊長短腳問題
Step3
重新整理後，梅干這邊特別加了紅框，可看到剛加入的DIV會把區塊包覆起來，但在手機版時，就會多了一塊空白。
梅問題－Bootstrap必知!內建clearfix解決網格區塊長短腳問題
Step4
接著在剛的div後方，再加hidden-xs，讓在手機版時不顯示此區塊。
梅問題－Bootstrap必知!內建clearfix解決網格區塊長短腳問題
Step5
設定完成後，就只會在桌機版才會顯示，切換到手機版時，就會被隱藏起來，因此在手機版就不會再多一塊空白啦!
梅問題－Bootstrap必知!內建clearfix解決網格區塊長短腳問題
↧
↧

CSS3的新單位(vh/vw)讓Bootstrap廣告輪播也支援全版廣告

May 18, 2016, 3:00 pm
$
0
0
梅問題－CSS3的新單位vh/vw，讓Bootstrap廣告輪播也可全螢幕
　　先前曾透過百分比，來將Bootstrap的廣告輪播系統變成全螢幕，但這時圖片就會依照比例，等比的將圖片放到滿版，這時當螢幕的比例與圖片不符時，就會發現到，廣告輪播的切換鈕跑到下方去，同時還會出現捲軸，因此這時若要解決此問題，就只能透過jQuery來計算當前螢幕的顯示比例，再去縮放圖片，但現在有更簡單的方法啦!透過CSS3的新單位vh與vw，就可完成全螢幕啦!而vh與vw到底是什麼單位呢?現在就一塊來了解吧!
CSS3新單位vw：
vw：view width指的是螢幕可視範圍寬度百分比，用法與%相當雷同，當設為10表示為可視範圍10%的意思。
梅問題－CSS3的新單位vh/vw，讓Bootstrap廣告輪播也可全螢幕
CSS3新單位vh：
vh：view height指的是螢幕可視範圍高百分比，有了vh後，終於可實現高度百分百的夢想，就很像早期使用table時，可設定高度100%，高度撐滿整個螢幕。
梅問題－CSS3的新單位vh/vw，讓Bootstrap廣告輪播也可全螢幕
CSS3新單位vmin/vmax：
在了解CSS3新單位的vw與vh後，還有另一單位為vmin和vmax，而vmin指是取得「長、寬較小值百分比」，vmax則是取得「長、寬較大值百分比」，在了解CSS3的新單位，就可將這單位應用到Bootstrap中，將原來的廣告輪播變全版面的廣告。
Step1
只需在CSS中加入以下的設定值。
梅問題－CSS3的新單位vh/vw，讓Bootstrap廣告輪播也可全螢幕
Step2
這樣就Bootstrap的廣告輪播，就會以全版顯示，是不是超EZ的呀!!
梅問題－CSS3的新單位vh/vw，讓Bootstrap廣告輪播也可全螢幕
[範例預覽] [範例下載]
↧

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導覽列擴充，電腦版滑入展開，與第一層支援連結
[範例下載] [範例預覽]
↧

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廣告輪播自動調整大小與單則隱藏控制鈕
↧
Viewing all 53 articles
Browse latest View live
Search