iT邦幫忙

0

[請益] 網頁後端開始走前端

Zaku 2018-02-12 00:37:335167 瀏覽

想請問各位全端工程,後端往前端走時,比較建議整個刻版面都自己動手來,還是直接用bootstrap等框架,要玩熟不易,但上手還算滿快的,下下標籤,但這可能會有個問題就一直處在一知半解的情況下。還是說會比較建議先手動練熟了,在用上bootstrap等框架輔助,比較真實知道自己在玩什麼。

各位過來人可否分享一下自己的經驗。

看更多先前的討論...收起先前的討論...
froce iT邦新手 1 級 ‧ 2018-02-12 02:27:45 檢舉
當然是手動熟了再來用框架。
至少ID、CLASS、CSS selector等觀念要熟。
Zaku iT邦新手 5 級 ‧ 2018-02-12 09:32:22 檢舉
基本概念是還是有拉..,只是真的要排版跟抓問題,會滿慢的
純真的人 iT邦研究生 5 級 ‧ 2018-02-12 10:41:36 檢舉
最後全都是用記事本方式在寫Code
因為一邊寫Code一邊腦中就出現模組版面0.0..
複製貼上修改...
Zaku iT邦新手 5 級 ‧ 2018-02-12 10:51:39 檢舉
啊?大大可以再多一點描述嗎
froce iT邦新手 1 級 ‧ 2018-02-12 14:31:46 檢舉
說真的,前端真的要作到邊想畫面邊就浮現出 code。
小魚 iT邦研究生 3 級 ‧ 2018-02-13 12:06:40 檢舉
多用就會了

1 個回答

1
暐翰
iT邦研究生 1 級 ‧ 2018-02-12 11:19:39

問題:後端往前端走時,比較建議整個刻版面都自己動手來,還是直接用bootstrap等框架

答:以個人經歷回答,都需要了解

我去W3C依序學完

HTML

CSS

Javascript

JQuery

bootstrap

就可以使用bootstrap拉公司後台管理網頁的大綱模板

知道如何套用第三方模板

然後配合chrome 網頁工具(按F12) 去修改細節,

這樣有個好處,寫完即所見


問題:顆顆,我是如果不用bootstrap要我空手rwd的話
回答:
假如要了解原理

rwd最主要grid原理
切x等份,百分比以100/x

<style>
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
</style>

@media概念:
舉例:想做當寬度在500px以下時背景顏色是藍色
500px以下時背景顏色是綠色

<style>
body {
    background-color: green;
}

@media only screen and (max-width: 500px) {
    body {
        background-color: blue;
    }
}
</style>

這些也都可以在bootstrap github裡面學到
所以先熟bootstrap框架,在看source code來學,
之後要重頭自己手刻css,做細部調整都可以自己做調整,就耗費一點時間而以

看更多先前的回應...收起先前的回應...
Zaku iT邦新手 5 級 ‧ 2018-02-12 12:21:44 檢舉

我有依序學玩了XD,不是完全沒概念得情況下,只是css知道歸知道,但使用上並不那麼熟悉,需要一直查的狀況,jquery那些沒什麼問題F12也大概會用

Zaku iT邦新手 5 級 ‧ 2018-02-12 12:23:33 檢舉

就比如說你要我手動作出rwd可能就做不太出來,有一點類似剛開始寫程式,雖然知道迴圈,但要拿回圈來做複合式應用時卡卡的等等的狀況

暐翰 iT邦研究生 1 級 ‧ 2018-02-12 12:28:17 檢舉

你應該卡在多練習階段而以 :)

暐翰 iT邦研究生 1 級 ‧ 2018-02-12 12:28:53 檢舉

rwd把bootstrap grid練好就可以應付很多情況了

Zaku iT邦新手 5 級 ‧ 2018-02-12 13:40:12 檢舉

顆顆,我是如果不用bootstrap要我空手rwd的話

暐翰 iT邦研究生 1 級 ‧ 2018-02-12 14:28:33 檢舉

空手RWD原理可以使用css的grid跟@media,請看內文

froce iT邦新手 1 級 ‧ 2018-02-12 14:33:38 檢舉

CSS的話要搞懂單位。搞懂的話 RWD 其實還好。

Zaku iT邦新手 5 級 ‧ 2018-02-12 15:48:02 檢舉

也不是單單指RWD只是表達在綜合應用上很生疏,語法也不是頂熟,像回文裡的@media only screen and 。感謝大大

我要發表回答

立即登入回答