[轉職軟體工程師、自學程式語言] Landing Page & Bootstrap & CSS3 第一章 : Bootstrap Overview

部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/ 

我們今天講的主題是， Landing Page & Bootstrap & CSS3，大綱如下


第一章 : Bootstrap Overview

第二章 : Layout    (Flexbox、Media Queries、Containers & Grid System)

第三章 : Components & Tools



第一章 : Bootstrap Overview

簡單來說就是使用人家已經寫好的 CSS、JS 來加速你的網頁製作，不用重複做一些已經做過的事

使用方法就是把 CSS、JS 的 link 貼到 HTML 的 <head> 裡然後你自己的CSS要放在下面

然後要包含這個 <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

圖片輸入 class="img-fluid" 它便可套用 Bootstrap 裡的 CSS 樣式

image​

image​


Button 的部分則是輸入 class="btn btn-primary" 它便可套用 Bootstrap 裡的 CSS 樣式，不同樣式有不同的 class，如下

image​

image​


使用 box-sizing : border-box 讓它包含整個 border 來去做調整，像上一篇所提到的我們希望它佔視窗的50%，我們就會使用這個

然後 Bootstrap 也跟隨這個規範，他們也通常使用 rem 來做樣式單位的調整，rem 就是上一篇也提到的，它是跟著 HTML 的 font size 的大小的倍數來調整的

image​


部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/

第一章 : Bootstrap Overview

第二章 : Layout    (Flexbox、Media Queries、Containers & Grid System)

第三章 : Components & Tools

部落格轉移，給讀者更好的閱讀體驗，本文網址 : https://janstockcoin.com/blog/

痞客邦 : https://warlimit.pixnet.net/blog?utm_source=PIXNET&utm_medium=navbar&utm_term=my_blog

隨意窩 : https://blog.xuite.net/warlimit/blog

Blogspot : https://warlimit.blogspot.com

如果您喜歡我的文章，請幫我在下方拍手區按圓圈圈裡的拍手圖案5次!
我將得到 Likecoin 的回饋:)

回饋由 Likecoin 基金會出資，您只要註冊/登入帳號(fb、google帳號都可以註冊，不超過1分鐘)，按五次左鍵，可以贊助我的文章且完全不會花到錢！若願意成為讚賞公民那是十分感激。
支持創作，正向交流:)

留言

張貼留言

這個網誌中的熱門文章

如何開始 Podcast 製作教學 5大步驟 ! 不需任何成本方法

圖片
  部落格轉移，給讀者更好的閱讀體驗， 本文網址 :   https://pse.is/3klspx   如何開始 Podcast 製作教學 5大步驟 ! 如果您正在尋找指導您 如何開始 Podcast 的指南 ，那麼您絕對來對地方了…… 開始播客並不難，但您需要執行許多步驟才能啟動播客。 在本 Podcast 製作教學 中，我們將引導您完成該過程的每一步： 選擇主題和名稱 節目和劇集格式 封面藝術創作 前奏和後奏音樂 設備選擇 錄音和編輯 提交給 Apple 播客 (iTunes) 促銷提示 以及更多… 與 Youtube 相比，播客是一個不那麼擁擠和競爭激烈的領域，因此 現在 是開始的最佳時機。 截至 2021 年 6 月，播客數量剛剛超過 175 萬，但博客數量超過 6 億！ 如果你想知道，在過去的幾年裡，我已經幫助成千上萬的人開始播客，並且我自己也在不同的行業開始了一些節目。 想要快速開始播客？註冊 Firstory 、 SoundOn ，上傳您的音頻文件，然後平台會幫你自動提交給各個播放平台 Spotify 、 KKBOX 、 Apple Podcast 、 Google Podcast 、 Pocket Casts 。 讓我們開始吧： 規劃 這是 Podcast 製作教學 的初始（經常被忽視）階段。在您繼續前進之前，您會想在這裡度過大量時間。 隨時拿出筆記本或白板，這樣您就可以像專業人士一樣開始計劃您的播客。 選擇一個主題 您希望您的播客專注於特定主題或細分市場。 嘗試將範圍縮小到您可以在多集（100 多集）中談論的內容，但范圍不會太廣，以至於您不會吸引潛在觀眾。 例如，與其進行“戶外”播客，不如談論遠足——或者更具體的，比如遠足。 隨著您越來越受歡迎，您可以隨時擴展您的主題。 重要提示： 請參閱有關選擇名稱的部分，以確保您不會限制自己。 選擇共同主持人（不一定需要） 您有想要共同主持的朋友、商業夥伴或同事嗎？ 如果您有共同主持人，開始播客會容易得多。 如果你們就某個話題分享自己的觀點，自然會進行更吸引人的對話。讓某人保持正軌也很有幫助。 此外，您可以拆分編輯、推廣等其他任務。 不過也有缺點。 你要確保你們都長期致力於它。它有助於從一開始就設置時間表，這樣您就知道每週什麼時候開...
閱讀完整內容

[Udemy推薦課程] Day 2 The Web Developer Bootcamp 2021 [轉職軟體工程師，自學程式語言]

圖片
  部落格轉移，給讀者更好的閱讀體驗，本文網址 :  https://janstockcoin.com/blog/ 今天大綱如下 : ➤ 了解Inline Elements 和 Block Elements ➤ - div & span ➤ - hr & br ➤ - sup & sub ➤ - em & strong ➤ HTML 符號實體代碼 ➤ - header & footer ➤ - main & nav ➤ 快速縮寫 ➤ 了解 Inline Elements 和 Block Elements 接下來，我們介紹兩個新元素，Divs 和 Span，但首先要介紹兩個重要的  Inline Elements 和 Block Elements 。這些術語指的是給定元素如何實際適應文檔中的內容流。 Block Elements : Block Elements始終從新行開始。Block Elements始終佔用可用的全部寬度（盡可能向左和向右伸展）。Block Elements具有頂部和底部邊距，而Inline Elements則沒有。 Inline Elements : Inline Elements不會從新線路上啟動。Inline Elements僅佔用必要的寬度。 ​ 部落格轉移，給讀者更好的閱讀體驗，本文網址 :  https://janstockcoin.com/blog/ ➤ - div & span <div> HTML <div> 元素（或是 HTML 文件  Block Elements ）是本質上不特別代表任何東西的通用内容流容器。它可以成為樣式化用途（使用 class 或 id 屬性）、或是共享如 lang 同一個屬性的元素集合。它應該在沒有其他適合的語義元素（例如<article> 或 <nav> ）可用時才用。 ​ ​ <span> HTML <span> 元素是短語内容的通用   Inline Elements ，並没有任何特殊語義。可以使用...
閱讀完整內容

2021年一夜致富，市值60億美元， 什麼是以太坊經典 ETC

圖片
部落格轉移，給讀者更好的閱讀體驗， 本文網址 :   https://pse.is/3j2ys3 什麼是以太坊經典 ？ 什麼是以太坊經典 ？以太坊經典（ETC）是一個去中心化、基於區塊鏈的開源計算平台，也是一種加密貨幣。它允許開發人員構建和部署智能合約——自主、自動執行的代碼塊，根據預定義的條件觸發某些操作。 ETC 網絡是無需許可的，這意味著任何人都可以加入和執行交易，只要他們擁有兼容的加密錢包。在臭名昭著的 DAO 攻擊之後，由於以太坊社區內的意識形態和技術分裂，它於 2016 年成立。 概括 什麼是以太坊經典 ？以太坊經典 (ETC) 源於以太坊社區中的意識形態和道德裂痕，至今仍引發爭議。2016 年，對運行在以太坊 (ETH) 區塊鏈上的第三方應用程序進行了重大黑客攻擊，導致價值數百萬美元的以太幣或 ETH 被盜。作為回應，以太坊區塊鏈經歷了一次硬分叉，從本質上扭轉了官方分類賬中的黑客行為，並將被盜的 ETH 歸還給其原始所有者。 相比之下，這個分叉的另一個分支保持了包括黑客在內的官方賬本不變——旨在保留一個 100% 不可變的賬本。換句話說，由此產生的兩個區塊鏈只有一個方面不同：一個仍然包含黑客攻擊和被盜 ETH 的記錄，而另一個本質上倒轉時間，就好像黑客從未發生過一樣。編輯後的區塊鏈保留了以太坊 (ETH) 的綽號，而原始/未更改的區塊鏈被稱為以太坊經典 (ETC)。 以太坊經典的起源 區塊鏈經歷硬分叉並將自己分成不同的區塊鏈的原因有很多。有時分叉是技術升級的結果。其他分叉源於社區對擬議協議變更的深刻分歧，最終將項目及其支持者分裂為不可調和的派系。此類協議更改可能來自改進現有功能的前瞻性努力，也可能是對錯誤和黑客攻擊造成的損害的反應。後一個實例導致了以太坊分叉，從而導致了以太坊經典（ETC）區塊鏈的創建。 2016 年，以太坊區塊鏈（稱為The DAO）上的一個應用程序遭到黑客攻擊，導致大約 360 萬個以太幣 (ETH) 被盜——2016年價值約 5000 萬美元——隨後價值數十億美元。為了進一步說明這次黑客攻擊的嚴重性，當時流通的 ETH 大約為 7200 萬個，因此黑客竊取了現有所有 ETH 的 5% 左右。 為了從以太坊的賬本中清除黑客行為並將資金返還給其原始所有者，以太坊核心開發人員選擇實施硬分叉。新創建的賬本逆轉了黑...
閱讀完整內容