Bootstrap環境及螢幕適配 (一)

2021-09-07 00:16:56 字數 1230 閱讀 9524

需要引用的檔案有,

jquery.jsbootstrap.min.jsbootstrap.min.css檔案

結果:

為了讓 bootstrap 開發的**對移動裝置友好,確保適當的繪製和觸屏縮放,需要在網頁的 head 之中新增viewport meta標籤,如下所示:

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

width 屬性控制裝置的寬度。假設您的**將被帶有不同螢幕解析度的裝置瀏覽,那麼將它設定為 

device-width 可以確保它能正確呈現在不同裝置上。

initial-scale=1.0 確保網頁載入時,以 1:1 的比例呈現,不會有任何的縮放。

在移動裝置瀏覽器上,通過為viewport meta標籤新增 

user-scalable=no 可以禁用其縮放(zooming)功能。

通常情況下,

maximum-scale=1.0 與 user-scalable=no 一起使用。這樣禁用縮放功能後,使用者只能滾動螢幕,就能讓您的**看上去更像原生應用的感覺。

name

="viewport"

content

="width=device-width,

initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

來自為知筆記(wiz)

bootstrap超大螢幕(19)

bootstrap 超大螢幕 jumbotron 本章將講解 bootstrap 支援的另乙個特性,超大螢幕 jumbotron 顧名思義該元件可以增加標題的大小,建立乙個帶有 class jumbotron.的容器 除了更大的 這是乙個超大螢幕 jumbotron 的例項。學習更多 為了獲得占用全...

web app變革之rem(手機螢幕實現全適配)

以往web移動適配,常規寫法是 media only screen media only screen and min device width 320px media only screen and min device width 320px and webkit min device pixe...

9 4 Bootstrap學習,及思路總結

bootstrap將會根據你的螢幕的大小來調整html元素的大小 強調響應式設計的概念。通過響應式設計,你無需再為你的 設計乙個手機版的。它在任何尺寸的螢幕上看起來都會不錯。實踐 使用是非常簡單的,只需要套用 bootstrap css中定義的class即可。1 3 套用class 4 本地測試 c...