Bootstrap禁用響應式布局的實現方法

2022-10-07 11:51:14 字數 785 閱讀 8870

在bootstrap中極其重要的乙個技術內容便是響應式布局了,一次編碼針對不同裝置終程式設計客棧端的強大能力使得響應式技術愈發流行。

不過正所謂「蘿蔔青菜各有所愛」,如果你想要使用bootstrap開發自己的專案卻又恰巧不太喜歡響應式布局(或者你所設計的頁面布局不允許你使用響應式技術),那麼你可以通過以下方式禁用響程式設計客棧應式布局。

移除標籤

禁用第一步,就是需要移除在head標籤中新增的

該標籤的作用在於使得你的**在移動裝置端被訪問的時候,不會進行縮放,而是以100%的比例顯示在移動裝置中。www.cppcns.com

設定寬度

禁用第二步,為.container類設定乙個寬度,從而覆蓋它根據裝置寬度而自動調節的功能。

例如你可以設定.container ,為了起到覆蓋原bootstrap樣式的作www.cppcns.com用,最好將你自定義的css檔案在bootstrap.css檔案之後引入。

刪除選單摺疊

倘若你採用了導航欄,那麼就要注意刪掉選單在移動端的摺疊樣展開式(主要通過button的n**bar-toggle來實現)。

柵格布局

除此之外,如果你採用了柵格布局,那麼就要採用.col-xs-*(最小裝置柵格類)的樣式來代替.col-md-*以及.col-lg-*,這樣就能確保柵格能夠在所有裝置中展開。

bootstrap 會自動幫你針對不同的螢幕尺寸調整你的頁面,使其在各個尺寸的螢幕上表現良好。下面我們列出了如何禁用這一特性,就像這個非響應式布局例項頁面一樣。

本文標題: bootstrap禁用響應式布局的實現方法

本文位址:

bootstrap響應式布局

1.bootstrap布局容器 bootstrap 需要為頁面內容和柵格系統包裹乙個 container 或者.container fluid 容器,它提供了兩個作此用處的類。container container fluid 2.bootstrap柵格系統 bootstrap提供了一套響應式 移動...

響應式布局與Bootstrap

bootstrap的介紹 什麼是響應式布局 讓乙個 相容不同解析度的裝置 給使用者更好的視覺使用體驗。響應式布局的優缺點優點 解決了裝置之間的差異化展示 讓不同的裝置達到最優的體驗 缺點 對開發者來說,相容性 多,工作量大,對瀏覽器來說,載入速度受影響 響應式布局設計原則移動優先 在設計的初期就要考...

bootstrap的響應式布局

可參考 進行使用 通過檢測裝置資訊,決定網頁布局方式,即使用者如果採用不同的裝置訪問同乙個網頁,有可能會看到不一樣的內容,一般情況下是檢測裝置螢幕的寬度來實現。螢幕變小了之後,屬於同一行的元素受到擠壓後,行的右邊元素自動換行顯式 螢幕大了後,本屬於同一行的元素盡可能的排在同一行內 乙個簡單的案例 d...