1.1 bootstrap簡介
中文官網:
官網:
2.3 布局容器
bootstrap需要為頁面內容和柵格系統包裹乙個.container容器,bootstarp預先定義好了這個類,叫.container他提供了兩個作此用處的類
1.container類
響應式布局的容器 固定寬度
大屏(>=1200px)寬度為1170px
中屏(>=992px)寬度為970px
小屏(>=768px)寬度為750px
超小屏(100%)
3.1 柵格系統
系統會自動分為最多12列
3.2 柵格選項引數
超小螢幕裝置 手機 (<768px) 小螢幕裝置 平板 (≥768px) 中等螢幕裝置 桌面 (≥992px) 大螢幕裝置 桌面 (≥1200px)
容器的寬度 none (auto) 750px 970px 1170px
class字首 .col-xs- .col-sm- .col-md- .col-lg-
列(column)數 12
按照不同螢幕劃分為1-12等份
行(row)可以去除父容器作用15px的邊距
xs-extra small:超小;sm-small:小;md-medium:中等;lg-large:大;
列(column)大於12,多餘的"列(column)"所在的元素將被作為乙個整體另起一行排列
每一列缺省有左右15px的padding
可以同時為一列指定多個裝置的類名,以便劃分不同份數 列如class=「col-md-4 col-sm-6」
3.6 響應式工具
類名 超小屏 小屏 中屏 大屏
.hidden-xs 隱藏 可見 可見 可見
.hidden-sm 可見 隱藏 可見 可見
.hidden-md 可見 可見 隱藏 可見
.hidden-lg 可見 可見 可見 隱藏
與之相反,visible-xs visible-sm visible-md visible-lg 是顯示某個頁面內容
Bootstrap柵格布局
bootstrap 提供了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義類，還有強大的mixin 用於生成更具語義的布局。柵格系統用於通過一系列的行 row 與列 column 的組合來建立頁面布局，你的內容就...
Bootstrap柵格布局
1 柵格系統 布局 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視口 viewport 尺寸的增加，系統會自動分為最多12列。我在這裡是把bootstrap中的柵格系統叫做布局。它就是通過一系列的行 row 與列 column 的組合建立頁面布局，然後你的內容就可以...
bootstrap柵格系統布局
學習筆記 一 移動裝置優先 在html5 的專案中，我們做了移動端的專案。它有乙份非常重要的meta，用於設定螢幕和裝置等寬以及是否執行使用者縮放，及縮放比例的問題。分別為 螢幕寬度和裝置一致 初始縮放比例 最大縮放比例和禁止使用者縮放 二 布局容器 bootstrap 需要為頁面內容和柵格系統包裹...