iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 4
2
Modern Web

三十哩路,我的前端學習路程系列 第 4

Day04::Bootstrap學習心得

剛開始接觸Bootstrap的時候剛好處於3跟4版本交替的時候
3的資料才看沒多久4就出來了

文件資料有看沒有懂,知道的會用的也只有row跟col,而且還用得很落漆(台語)
其他的不管怎麼看都看不懂也不知道要怎麼使用,想試著尋求幫助又不知道該怎麼問問題才對⋯⋯

整個版切下來只用到Bootstrap的5%而已
當時就覺得BS怎麼這麼難用?為什麼大家都說BS簡單好上手?

為了瞭解RWD的運作方法,我決定重新學習Bootstrap

很多人都說去看官方文件就夠了,官方文件寫的非常清楚
但是我真的是看不懂,尤其是在看到文件上面海量的資料跟不懂的詞句
我感受到的只有滿滿的害怕與畏懼,況且文件還是中文文件
連中文都看不懂了真的讓我深深的對不起自己從以前到現在的國文老師⋯

在這樣的狀況下我試著列出自己的問題點

  1. 完全不知道該怎麼使用
  2. 不知道class名稱該加到哪、我甚至不知道那些是class名稱
  3. 不知道該加哪些class
  4. 不清楚不知道不曉得跑版原因
  5. 文件太多,觀看壓力大

諸多的不明白都是從youtube上搜尋Bootstrap的教學影片慢慢看才看懂該怎麼使用

當時學習的時候是靠下面幾樣東西慢慢摸索的
網站架設基礎課程 HTML + CSS 10 Bootstrap版面佈局-youtube

codecademy bootstrap

Bootstrap 4 超詳盡解析-ppt

後來對於Bootstrap的理解就是把CSS的內容挪到HTML上面
像是margin-right和margin-left如果要同時放在HTML上面就會變成class="mx-尺寸"(x是水平)
col要在row裡面、row要在container裡面這樣col才會有效

瞭解之後要馬上實際運用也會有些障礙與困難
我會先把CSS刻好,在一個個把CSS挪到HTML上
像display:flex就是d-flex
displey:block就是d-block
Width:100%就是w-100
不知道要怎麼寫的話就把關鍵字拿去官方文件上面查詢

從完全不懂到現在能使用Bootstrap完成一個版型,如果也像我一樣完全看不懂文件在寫什麼
你可以試試看:

  1. 先把文件的大標題的看過一次,至少知道有哪些class可以使用
  2. 把CSS樣式先寫好
  3. 多用多熟悉

來試著做做看吧

以上是我在學習Bootstrap時遇到的困難與解決方法,分享給大家


上一篇
Day03::我所知道的 CSS選擇器
下一篇
Day05::CSS畫圖好好玩
系列文
三十哩路,我的前端學習路程30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
king742171
iT邦新手 2 級 ‧ 2017-12-07 16:30:56

col要在row裡面、row要在containet裡面這樣col才會有效

containet 修改 container

Width100%就是w-100

Width100% 修改 width:100% ((冒號加一下唄))

修改好了!
謝謝你(๑ˊㅂˋ๑)/

我要留言

立即登入留言