首頁  >  文章  >  web前端  >  bootstrap中sm是什麼意思

bootstrap中sm是什麼意思

WBOY
WBOY原創
2022-05-06 18:35:352745瀏覽

在bootstrap中,sm是“小”的意思,是small的縮寫;sm常用於表示柵格類別“.col-sm-*”,是小螢幕設備類別的意思,表示顯示大小大於等於768px且小於992px的螢幕設備,類似平板設備。

bootstrap中sm是什麼意思

本教學操作環境:Windows10系統、bootstrap3.3.7版、DELL G3電腦

bootstrap中sm是什麼意思

sm是small的意思,也就是小。

什麼是柵格系統

柵格系統是指,將頁面佈局分割成等寬的列,然後透過列數的定義來模組化頁面佈局。 Bootstrap的柵格系統採用了1-12列的模式,並且透過比例計算來設定你定義的列寬。例如你這一行想要採用兩列的佈局模式,那麼每列的寬度都為外容器的50%,不管你用什麼設備瀏覽,它都會採用這樣的比例來展示。不過如果當設備寬度小於你設定的最小寬度,那麼這兩列就會並排成為一列。

Bootstrap的柵格系統

在Bootstrap中使用柵格系統非常簡單方便,只需要在你的div中引入它們已經定義好的類別即可。

我們先來看看Bootstrap有幾個柵格類別可以使用:

1、.col-xs-* 這是超小螢幕類別(<768px ),類似手機等設備。

2、.col-sm-* 這是小螢幕裝置類別(≥768px且<992px),類似平板裝置。

3、 .col-md-* 這是中型裝置類別(≥992px且<1200px)。

4、 .col-lg-* 這是大型裝置類別(≥1200px)。

col- 針對所有裝置

col-sm- 平板- 螢幕寬度等於或大於576px

col-md- 桌面顯示器- 螢幕寬度等於或大於768px)

col-lg- 大桌面顯示器- 螢幕寬度等於或大於992px)

#col-xl- 超大桌面顯示器- 螢幕寬度等於或大於1200px)

#相關建議: bootstrap教程

以上是bootstrap中sm是什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn