Bootstrap學習總結

1.bootstap的使用模板

--自己的樣式檔案要放在下面才會覆蓋生效-->

href="css/index.css"

rel="stylesheet">

head>

你好，世界！h1>

src="">

script>

src="">

script>

body>

html>

2.禁止響應式布局

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

禁止響應式布局有如下幾步：

移除此 css 文件中提到的設定瀏覽器視口（viewport）的標籤：。

通過為 .container 類設定乙個 width 值從而覆蓋框架的預設 width 設定，例如 width: 970px !important; 。請確保這些設定全部放在預設的 bootstrap css

檔案的後面。注意，如果你把它放到**查詢中，也可以略去 !important 。

如果使用了導航條，需要移除所有導航條的摺疊和展開行為。

對於柵格布局，額外增加 .col-xs-* 類或替換掉 .col-md-* 和 .col-lg-*。

不要擔心，針對超小螢幕裝置的柵格系統能夠在所有解析度的環境下展開。

3.移動裝置優先

也就是說你在自己的樣式表裡面寫的樣式是先對移動端樣式起作用的，這一點很重要

在 bootstrap 2 中，我們對框架中的某些關鍵部分增加了對移動裝置友好的樣式。而在 bootstrap 3 中，我們重寫了整個框架，使其一開始就是對移動裝置友好的。這次不是簡單的增加一些可選的針對移動裝置的樣式，而是直接融合進了框架的核心中。也就是說，bootstrap 是移動裝置優先的。針對移動裝置的樣式融合進了框架的每個角落，而不是增加乙個額外的檔案。

為了確保適當的繪製和觸屏縮放，需要在之中新增 viewport 元資料標籤。

name="viewport"
content="width=device-width, initial-scale=1">

在移動裝置瀏覽器上，通過為視口（viewport）設定 meta 屬性為 user-scalable=no

可以禁用其縮放（zooming）功能。這樣禁用縮放功能後，使用者只能滾動螢幕，就能讓你的**看上去更像原生應用的感覺。注意，這種方式我們並不推薦所有**使用，還是要看你自己的情況而定！

name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

4.布局容器bootstrap 需要為頁面內容和柵格系統包裹乙個 .container 容器。我們提供了兩個作此用處的類。注意，由於 padding 等屬性的原因，這兩種容器類不能互相巢狀。

.container 類用於固定寬度並支援響應式布局的容器。

"container">
...

.container-fluid 類用於 100% 寬度，佔據全部視口（viewport）的容器。

"container-fluid">
...

5.柵格系統柵格系統用於通過一系列的行（row）與列（column）的組合來建立頁面布局，你的內容就可以放入這些建立好的布局中。下面就介紹一下 bootstrap 柵格系統的工作原理：

6.**查詢

/* 超小螢幕（手機，小於 768px） */ /* 沒有任何**查詢相關的**，因為這在 bootstrap 中是預設的（還記得 bootstrap 是移動裝置優先的嗎？） */ /* 小螢幕（平板，大於等於 768px） */ @media (min-width: @screen-sm-min) /* 中等螢幕（桌面顯示器，大於等於 992px） */ @media (min-width: @screen-md-min) /* 大螢幕（大桌面顯示器，大於等於 1200px） */ @media (min-width: @screen-lg-min)

也就是說通過**查詢我們來寫幾套不同的樣式，實現讓**在不同的裝置上顯示不同的效果。7.柵格引數

8.響應式工具

Bootstrap學習總結

Bootstrap學習總結

Bootstrap學習總結

關於bootstrap學習總結

相關推薦