Display

Display プロパティの変更 Utility を、ほぼすべてのモジュールに対して使えます。

Add Class.is-block.is-inline.is-inline-block.is-none
Functiondisplay: block;display: inline;display: inline-block;display: none;

Responsive

.is-(xxxx)-(yy) 形式の class を加えることでレスポンシブにプロパティを変化させられます。

Mobile
all

Fablet
576px ~

Tablet
768px ~

Desktop
992px ~

Wide
1200px ~

block

.is-mobile-block

.is-fablet-block

.is-tablet-block

.is-desktop-block

.is-wide-block

inline

.is-mobile-inline

.is-fablet-inline

.is-tablet-inline

.is-desktop-inline

.is-wide-inline

inline-block

.is-mobile-inline-block

.is-fablet-inline-block

.is-tablet-inline-block

.is-desktop-inline-block

.is-wide-inline-block

none

.is-mobile-none

.is-fablet-none

.is-tablet-none

.is-desktop-none

.is-wide-none

Mobile Only
~ 575px

Fablet Only
576px ~ 767px

Tablet Only
768px ~ 991px

Desktop Only
992px ~ 1199px

block

.is-mobile-only-block

.is-fablet-only-block

.is-tablet-only-block

.is-desktop-only-block

inline

.is-mobile-only-inline

.is-fablet-only-inline

.is-tablet-only-inline

.is-desktop-only-inline

inline-block

.is-mobile-only-inline-block

.is-fablet-only-inline-block

.is-tablet-only-inline-block

.is-desktop-only-inline-block

none

.is-mobile-only-none

.is-fablet-only-none

.is-tablet-only-none

.is-desktop-only-none

Mobile ~ Fablet
~ 767px

Mobile ~ Tablet
~ 991px

Mobile ~ Desktop
~ 1199px

block

.is-mobile-fablet-block

.is-mobile-tablet-block

.is-mobile-desktop-block

inline

.is-mobile-fablet-inline

.is-mobile-tablet-inline

.is-mobile-desktop-inline

inline-block

.is-mobile-fablet-inline-block

.is-mobile-tablet-inline-block

.is-mobile-desktop-inline-block

none

.is-mobile-fablet-none

.is-mobile-tablet-none

.is-mobile-desktop-none

Landscape
landscape & ~ 991px

Portrait
portrait & ~ 991px

block

.is-landscape-block

.is-portrait-block

inline

.is-landscape-inline

.is-portrait-inline

inline-block

.is-landscape-inline-block

.is-portrait-inline-block

none

.is-landscape-none

.is-portrait-none

Last Updated: 2018-11-6 01:24:05