當前位置：首頁 > news >正文

客戶網(wǎng)站開發(fā)全流程理發(fā)培訓專業(yè)學校

news 2025/7/13 6:54:58

客戶網(wǎng)站開發(fā)全流程,理發(fā)培訓專業(yè)學校,深圳建設工程信息網(wǎng)站,域名備案網(wǎng)站目錄 1_認識Bootstrap1.1_概念1.2_起源和歷史1.3_Bootstrap優(yōu)缺點 2_Bootstrap4的安裝2.1_方式一 CDN2.2_方式二 : 下載源碼引入2.3_方式三 : npm安裝 3_Bootstrap初體驗4_響應式容器原理4.1_屏幕尺寸的分割點（Breakpoints）4.2_響應式容器Containers 5_網(wǎng)…

1_認識Bootstrap
- 1.1_概念
- 1.2_起源和歷史
- 1.3_Bootstrap優(yōu)缺點
2_Bootstrap4的安裝
- 2.1_方式一 CDN
- 2.2_方式二 : 下載源碼引入
- 2.3_方式三 : npm安裝
3_Bootstrap初體驗
4_響應式容器原理
- 4.1_屏幕尺寸的分割點（Breakpoints）
- 4.2_響應式容器Containers
5_網(wǎng)格系統(tǒng)（Grid system）
- 5.1_認識
- 5.2_12列網(wǎng)格系統(tǒng)
- 5.3_網(wǎng)格系統(tǒng)的原理
- 5.4_嵌套(nesting)
- 5.5_自動布局（Auto-layout ）
- 5.7_響應式類（Responsive Class）
6_響應式工具類
- 6.1_認識
- 6.2_響應式工具類-Display
- 6.3_實用的工具類（Utility classes）
- 6.4_可訪問性-輔助類（了解）
7_Bootstrap組件
8_項目
- 8.1_導航欄
- 8.2_輪播圖
- 8.3_目標客戶版塊

1_認識Bootstrap

1.1_概念

Bootstrap 讀音 /?bu:tstr?p/ ，是一個非常受歡迎的前端框架，官方網(wǎng)站將其描述為。

最流行的 HTML、CSS 和 JS 框架，用于在 Web 上開發(fā)響應式、移動優(yōu)先的項目。(v3.x)
- 響應式頁面：頁面布局會隨著屏幕尺寸的變化而自動調(diào)整布局，作用是適配各個屏幕。
Bootstrap是功能強大、可擴展，且功能豐富的前端工具包。（v5.x）
Bootstrap底層是使用Sass構(gòu)建，支持定制（Sass、Color、CSS variable …）。（v5.x）
Bootstrap中的網(wǎng)格系統(tǒng)、組件以及強大的JavaScript 插件可以快速搭建響應式網(wǎng)站。(v5.x)

簡單的理解

Bootstrap是由HTML、CSS和JavaScript編寫可復用代碼的集合（包括全局樣式、組件、插件等），它是一個前端框架，使用該框架能夠快速開發(fā)出響應的網(wǎng)站（即適配PC、平板和移動端的網(wǎng)站）。
Bootstrap可以免去編寫大量的 CSS 代碼（Write less），讓更專注于網(wǎng)站業(yè)務邏輯的開發(fā)。
Bootstrap是開源免費的，可以從GitHub直接拿到源碼

1.2_起源和歷史

Bootstrap原名Twitter Blueprint，由Twitter公司的Mark Otto和Jacob Thornton編寫。

他們的本意是想制作一套可以讓網(wǎng)頁保持統(tǒng)一風格的前端框架。

在Bootstrap之前，Twitter團隊在開發(fā)界面時，不同的項目組會使用不同的代碼庫。這樣就會很容易導致界面風格不一致等問題，從而增加了后期的維護成本。

Mark Otto發(fā)現(xiàn)自己設計的工具比別人設計的更強大，能夠做更多的事情。幾個月之后，Mark Otto和一群開發(fā)人員做出了Bootstrap的原型。然后經(jīng)過他們開發(fā)小組幾個月之后的努力，大家把Twitter Blueprint改名為Bootstrap。

在2011年8月19日將其作為開源項目發(fā)布。項目由Mark Otto、Jacob Thornton和核心開發(fā)小組維護。

在2012年1月31日發(fā)布Bootstrap 2，增加了十二列網(wǎng)格系統(tǒng)和響應式組件，并對許多組件進行了修改。

在2013年8月19日發(fā)布Bootstrap 3，開始將移動設備優(yōu)先作為方針，并且開始使用扁平化設計，支持IE8-9。

在2018年1月7日發(fā)布Bootstrap 4，增加了Flexbox Grid、Cards、Spacing Utilities等。

在2021年5月5日發(fā)布Bootstrap 5，增強Grid System、增強Form elements、Not Support for IE、Bootstrap Icons等

1.3_Bootstrap優(yōu)缺點

優(yōu)點

Bootstrap在Web開發(fā)人員中如此受歡迎的原因之一是它具有簡單的文件結(jié)構(gòu)，只需要懂HTML、CSS 和 JS 的基本知識，就可以上手使用Bootstrap，甚至閱讀其源碼，對于初學者來是說易于學習。
Bootstrap擁有一個強大的網(wǎng)格系統(tǒng)，它是由行和列組成，可以直接創(chuàng)建網(wǎng)格，無需自行編寫媒體查詢來創(chuàng)建。
Bootstrap預定義很多響應式的類。例如，給圖片添加.img-responsive類，圖片將會根據(jù)用戶的屏幕尺寸自動調(diào)整圖像大小，更方便去做各個屏幕的適配。另外Bootstrap 還提供了很多額外的工具類輔助進行網(wǎng)頁開發(fā)。
Bootstrap框架提供的組件、插件、布局、柵格系統(tǒng)、響應式工具等等，可以為節(jié)省了大量的開發(fā)時間。

缺點

不適合高度定制類型的項目，因為Bootstrap具有統(tǒng)一的視覺風格，高度定制類的項目需要大量的自定義和樣式覆蓋。
Bootstrap的框架文件比較大(61KB JS + 159KB CSS)，資源文件過大會增加網(wǎng)站首屏加載的時間，并加重服務器的負擔。
Bootstrap樣式相對笨重，也會額外添加一些不必要的HTML元素，他會浪費一小部分瀏覽器的資源。

總結(jié)：Bootstrap很容易上手，并且也有非常完整的中文文檔；Bootstrap使用 jQuery 與HTML 交互。對于初學者來說，它將是一個不錯的入門方式。同時Bootstrap框架優(yōu)秀的設計和架構(gòu)思想也是非常值得學習。

2_Bootstrap4的安裝

Bootstrap 是一個前端框架。

該框架主要是由CSS 和 JS組成，但是也會依賴一小部分的HTML。
因此在安裝Bootstrap時，-需要引入相應的CSS和JS文件，當然也需要添加一些全局的配置。
在Bootstrap 5 版本以前，Bootstrap是依賴jQuery的。
那么如果使用的是Bootstrap5以下的版本，需在引入Bootstrap之前先引入jQuery庫。

Bootstrap的內(nèi)容組成，不同的下載文件，包含的內(nèi)容也不一樣

在這里插入圖片描述

2.1_方式一 CDN

Bootstrap框架的CDN地址

https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css
https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js
https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js

HTML中引入之后，添加重要的全局配置

HTML5 文檔類型（doctype 或 DOCTYPE），Bootstrap 要求文檔類型（doctype）是 HTML5。如果沒有設置這個，就會看到一些古怪的、不完整的樣式，因此，正確設置文檔類型（doctype）能輕松避免這些困擾。

<!DOCTYPE html>

添加視口（viewport）
- Bootstrap 采用的是移動設備優(yōu)先（mobile first）的開發(fā)策略，為了網(wǎng)頁能夠適配移動端的設備，需在 <head> 標簽中添加viewport（視口）。
- 在移動端會把 layout viewport 的寬度設置為設備的寬，并且不允許用戶進行頁面的縮放。

<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,shrink-to-fit=no">

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- safari 9+ --><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入Bootstrap框架中的CSS文件: box-size:border-box --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
</head>
<body><h1 class="text-left border border-primary">Hello Bootstrap</h1><!-- Bootstrap5 之前需要依賴jQuery庫 ，故需要引入JQ庫--><script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script><!-- 引入Bootstrap的JS文件 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

2.2_方式二 : 下載源碼引入

Bootstrap框架的下載

Bootstrap下載地址：https://v4.bootcss.com/docs/getting-started/download/
jQuery下載地址：https://jquery.com/download/

添加重要的全局配置

HTML5 文檔類型（doctype 或 DOCTYPE），Bootstrap 要求文檔類型（doctype）是 HTML5。
添加視口viewport（shrink-to-fit 是為了兼容 Safari 9 以后版本，禁止頁面的伸縮)
integrity: 防止資源被篡改，篡改了將不加載；crossorigin：加載不同源的資源時，是否需要需帶用戶憑證（cook)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no"><title>Document</title><!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css">
</head>
<body><h1 class="float-right">hello Bootstrap</h1><script src="../libs/jquery/jquery-3.6.0.js"></script><!-- bundle.js分成下面兩部分popper.jsbootstrap.js--><script src="../libs/bootstrap-4.6.1/js/bootstrap.bundle.js"></script>
</body>
</html>

2.3_方式三 : npm安裝

在這里插入圖片描述

3_Bootstrap初體驗

需求：開發(fā)兩個按鈕，一個天空藍的按鈕和一個橙色的按鈕。
下面將使用兩種方式實現(xiàn)：
(1) 用CSS來開發(fā)

<style>
.btn{width: 60px;line-height: 40px;color: white;text-align: center;
}.btn-cirlce{border-radius: 4px;
}.btn-primary{background-color: skyblue;
}.btn-warning{background-color: orange;
}
.btn-default{background-color: #cdcdcd;
}</style><body><div class="btn btn-cirlce btn-primary">按鈕1</div><div class="btn btn-cirlce btn-warning">按鈕2</div><div class="btn btn-cirlce btn-default">按鈕2</div>
</body>

(2) 用Bootstrap框架

  <!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css"><body>//只需添加對應的類名，即可實現(xiàn)樣式<div class="btn btn-primary">按鈕1</div><div class="btn btn-warning">按鈕2</div><button class="btn btn-info">按鈕3</button>//引入jQ庫文件<script src="../libs/jquery/jquery-3.6.0.js"></script>//引入Bootstap的JS文件 <script src="../libs/bootstrap-4.6.1/js/bootstrap.bundle.js"></script>
</body>

補充：Bootstrap4 框架設計圖

在這里插入圖片描述

4_響應式容器原理

4.1_屏幕尺寸的分割點（Breakpoints）

Bootstrap的一大核心就是響應式，即開發(fā)一套系統(tǒng)便可以適配不同尺寸的屏幕。它底層原理是使用媒體查詢來為布局和頁面創(chuàng)建合理的斷點(Breakpoints)，然后根據(jù)這些合理的斷點來給不同尺寸屏幕應用不同的CSS樣式。
Bootstrap 4設了5個斷點來構(gòu)建響應式系統(tǒng)，5個斷點分別為 Extra-Small、Small、Medium、Large、Extra large
媒體查詢是CSS的一項功能，它允許你根據(jù)瀏覽器的分辨率來應用不同的CSS樣式，如 @media (min-width: 576px){}

在這里插入圖片描述

4.2_響應式容器Containers

Containers容器是 Bootstrap中最基本的布局元素，并且該布局支持響應式。在使用默認網(wǎng)格系統(tǒng)時是必需的。

Containers容器用于包含、填充，有時也會作為內(nèi)容居中使用。容器也是可以嵌套，但大多數(shù)布局不需要嵌套容器。

Bootstrap 帶有三個不同的Containers容器：

.container: 它在每個斷點處會設置不同的max-width。
.container-fluid：在所有斷點處都是 width: 100%。
.container-{breakpoint}, 默認是width: 100%，直到指定斷點才會修改為響應的值。

在這里插入圖片描述

5_網(wǎng)格系統(tǒng)（Grid system）

5.1_認識

在開發(fā)一個頁面時，經(jīng)常會遇到一些列表（例如，商品列表），這些列表通常都是通過行和列來排版。

對于這種列表-可以使用float來實現(xiàn)，也可以使用flexbox布局實現(xiàn)。
為了方便-對這種常見列表的布局，Bootstrap框架對它進行了封裝，封裝為一個網(wǎng)格系統(tǒng)（Grid system）。

網(wǎng)格系統(tǒng)是什么？

Bootstrap網(wǎng)格系統(tǒng)是用于構(gòu)建移動設備優(yōu)先的強大布局系統(tǒng)，可支持12列網(wǎng)格、5 個斷點和數(shù)十個預定義類。
提供了一種簡單而強大的方法來創(chuàng)建各種形狀和大小的響應式布局。
底層使用了強大的flexbox來構(gòu)建彈性布局，并支持12列的網(wǎng)格布局。
網(wǎng)格系統(tǒng)是使用container、row和col類來布局，并且布局是支持響應的。

如何使用網(wǎng)格系統(tǒng)？

編寫一個container或container-fluid容器；
在container容器中編寫row容器；
在row容器中編寫列col容器。

比如，使用Boostrap來實現(xiàn)一行3列的布局。

  <!-- 引入 Bootstarp中的CSS文件 --><link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css"><style>.container{background-color: pink;}.item{height: 40px;border: 1px solid red;}</style><body><div class="container"><!-- 【其類名的實際css樣式如下】display: flexflex-wrap:wrap--><div class="row"><!-- 【其類名的實際css樣式如下】flex item:   flex-grow: 1--><div class="col item">1</div><div class="col item">2</div><div class="col item">3</div></div></div>
</body>

5.2_12列網(wǎng)格系統(tǒng)

從Bootstrap2開始，網(wǎng)格系統(tǒng)從16 列轉(zhuǎn)向12列網(wǎng)格，原因之一是12列比以前的16列系統(tǒng)更靈活。

將一個容器(row)被劃分為12列網(wǎng)格，具有更廣泛的應用，因為 12 可以被 12、6、4、3、2 、1整除，而 16列網(wǎng)格只能被 16、8、4 、2、1 整除，所以12列網(wǎng)格能夠在一行中表示更多種列數(shù)組合情況。

12列網(wǎng)格這意味著可將一行分解為12、6、4、3、2和1份：

1列，獨占12等份
2列，每列占6等份
3列，每列占4等份
4列，每列占3等份。
6列，每列占2等份
12列，每列占1等份

5.3_網(wǎng)格系統(tǒng)的原理

網(wǎng)格系統(tǒng)是有container、row、col三部分組成，底層使用flexbox來布局，并且支持12列網(wǎng)格布局。

container或container-fluid是布局容器，網(wǎng)格系統(tǒng)中必用的容器（該容器也會應用在：內(nèi)容居中或作為包含其它內(nèi)容等）。

width: 100% / 某個斷點的寬; - 布局的寬
padding-right: 15px; - 讓包含的內(nèi)容不會靠在布局右邊緣
padding-left: 15px; - 讓包含的內(nèi)容不會靠在布局左邊緣
margin-right: auto; - 布局居中
margin-left: auto; - 布局居中

row是網(wǎng)格系統(tǒng)中的每一行，row是存放在container容器中。如果指定列寬，那么一行最多可以存放12列，超出列數(shù)會換行。

display: flex; - 指定row為彈性布局（并支持12列網(wǎng)格布局）
flex-wrap: wrap; - 支持多行展示flex item。
margin-right: -15px; - 抵消container右邊15px的padding
margin-left: -15px; - 抵消container左邊15px的padding。

【row左右-15px的外邊距margin，是用來抵消container容器15px內(nèi)邊距，實現(xiàn)row左右邊緣和容器左右邊緣對齊?？梢岳斫鉃閺椭普迟N，大小尺寸一模一樣】

col是網(wǎng)格系統(tǒng)的每一列，col是存放在row容器中

position: relative; - 相對定位布局
flex-grow: 1 / flex:0 0 x%; - 自動拉伸布局或占百分比
max-width: 100% / max-width: x%; - 最大的寬
padding-right: 15px; - 讓包含內(nèi)容不會靠右邊緣
padding-left: 15px; - 讓包含內(nèi)容不會靠左邊緣。

5.4_嵌套(nesting)

Bootstrap的網(wǎng)格系統(tǒng)是可以支持嵌套的，例如：

可以在某個網(wǎng)格系統(tǒng)的某一列上繼續(xù)嵌套一個網(wǎng)格系統(tǒng)。
當網(wǎng)格系統(tǒng)中的某一列嵌套一個網(wǎng)格系統(tǒng)的時候，嵌套的網(wǎng)絡系統(tǒng)可以省略container容器。
因為網(wǎng)格系統(tǒng)中的col是可以充當一個container-fluid容器來使用（col的屬性和container-fluid的屬性基本一樣）。

一個案例：用指定列寬( 語法：col-{number} ) 的方式來實現(xiàn)一行8列的布局

  <link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css"><style>.container{background-color: pink;}.item{height: 40px;border: 1px solid red;}</style><body><!--     方式一  flex:列寬是自動拉伸，并且每列的寬度是相等的【等列寬】 --><div class="container"><div class="row"><div class="col item">1</div><div class="col item">2</div><div class="col item">3</div><div class="col item">4</div><div class="col item">5</div><div class="col item">6</div><div class="col item">7</div><div class="col item">8</div></div></div><!-- 方式二: 指定列寬 --><div class="container"><div class="row"><div class="col-6 item">  <!-- 嵌套網(wǎng)格系統(tǒng)( 嵌套的時候是可以省略container ) --><div class="row"><div class="col-3 item">1</div><div class="col-3 item">2</div><div class="col-3 item">3</div><div class="col-3 item">4</div></div></div><div class="col-6 item"><!-- ( 嵌套的時候是可以省略container ) --><div class="row"><div class="col-3 item">1</div><div class="col-3 item">2</div><div class="col-3 item">3</div><div class="col-3 item">4</div></div></div></div></div>
</body>

5.5_自動布局（Auto-layout ）

col : 等列寬（Equal-width）。底層代碼是 flex-grow: 1, max-width: 100%。該類網(wǎng)格系統(tǒng)僅用flexbox布局。

【可以理解為，每行的每個元素寬度相等，總寬度被平分】

    <link rel="stylesheet" href="../libs/bootstrap-4.6.1/css/bootstrap.css"><style>.container{background-color: pink;}.item{height: 40px;border: 1px solid red;}</style><body><!-- 網(wǎng)格系統(tǒng)-等列寬- flex-grow:1   --><div class="container"><div class="row"><div class="col item">1</div><div class="col item">2</div><div class="col item">3</div><div class="col item">4</div><div class="col item">5</div><div class="col item">6</div><div class="col item">7</div><div class="col item">8</div><div class="col item">9</div><div class="col item">10</div><div class="col item">11</div><div class="col item">12</div><div class="col item">13</div><div class="col item">13</div><div class="col item">13</div><div class="col item">13</div><div class="col item">13</div><div class="col item">13</div><div class="col item">13</div></div></div>
</body>

col-auto : 列的寬為auto ，自動列寬，隨著填充內(nèi)容的大小變化。其底層代碼是 flex: 0 0 auto; width: auto

  <!-- 網(wǎng)格系統(tǒng)-等列寬- flex-grow:1   --><div class="container"><div class="row"><!-- 隨著內(nèi)容的寬度變化。 其余等列寬度均分 =（總寬度-自動列寬）/剩余列的數(shù)量--><div class="col-auto item">auto layout  layout layout </div>  <div class="col item">1</div><div class="col item">2</div><div class="col item">3</div></div></div>

col-{num}: 指定某個列的寬（支持12列網(wǎng)格）其底層代碼是 flex: 0 0 x%，max-width: x%。

num的范圍是1~12。比如說，col-2，意味著，這個元素的寬度占這一行寬度的2/12，也就是1/6.

    <!-- 網(wǎng)格系統(tǒng)-等列寬- flex-grow:1   --><div class="container"><div class="row"><!--  flex: 0 0 xx%;  超過12列就會自動換行，可以理解為分子累加超過12--><div class="col-1 item">1/12</div><div class="col-2 item">2/12</div><div class="col-3 item">3/12</div><div class="col-6 item">6/12</div><div class="col-1 item">1/12</div><div class="col-1 item">1/12</div><div class="col-1 item">1/12</div>      </div><div class="row"><!--         flex: 0 0 xx%;       --><div class="col-1 item">1/12</div><div class="col-2 item">2/12</div><div class="col-3 item">3/12</div><div class="col-6 item">6/12</div></div></div>

運行效果如下圖

在這里插入圖片描述

5.7_響應式類（Responsive Class）

5個斷點(Breakpoints) ： none(xs) : <576px 、sm : >=576px、 md : >=768px、 lg : >=992、 xl : >=1200px

響應式列布局的類

col-sm : 默認 width:100%，當屏幕>=576px該類啟用（flexbox布局）, 啟用： flex-grow: 1，max-width: 100%。
col-md: 默認 width:100%，當屏幕>=768px該類啟用（flexbox布局），啟用： flex-grow: 1，max-width: 100%。
col-lg : 默認 width:100%，當屏幕>=992px該類啟用（flexbox布局），啟用： flex-grow: 1，max-width: 100%。
col-xl : 默認 width:100%，當屏幕>=1200px該類啟用（flexbox布局）, 啟用： flex-grow: 1，max-width: 100%。
col-sm-{num} : 默認 width:100%，當屏幕>=576px該類啟用 (支持12列網(wǎng)格), 啟用： flex: 0 0 x%。
col-md-{num} : 默認 width:100%，當屏幕>=768px該類啟用 (支持12列網(wǎng)格), 啟用： flex: 0 0 x%。
col-lg-{num} : 默認 width:100%，當屏幕>=992px該類啟用 (支持12列網(wǎng)格), 啟用： flex: 0 0 x%。
col-xl-{num} : 默認 width:100%，當屏幕>=1200px該類啟用 (支持12列網(wǎng)格) , 啟用： flex: 0 0 x%。

比如一個需求：開發(fā)響應式列表，xl屏幕顯示6列，在lg屏幕顯示4列，在md屏幕顯示3列，在sm屏幕顯示2列，特小屏(none)顯示1列。

  <!-- 網(wǎng)格系統(tǒng) --><div class="container"><div class="row">      <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">1</div><div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">2</div><div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">3</div><div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">4</div><div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">5</div><div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 item">6</div></div></div>

6_響應式工具類

6.1_認識

在開發(fā)響應式頁面時，可能會有這樣的需求：

某個功能在PC端可見，但是在移動端不可見。
因為移動端的屏幕比較小，是不能把PC端中所有的內(nèi)容都展示出來，所以有些不重要的內(nèi)容可能在移動端就被簡化了
這時就可以借用響應式的工具來實現(xiàn)該功能。

Bootstrap的響應式工具類-Display

為了更快地進行多端的開發(fā)，可以使用Bootstrap提供的響應式工具類（display），該類可按設備顯示和隱藏元素。
為了避免為同一個網(wǎng)站開發(fā)出多個不同的版本（PC、iPad、iPhone），可以針對每個屏幕尺寸響應地隱藏和顯示元素，來實現(xiàn)在不同屏幕上顯示不同的頁面。

如何使用響應工具類（display）?

隱藏元素可以給某個元素添加 .d-none 類或 .d-{sm,md,lg,xl,xxl}-none 類中的任何一個。
顯示元素可以給某個元素添加 .d-block 類或 .d-{sm,md,lg,xl,xxl}-block 類中的任何一個

6.2_響應式工具類-Display

不同作用的類名

在這里插入圖片描述

需求實現(xiàn)：

某個元素只在lg(>=992px) 和 xl 屏顯示；（大于xl的同時也大于lg，故只需去掉d-xl-non即可e

 <h1 class="d-none d-lg-block">某個元素只在lg(>=992px) 和 xl 屏顯示</h1><!-- 理解為，這個元素本身是隱藏的，然后屏幕分辨率滿足lg、xl條件時顯示 -->

某個元素只在lg(>=992px) 和 xl 屏隱藏；

<h1 class="d-block d-lg-none">某個元素只在lg(>=992px) 和 xl 屏隱藏</h1><!-- 理解為，這個元素本身是顯示的，然后屏幕分辨率滿足lg、xl條件時隱藏 -->

某個元素只在 md(>=768px) 屏隱藏；

  <h1 class="d-block d-md-none d-lg-block">某個元素只在 md(>=768px) 屏隱藏；</h1><!-- 理解為，這個元素本身是顯示的，然后屏幕分辨率滿足md條件時隱藏 -->

6.3_實用的工具類（Utility classes）

快速浮動（Float）

float-left
float-right

文本（Text）

text-left、text-right、text-center
text-{sm、md、lg、xl}-left

邊框

borde border-top border-left …
border border-primary border-success

截斷文本： text-truncate

6.4_可訪問性-輔助類（了解）

屏幕閱讀器的適配（專門針對殘障人士設備的適配）

.sr-only ： .sr-only 類可以對屏幕閱讀器以外的設備隱藏內(nèi)容，即對屏幕閱讀輔助器可見。
.sr-only-focusable ： .sr-only 和 .sr-only-focusable 聯(lián)合使用的話可以在元素有焦點的時候再次顯示出來（例如，使用鍵盤導航的用戶）。對于需遵循可訪問性的網(wǎng)站來說是很有必要的。

增強可訪問性的輔助類（針對殘障人使用的設備的適配，同時增強語義化）

role=”xxx” : 定義用戶界面元素的類型，作用增強Web可訪問性，使殘障人士可以更好的使用Web內(nèi)容。
aria-*=”xxx”: 增強可訪問性，當與role=“xxx”結(jié)合使用時，當元素的狀態(tài)和屬性發(fā)生變化時會觸發(fā)輔助技術(shù)發(fā)出通知，并將信息傳達給用戶

7_Bootstrap組件

訪問官網(wǎng) https://getbootstrap.com/docs/5.3/components/accordion/

可以復制其中的組件代碼體驗，前提是安裝好Bootstrap

8_項目

前提，導入Bootstrap庫以及JQ庫。

效果圖如下

在這里插入圖片描述

8.1_導航欄

  <!-- 1.導航欄 --><nav class="navbar navbar-expand-lg"><div class="container-fluid"><!-- logo --><a class="navbar-brand" href="#"><img class="logo" src="./img/logo.png" alt=""></a><!-- 按鈕 <=992才會顯示出來  --><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"><img class="expand-icon" src="./img/show-icon.png" alt=""></button><!-- 導航列表 --><div class="collapse navbar-collapse" id="navbarNav"><ul class="navbar-nav mr-auto"><!-- 使用自定義的樣式 --><li class="text-link active"><span>首頁</span></li><li class="text-link"><span>API</span></li><li class="text-link"><span>解決方案</span></li><li class="text-link"><span>案例</span></li><li class="text-link"><span>新聞</span></li><li class="text-link"><span>關(guān)于我們</span></li></ul><p class="text-link hot-line"><span>咨詢熱線：4009910008</span></p></div></div></nav>

8.2_輪播圖

HTML代碼

  <!-- 2.輪播圖 --><!--      data-ride="carousel" 當頁面加載完成之后 錄播圖自動輪播   --><div id="carouselExampleIndicators_liujun" class="carousel slide"><!-- 指示器 --><ol class="carousel-indicators"><li data-target="#carouselExampleIndicators_liujun" data-slide-to="0" class="active"></li><li data-target="#carouselExampleIndicators_liujun" data-slide-to="1"></li><li data-target="#carouselExampleIndicators_liujun" data-slide-to="2"></li></ol><!-- 輪播圖的圖片 --><div class="carousel-inner"><!-- 改為js動態(tài)加載圖片        <div class="carousel-item active"><img src="./img/banner0.png" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="./img/banner1.png" class="d-block w-100" alt="..."></div><div class="carousel-item"><img src="./img/banner2.png" class="d-block w-100" alt="..."></div> --></div><!-- 分頁:上一張 下一張 --><button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators_liujun" data-slide="prev"><span class="carousel-control-prev-icon"></span></button><button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators_liujun" data-slide="next"><span class="carousel-control-next-icon"></span></button></div>

JS代碼

$(function() {var currentImg = 'none' // none  big  small// 1.準備數(shù)據(jù)var banners = [{id:0,bigUrl: './img/banner0.png',smUrl: './img/banner0_sm.png'},{id:0,bigUrl: './img/banner1.png',smUrl: './img/banner1_sm.png'},{id:0,bigUrl: './img/banner2.png',smUrl: './img/banner2_sm.png'}]// renderBanner(banners)
//加入了之前寫的節(jié)流函數(shù)$(window).on('resize',throttle( function() {// console.log( $(this).outerWidth() )  // border + paddig + content var winWidth =  $(this).outerWidth()var isBigScreen = winWidth >= 768if(currentImg === 'none'){// 調(diào)取這個函數(shù)來渲染界面renderBanner(banners, isBigScreen)}   if(currentImg === 'big' && !isBigScreen) {	//當前為大屏，要變?yōu)樾∑?/span>renderBanner(banners, isBigScreen)}if(currentImg === 'small' && isBigScreen) {	//當前為小屏，要變?yōu)榇笃?/span>renderBanner(banners, isBigScreen)}}))$(window).trigger('resize')function renderBanner(banners = [], isBigScreen) {currentImg = isBigScreen ? 'big' : 'small' // 先把之前的定時器停掉$('.carousel').carousel('dispose')var banneHtmlString = ''// 2.將數(shù)據(jù)渲染到頁面上banners.forEach(function(item, index) {var active = index === 0 ? 'active' :''var imgUrl = isBigScreen ? item.bigUrl: item.smUrlbanneHtmlString +=`<div class="carousel-item ${active}" data-interval="3000"><img src="${imgUrl}" class="d-block w-100" alt="..."></div>`})$('.carousel-inner').empty().append(banneHtmlString)// 自動錄播( 開始一個定時器 )$('.carousel').carousel('cycle')}})

補充：節(jié)流函數(shù)代碼

  function throttle(fn, interval = 400, options = { leading: true, trailing: true }) {// 1.記錄上一次的開始時間const { leading, trailing } = optionslet lastTime = 0let timer = null// 2.事件觸發(fā)時, 真正執(zhí)行的函數(shù)const _throttle = function(...args) {// 2.1.獲取當前事件觸發(fā)時的時間const nowTime = new Date().getTime()if (!lastTime && !leading) lastTime = nowTime// 2.2.使用當前觸發(fā)的時間和之前的時間間隔以及上一次開始的時間, 計算出還剩余多長事件需要去觸發(fā)函數(shù)const remainTime = interval - (nowTime - lastTime)if (remainTime <= 0) {if (timer) {clearTimeout(timer)timer = null}// 2.3.真正觸發(fā)函數(shù)fn.apply(this, args)// 2.4.保留上次觸發(fā)的時間lastTime = nowTimereturn}if (trailing && !timer) {timer = setTimeout(() => {timer = nulllastTime = !leading ? 0: new Date().getTime()fn.apply(this, args)}, remainTime)}}return _throttle}

8.3_目標客戶版塊

HTML代碼

  <!-- 3.目標客戶 --><div class="target-customer"><!-- 在小屏上是不可見 --><h1 class="title text-center d-none d-md-block">目標客戶</h1><!-- 網(wǎng)格系統(tǒng)性 --><div class="container-fluid"><div class="row"><div class="col-md-6 col-xl-3 item"><img class=" d-none d-md-block" src="./img/target-1.png" alt=""><div class="sub-title">電子銀行</div><div class="desc text-center"><p>助力五大行、商業(yè)銀行、城商行、農(nóng)商行、農(nóng)信社等</p><p>手機銀行與直銷銀行APP消費場景升級</p></div></div><div class="col-md-6 col-xl-3 item"><!-- 在小屏上是不可見 --><img class=" d-none d-md-block" src="./img/target-2.png" alt=""><div class="sub-title">金服平臺</div><div class="desc text-center"><p>助力錢包、小貸、基金、保險、信托、證券等</p><p>金融服務平臺APP 消費場景升級</p></div></div><div class="col-md-6 col-xl-3 item"><img class=" d-none d-md-block" src="./img/target-3.png" alt=""><div class="sub-title">企業(yè)福利</div><div class="desc text-center"><p>助力國有、私營、外資、人力資源公司等</p><p>企業(yè)報銷與福利系統(tǒng)消費場景升級</p></div></div><div class="col-md-6 col-xl-3 item"><img class=" d-none d-md-block" src="./img/target-4.png" alt=""><div class="sub-title">智能終端</div><div class="desc text-center"><p>助力機器人、汽車中控、電子屏、商用電視等</p><p>人工智能語音消費場景升級</p></div></div></div></div></div>

CSS代碼。因為bootstrap沒有符合的，所以定制

.target-customer{min-height: 265px;background-color: var(--bg-target-color);
}.target-customer .title{height: 80px;line-height: 80px;font-size: 30px;color: var(--title-color);font-weight: normal;
}.target-customer .row .item{display: flex;justify-content: center;align-items: center;height: 135px;cursor: pointer;overflow: hidden;}.target-customer .sub-title{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);font-size: 24px;color: var(--title-color);transition: top 0.6s ease;
}.target-customer .desc{position: absolute;top: 125%;left: 50%;width: 100%;opacity: 0;transform: translate(-50%, -50%);transition: top 0.6s ease;
}@media (min-width: 768px){.target-customer .row .item:hover .sub-title{top: 35%;}.target-customer .row .item:hover .desc{top: 73%;opacity: 1;}}@media (max-width: 768px){.target-customer .sub-title{top: 40%;font-size: 16px;}.target-customer .desc{top: 75%;opacity: 1;font-size: 14px;}.target-customer .row .item:nth-child(odd){background-color: white;}.target-customer .row .item:nth-child(even){background-color: var(--bg-target-color);}}

cursor: pointer;

overflow: hidden;

}

.target-customer .sub-title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

font-size: 24px;
color: var(–title-color);
transition: top 0.6s ease;
}

.target-customer .desc{
position: absolute;
top: 125%;
left: 50%;
width: 100%;
opacity: 0;
transform: translate(-50%, -50%);
transition: top 0.6s ease;
}

@media (min-width: 768px){

.target-customer .row .item:hover .sub-title{
top: 35%;
}
.target-customer .row .item:hover .desc{
top: 73%;
opacity: 1;
}

}

@media (max-width: 768px){
.target-customer .sub-title{
top: 40%;
font-size: 16px;
}
.target-customer .desc{
top: 75%;
opacity: 1;
font-size: 14px;
}

.target-customer .row .item:nth-child(odd){
background-color: white;
}

.target-customer .row .item:nth-child(even){
background-color: var(–bg-target-color);
}

}


<br>

查看全文

http://www.risenshineclean.com/news/60588.html

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

客戶網(wǎng)站開發(fā)全流程理發(fā)培訓專業(yè)學校

目錄

1_認識Bootstrap

1.1_概念

1.2_起源和歷史

1.3_Bootstrap優(yōu)缺點

2_Bootstrap4的安裝

2.1_方式一 CDN

2.2_方式二 : 下載源碼引入

2.3_方式三 : npm安裝

3_Bootstrap初體驗

4_響應式容器原理

4.1_屏幕尺寸的分割點（Breakpoints）

4.2_響應式容器Containers

5_網(wǎng)格系統(tǒng)（Grid system）

5.1_認識

5.2_12列網(wǎng)格系統(tǒng)

5.3_網(wǎng)格系統(tǒng)的原理

5.4_嵌套(nesting)

5.5_自動布局（Auto-layout ）

5.7_響應式類（Responsive Class）

6_響應式工具類

6.1_認識

6.2_響應式工具類-Display

6.3_實用的工具類（Utility classes）

6.4_可訪問性-輔助類（了解）

7_Bootstrap組件

8_項目

8.1_導航欄

8.2_輪播圖

8.3_目標客戶版塊

相關(guān)文章：

中文亚洲精品无码_熟女乱子伦免费_人人超碰人人爱国产_亚洲熟妇女综合网

目錄

1_認識Bootstrap

1.1_概念

1.2_起源和歷史

1.3_Bootstrap優(yōu)缺點

2_Bootstrap4的安裝

2.1_方式一 CDN

2.2_方式二 : 下載源碼引入

2.3_方式三 : npm安裝

3_Bootstrap初體驗

4_響應式容器原理

4.1_屏幕尺寸的分割點（Breakpoints）

4.2_響應式容器Containers

5_網(wǎng)格系統(tǒng)（Grid system）

5.1_認識

5.2_12列網(wǎng)格系統(tǒng)

5.3_網(wǎng)格系統(tǒng)的原理

5.4_嵌套(nesting)

5.5_自動布局（Auto-layout ）

5.7_響應式類（Responsive Class）

6_響應式工具類

6.1_認識

6.2_響應式工具類-Display

6.3_實用的工具類（Utility classes）

6.4_可訪問性-輔助類（了解）

7_Bootstrap組件

8_項目

8.1_導航欄

8.2_輪播圖

8.3_目標客戶 版塊

相關(guān)文章：

8.3_目標客戶版塊