怎么輕松學(xué)bootstrap?

發(fā)布時(shí)間:2018-10-14    知識欄目:廣州網(wǎng)頁(yè)設計

bootstrap什么的,還有一些培訓班里流傳出來(lái)的,感覺(jué)暈乎乎的,不知所云。


相信很多沒(méi)有什么基礎的初學(xué)者學(xué)習它定會(huì )感到無(wú)從下手、云里霧里、難以把控。

最后實(shí)在是看不出它好在哪里,學(xué)了也就相當于白學(xué)了,也就逐漸的放棄了。

其實(shí)bootstrap非常有用。我結合自己對它的使用經(jīng)驗總結一些關(guān)于如何輕松學(xué)習它的方法技巧。

包含:對它的全面重新認識、學(xué)習方法,學(xué)習內容、以及它的常用功能和對待它的正確態(tài)度等方面內容。

首先來(lái)看看它是什么?

學(xué)了它有什么用呢?如果不學(xué)行不行?要回答這個(gè),那就是要說(shuō)說(shuō)它是什么了。

它是在html,css,js,jquery基礎上進(jìn)一步封裝出的一個(gè)東西,定位為前端框架,具有跨平臺兼容功能,非常善于做自適應的效果和提供常用便捷的效果。

所以,它自然包含了很多功能。如:下拉功能。所以如果你想要深入學(xué)會(huì )它,你首先得會(huì )js和jquery。

那么使用它必然就是會(huì )和js,jquery一起結合使用,方能應用自如。

如果真正是零基礎,我建議你先不要來(lái)學(xué)它,還是先了解一些html,css,js,jquery這些支撐它的內容。

2:學(xué)習方法

一開(kāi)始你不要試著(zhù)學(xué)習它的所有功能,包括某個(gè)功能的所有實(shí)現效果,不要貪,不要想著(zhù)一口氣吃成個(gè)胖子。

這樣很容易打擊你的信心。

比如我一開(kāi)始使用的時(shí)候就只使用它的樣式。這樣容易上手,如給a標簽添加個(gè)class="btn btn-primary",確實(shí)可以看到按鈕變的好看的效果。

又如:面包屑導航。只要寫(xiě)上去就可以看見(jiàn)效果,這些小效果會(huì )給自己增加信心。而很多的時(shí)候你用的最多的也是這些小效果......

至于想要的行為,你可以試著(zhù)先自己用js或jquery來(lái)實(shí)現,能實(shí)現就更好了,至少你知道了那些行為的來(lái)源。

此時(shí)你再慢慢調用它的js來(lái)實(shí)現功能,畢竟它做了兼容性處理。

一開(kāi)始可以實(shí)現那些小一點(diǎn)的功能,如:下拉功能。你可以自己寫(xiě),可以用原生態(tài)js自己寫(xiě),用jquery自己寫(xiě)。

這樣當你寫(xiě)的和它的差不多了,你其實(shí)就在慢慢摸索它做的那些行為的來(lái)源了。

當你使用它的時(shí)候,自然就有據可依知道它的來(lái)源了,也就變得得心應手了,興趣也跟著(zhù)增加起來(lái)。

要等你用它比較多了,你就可以深入的去看它的源碼了,它的html,css,js,相信這時(shí)候你會(huì )對它更深入的認識了,而且能隨心所欲的使用和修改。

此時(shí)你就可以把它派上你的項目的各個(gè)用場(chǎng)。

3:學(xué)習內容

它很重要的一個(gè)東西就是布局:柵格布局。這個(gè)很有用,但也很抽象,很多初學(xué)者學(xué)了很久不知道怎么用它,什么時(shí)候用它,用來(lái)干什么。

于是就經(jīng)常被初學(xué)者放棄了,有點(diǎn)“撿芝麻、丟西瓜”的味道。它的神奇之處當然就沒(méi)感覺(jué)不到了。

一些常用的class,如:btn,btn-primary,如:.table 等。然后再看一下代碼稍微多一點(diǎn)的功能如:
面包屑導航

導航條

面板

注意:會(huì )用一兩個(gè)都會(huì )讓你興趣慢慢培養起來(lái),所以不要放棄那些只要稍微用一下就能學(xué)會(huì )的小功能的影響力。

4:對待bootstrap的態(tài)度

不要要求太完美,能用多少就用多少。它只是幫你快速的架出某個(gè)功能的架子,并不是一調用它就一定會(huì )完美。

很有可能要修改它,包括修改它的css,js行為,或者添加個(gè)沒(méi)有的效果。這樣才能讓它實(shí)用在各種場(chǎng)合。

比如它的面包屑導航,通常你復制過(guò)來(lái)了粘貼到自己的項目中就可以看到一個(gè)導航條,但是顏色、字體大小,文字和符號直接按的分隔距離等可能都不適合你的需求。

此時(shí)你千萬(wàn)不要認為你還不會(huì )用bootstrap,其實(shí)你已經(jīng)會(huì )用了。

你要做的而且必須要做的就是要在它的基礎之上重新調整它。添加新樣式,并結合你需要的功能添加其他的行為效果。

所以對待bootstrap,一定不要迷信它,不要認為它是萬(wàn)能的和完美的。

因此也就不要認為一旦調用了它的什么功能,它就應該100%的滿(mǎn)足你需要的任何要求。

它沒(méi)有什么標準答案,只是匹配程度是多少而已。你總需要修改的。

因此,應該不斷加強css,js,jquery的學(xué)習,因為你遲早要修改,因為它的意義就是幫你搭建90%,而你總要細調那10%。

如果對它要求太高了,你就會(huì )失望太大,就會(huì )懷疑自己,這樣的效果就不好了。

5:要多使用它

勤能補拙,熟能生巧。在你的項目中都試圖去使用它,不要怕錯。慢慢總結和積累經(jīng)驗。不能因為怕錯就不用它了。

能用多少就用多少,多試著(zhù)修改和調整,一定要記錄使用經(jīng)驗。用的越來(lái)越多,也就越來(lái)越順手了。

如果不知道自適應是什么效果,你可以用電腦把瀏覽器的寬度縮小,然后慢慢的拉大。


+相關(guān)資訊

廣州網(wǎng)站建設 廣州網(wǎng)站設計 廣州網(wǎng)站開(kāi)發(fā)

工作室工作地點(diǎn)分布:廣州  深圳  武漢  湖南


(c) Copyright 2008-2024 廣州綠源電子商務(wù)有限公司. All Rights Reserved.