如果你對Web開發感興趣，學習使用Bootstrap是必要的基石。請閱讀以獲得一個很好的介紹。
本週，讓我們看看Bootstrap。Bootstrapping網站在2011年變得非常流行。它為什麼變得如此受歡迎？兩個主要原因：開發人員更容易 - 開發自定義CSS非常乏味; 它提供了一致的用戶體驗 - 由Twitter創建，人們知道如何與頁面進行交互，因為他們已經使用Twitter對佈局進行了培訓。
如今，在創建自定義網頁時，Bootstrapping是設計的最低期望。這不僅僅是一個設計決定的期望。我們會明白為什麼。
請記住我們製作的可愛網頁？
是的，那一個。再次打開備份，因為我們將做一些簡單的更改並將體驗從單調變為製造。
開始非常簡單。我們所要做的就是換出index.html文件中的樣式錶鏈接。我們不是指向我們創建的文件，而是指向CSS樣式表的Bootstrap雲託管。
在標題中刪除樣式錶鏈接。在它的位置上，在引導鏈接標記中粘貼。
< link rel = “stylesheet” href = “https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css” integrity = “sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4” crossorigin = “anonymous” >
保存您的更改。現在在瀏覽器中打開您的index.html文件，並查看該更改如何影響您的應用。
我們的一些樣式不存在於Bootstrap樣式中，因此您可能會立即注意到這些顏色變化。你可能注意到的另一件事是字體是不同的。Bootstrap的默認字體與瀏覽器不同。我們看到的最後一個關鍵區別之一就是按鈕。按鈕造型比默認更大，更平整。
我們來更新一些樣式標籤。
回到Bootstrap網站上，您可以找到關於樣式的文檔。
如果我們瀏覽文檔，我們可以找到更多關於樣式圖像的信息。看一看！轉到文檔，然後是內容，然後轉到圖像。
我們可以使圖像響應屏幕尺寸和密度。在設計網頁時，您總是需要考慮桌面和移動瀏覽器用例。許多觀眾將通過移動瀏覽器進入，並且需要考慮網絡和移動設備上的用戶體驗。
如果您在圖像頁面上向下滾動，則會針對響應式圖像，縮略圖和圖片進行造型。讓我們嘗試一下我們圖片的響應式樣式。
複製造型代碼片段的類部分。
class="img-fluid"
在文本編輯器中打開您的index.html文件。將類屬性添加到已有的圖像標記中。
保存您的更改，並在瀏覽器中刷新您的index.html文件。點擊加載圖片按鈕。在更改瀏覽器窗口大小時，請注意圖像的大小如何改變而不是被切斷。
Bootstrap還具有樣式標籤等新標籤，可在Content> Code下找到。讓我們將我們的第二段作為計算機輸出。
用標籤替換 標籤。 And then I added more that I want to be in a new paragraph. 保存您的更改並在瀏覽器中運行index.html文件。 但是現在我們失去了一些造型！鏈接不再處於新行。當我向你展示如何分解事情時，我們使用了 用 在Bootstrap文檔的Utilities部分下，我們可以找到關於如何設置這些div盒的更多信息。看看顯示部分，我們可以找到如何顯示文本的例子。我抓住了藍色的D塊的例子。 class="d-block p-2 bg-primary text-white" 現在我的div看起來像這樣： And then I added more that I want to be in a new paragraph. 當我保存更改並在瀏覽器中刷新我的網頁時，它看起來像這樣： 繼續研究Bootstrap文檔以查看我們可以用它做的所有事情。它使得造型更容易一些。下次準備做一些導航欄吧！
標籤。雖然這可行，但這不是一個好習慣。我們應該使用的是風格
閱讀更多 愛碼農 的文章
