前端框架bootstrap4.4入門教程,使用方法實例響應式布局實戰

2020-12-04 陸柏熺

bootstrap是我最喜歡的前端框架，沒有之一，當前的最新版本是bootstrap4.4.1，和之前的3.X版本相比較有較大的變化，不過都是屬於各種標籤的分離，方法還是一樣的，在網上各種教程雖多，但是對於入門還不是不夠，很多入門教程講得雲裡霧裡，看不懂到底在說些什麼。我覺得使用具體的實例來結合相關的標籤使用才能真正的加深理解。

bootstrap4.4.1

bootstrap是移動優先的前端開發框架，本身是為了更好地適應各種移動瀏覽器而設計的，所以前端代碼必須使用HTML5和css3來寫，從bootstrap4.0版本開始引入了超小屏幕小於576px寬度的網格。bootstrap的優勢在於其對各種瀏覽器兼容性已經做好了測試，除了那些低版本的瀏覽器不支持外，完全不用擔心瀏覽器的兼容問題。

在使用bootstrap 4x版本時需要記住其對個瀏覽版本和系統的支持情況：

Chrome >= 45Firefox >= 38Edge >= 12Internet Explorer >= 10iOS >= 9Safari >= 9Android >= 4.4Opera >= 30

01使用bootstrap創建一個頁面

首先去bootstrap官方網站上下載源碼，也可以使用相關的CND來創建，具體方法是：下載bootstrap，找到dist文件夾裡面的css和JS文件，將帶有min的拷貝到你項目中對應的css和JS文件夾裡面。在前端頁面head標籤裡面引入css文件：

<link rel="stylesheet" href="/css/bootstrap.min.css" >在頁面</body>標籤的前面添加引入JS代碼，注意jQuery、popper、和bootstrap這三個js的順序不能變，必須首先引入jQuery，其次是popper，最後才是bootstrap，因為他們之間有相互依賴的關係，改變了順序會導致代碼失效：

<script src="/js/jquery-3.4.1.slim.min.js"></script><script src="/js/popper.min.js"></script><script src="/js/bootstrap.min.js"></script>

bootstrap的js文件載入順序

帶有min的文件是經過壓縮後的文件，體積會比較小，加載速度更快，比如bootstrap.min.js就是經過壓縮後的，而不帶min的比如bootstrap.js就是沒有壓縮處理過，適合於需要修改其中的代碼使用，差別就是壓縮與否的關係。

修改head標籤使頁面實現自適應，把前端代碼修改為HTML5，並且添加編碼識別和自適應meta標籤，代碼如下：

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">，這一句是實現響應式的重要標誌。

完整bootstrap代碼

將上面的代碼保存為test.html文件，使用瀏覽器打開這個文件，可以看到裡面沒有什麼內容，但是bootstrap的整個文件已經成功全部載入，下面接著編寫相關代碼即可。

02網格系統grid的使用

bootstrap最重要的核心功能就是網格系統，通過sm/md/lg/xl來對不同寬度的屏幕進行區分，最外層容器使用container標籤進行約束。記住網格默認一共是12列，下圖所示，每一列佔用1個網格。

bootstrap網格

為了使不同寬度的屏幕都能自適應鋪滿這個屏幕，所以有sm/md/lg/xl這個標籤，在實戰中幾乎經常用到。下圖所示，這個網格系統光是這個子說幾列是很難理解，記住總的12格，然後下面通過實例來說明。

在網頁的body標籤裡面寫如下代碼：

<div> <div></div> </div>由於container標籤默認左右會添加15px空白，使用row來清楚掉，上面就是標準的寫法，然後再進行網格化，實現響應式布局。繼續在row標籤內添加<div></div>，col代表自動的意思，對所有的屏幕都是100%寬度，在bootstrap4.2以上版本中col=col-12。

單純地將網格實在太難理解，而且有些抽象，我這裡準備了一個頁面上左邊顯示文章內容，右邊顯示相關推薦內容的實例，這樣子會很容理解，直接上代碼：

網格系統文章詳情頁左右分欄

上面第13行和19行的div是並列的關係，col-12指不論在什麼樣寬度的屏幕上都顯示為12格填充滿整個屏幕，col-lg-8指當屏幕寬度大於等於992px時，顯示8格，lg代表的是大於等於992px的屏幕，記不住的話可以查看官方幫助文檔，第19行的div中col-lg-4代表在大於等於992px的屏幕上顯示4格。將代碼保存，用谷歌瀏覽器打開，在頁面的空白處點滑鼠右鍵---檢查，會彈出如下圖所示的會話框，點那個「手機」圖標，就可以了看到在右側會有一個雙豎線的地方，滑鼠放上去左右移動改變屏幕的大小，此時如果屏幕寬度小於992px，你會發現右邊的標題會自動下移，並且是100%寬度。

響應式布局實戰案例

使用網格需要注意sm/md/lg/xl這幾個分別代表的不同寬度是多少，把12個網格進行不同的拆分就可以了，只要總的加起來是12格就沒有問題。網格的使用非常簡單，但是有些抽象難以理解，你可以把上面的代碼拷貝本地實戰。

理解了網格的使用其他的就容易多了，bootstrap提供了個性化的應用標籤和一些常用的組件，比如輪播圖代碼、當行代碼都是開源直接複製過來，調用你自己網站的數據就能實現。而個性化的標籤則有這些。

03使用個性化標籤代碼

1、顏色類：為某個元素或文字添加顏色，背景顏色，在文檔utilities---colors裡面可以找到適合於的的顏色，比如代碼：

<div>背景灰色，文字綠色</div>直接用相關的顏色代碼，非常方便。

2、邊框類：使用border-*，星號代表top、right、left、bottom值，即可快速為元素添加邊框；如果需要為邊框添加顏色，使用border-*的方式，顏色代碼同樣在文檔中utilities---border裡面可以找到，因為記不住，所以不用記，需要的時候去複製就好了；還有Border-radius（為元素添加圓角效果）也在這裡，使用rounded即可實現。

3、內外邊距：使用margin和padding的時候可以根據需要，比如my-2代表margin上下分別設置為0.5rem，mr-1代表margin right設置為0.5rem，px代表padding left，pb代表padding bottom。

這些為我名勝區很多的代碼量，直接使用即可，在學習bootstrap4.4以上版本時，難點是網格系統。學習的過程中先不要忙著寫代碼，先去把幫助文檔從頭到尾看一遍，英文的看不懂也沒關係，只要能看懂一部分代碼即可，有一個大概的印象了，再寫代碼的時候邊寫邊熟練，這樣學起來很快。

相關焦點

  • bootstrap容器container響應式布局,各種使用方法詳解
    container是bootstrap頂層布局容器，這是一個必須使用的標籤，在每一個頁面上都會用到，是實現響應式布局的核心組成部分，在bootstrap4.4和老舊版本上有著細微的差異，在4.4.1版本中進行了升級，使得container標籤更加靈活方便。
  • 入門bootstrap,簡潔清新的前端框架
    最近 寫項目用到bootstrap確實使用起來很方便，而且風格簡潔，很適合自己做項目時用來當作前端框架。下面是bootstrap介紹：2011年，twitter的「一小撮」工程師為了提高他們內部的分析和管理能力，用業餘時間為他們的產品構建了一套易用、優雅、靈活、可擴展的前端工具集--BootStrap。
  • bootstrap響應式布局
    什麼是響應式 Web 設計 　　響應式 Web 設計是一個讓用戶通過各種尺寸的設備瀏覽網站獲得良好的視覺效果的方法。例如，您先在計算機顯示器上瀏覽一個網站，然後在智慧型手機上瀏覽，智慧型手機的屏幕尺寸遠小於計算機顯示器，但是你卻沒有感覺到任何差別，兩者的用戶體驗幾乎一樣，這說明這個網站在響應式設計方面做得很好。
  • bootstrap前端開發框架到底應該怎麼用?從整體看bootstrap
    做一個網站，要先有前端才有後端。對於很多個人開發者來說，前後端都要自己寫，就需要有一個高效率的開發框架，說白了就是怎麼省事、省力，就怎麼辦。想要快速開發出前臺的靜態頁面，bootstrap是很好的選擇，它是主流的前端開發框架，能夠快速構架前端頁面，如果你理解了它的架構，開發一個靜態的博客首頁，兩個小時就能搞定。好了，進入正題，說說bootstrap。
  • Twitter BootStrap:前端框架利器
    樣式的安裝有多種方法，圖1展示的是一種常用的調用樣式方法「link」。這 裡有兩個關鍵點，其中「bootstrap.css」是Bootstrap中的基本樣式文件，只要使用Bootstrap就必須調用這個文件。
  • 突然領導讓我搭前端頁面，我好方，20分鐘玩轉Bootstrap
    作為一個後端，寫前端好難，怎麼寫好前端？基於HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷。 而且它還支持響應式布局。--第一步：將bootstrap全局css樣式文件引入--><!--響應式的開關--><meta name=&34; content=&34;><!--第一步：將bootstrap全局css樣式文件引入--><link type=&34; rel=&34; href=&34;><!
  • 用 Bootstrap4 製作響應式網頁一(安裝框架)
    bootstrap 是全球最受歡迎的前端開源工具庫，它支持 Sass 變量和 mixin、響應式柵格系統、自帶大量組件和眾多強大的 javascript 插件。本文將以教程文檔的方式演示一下如何用 Bootstrap 前端框架製作響應式網頁(適用pc、平板、手機一體式訪問)。此部分是引用必須的框架文件我們在文檔head部分必須先引用框架的核心文件，包括js和css兩部分。
  • 新手也能成專家，2020年最新精選的bootstrap書資源
    除了令人驚豔的項目實例，本書還向讀者介紹了很多實用插件、框架，以及前端開發的工作流程，這些知識和技術並不局限於Bootstrap。特別地，作者用相當篇幅介紹了LESS的基本原理和使用方法，讓即使從未接觸過LESS的人也能感覺遊刃有餘。
  • Bootstrap4.4.1網格實現響應式布局,只需要掌握這一點就行
    實現前端網頁實現響應式布局如果是自己寫代碼來實現真的挺困難的，但是使用bootstrap框架就非常容易了，即使不懂前端開發也可以很好地駕馭。當前最新版本是bootstrap4.4.1，和之前的老舊版本相比較在細節方面做了很多的優化和升級，其中網格系統是實現網頁響應式的核心組成部分。
  • 前端框架bootstrap和layui有什麼區別
    Twitter公司維護的框架，很多做前端的最愛，尤其是響應式網站，第一個想到的框架就是Bootstrap，Bootstrap的柵格系統很經典，我們團隊目前用的框架也是借鑑了Bootstrap的思想。再來看看Layui官方的定義layui 是一款採用自身模塊規範編寫的前端 UI 框架，遵循原生 HTML/CSS/JS 的書寫與組織形式，門檻極低，拿來即用。
  • 使用bootstrap4.4製作織夢文章詳情頁自適應模板實戰
    bootstrap4.4已經發布，新版本的普及是大勢所趨，任何技術都需要實戰才能學到其中的精髓，今天決定發布這一篇bootstrap與dedecms想結合的綜合使用方法。我之前的教程裡面有單獨講解bootstrap的安裝，如果還不會的話請翻閱我的老文章。
  • 響應式布局 bootstrap案例
    前端響應式開發介紹響應式布局指的是同一頁面在不同屏幕尺寸下有不同的布局。
  • 前端框架 Bootstrap 4.4.0 發布
    前端框架 Bootstrap 4.4.0 發布了，以下是更新內容： 新的響應式 .row-cols 類，用於快速指定跨斷點的列數 新的 escape-svg() 函數，可簡化用於表單等的嵌入式背景圖像
  • 實戰Pure前端框架及ASP.NET MVC設計模式
    在進行Web應用程式開發過程中，對於不同頁面共同部分，如頁頭、頁腳等部分，為避免重複編碼，一般使用頁面母版或者布局頁面形式對重複部分進行模板化設計。4、Pure前端框架本例設計使用雅虎公司提供的輕量級前端響應式頁面設計、布局框架進行進行頁面開發。使用方法較為簡單，只需要在MVC模式下的模板頁面中引入對應CSS樣式文件即可。
  • 幾個在Web前端界比較優秀的前端框架
    近年來，Web前端技術的發展速度快得讓人窒息，特別是最近幾年一代又一代的變革一次又一次的創造。各大巨頭又紛紛把技術轉向HTML5和CSS3，各種企業級框架如雨後春筍般湧現。那麼今天千鋒武漢Web前端培訓小編就給大家介紹幾個在Web前端界比較優秀的前端框架。
  • 響應式網站製作之Bootstrap框架的使用
    在響應式網站中使用bootstrap的使用率是極大的，很多開發者都在使用它。那boosttrap的優勢是什麼了？Bootstrap的核心是柵格系統，Bootstrap 提供了一套響應式、行動裝置優先的流式柵格系統，隨著屏幕或視口（viewport）尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類。
  • 基於jQuery + bootstrap 的前端框架moa-frontend
    的前端框架。技術棧expressjadebootstrapbootstraptablejquerygulpnginxnpm install npm start訪問 http://127.0.0.1:3010/Features經典的 jQuery + bootstrap
  • 優秀的前端框架BootStrap的學習,快速帶你入門,完成響應式布局
    我們可以用meta標籤把viewport的寬度設為那個理想的寬度，如果不知道這個設備的理想寬度是多少，那麼用device- width這個特殊值就行了至此準備工作基本完成，下面進行使用BootStrap重寫購物網站首頁，要做網站首頁，關鍵在於布局，前面用table進行過布局，然後有用div+css進行布局，現在使用BootStrap進行布局BootStrap官方提供了兩個容器
  • 前端框架 Bootstrap 4.4.0 發布了,以下是更新內容:
    前端框架 Bootstrap 4.4.0 發布了，以下是更新內容： 新的響應式 .row-cols 類，用於快速指定跨斷點的列數 新的 escape-svg() 函數，可簡化用於表單等的嵌入式背景圖像
  • 從Bootstrap小白的角度，為Bootstrap初學者的學習建議與感悟
    包括各種各樣的網頁設計方法，包括幽靈按鈕、更強調字體、視頻背景、卡片式設計、扁平化以及響應式設計，為了更加便於開發前端頁面，前端框架應運而生，其中Bootstrap是最有名的一個。 一開始學習這個框架的時候，說實話（誰還不是一個菜鳥）。開始接觸這個布局框架的時候就是感覺到無力。學過框架的人都說簡單，覺得肯定是騙人的。你看首先要用這個框架必須搭建環境，這就難倒很多人。