回首頁

顯示 / 隱藏工具 - Visibility Utililities

Small
<= 576px 		Medium
<= 768px 		Large
<= 992px 		Extra large
<= 1200px 		> 1200px
.hidden-sm 隱藏 顯示 顯示 顯示 顯示
.hidden-md 隱藏 隱藏 顯示 顯示 顯示
.hidden-lg 隱藏 隱藏 隱藏 顯示 顯示
.hidden-xl 隱藏 隱藏 隱藏 隱藏 顯示
Result HTML
hidden-sm ( 隱藏 )
hidden-md ( 隱藏 )
hidden-md ( 顯示 )
hidden-lg ( 隱藏 )
hidden-xl ( 隱藏 ) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div class="container-wrap">
  <div class="container">
    <div class="row">
      <div class="col-12">
        hidden-sm ( 隱藏 )
        <div class="hidden-sm">hidden-sm ( 顯示 )</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        hidden-md ( 隱藏 )
        <div class="hidden-md">hidden-md ( 顯示 )</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        hidden-lg ( 隱藏 )
        <div class="hidden-lg">hidden-lg ( 顯示 )</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        hidden-xl ( 隱藏 )
        <div class="hidden-xl">hidden-xl ( 顯示 )</div>
      </div>
    </div>
  </div>
</div>
Small
<= 576px 		Medium
<= 768px 		Large
<= 992px 		Extra large
<= 1200px 		> 1200px
.visible-sm-* 顯示 隱藏 隱藏 隱藏 隱藏
.visible-md-* 顯示 顯示 隱藏 隱藏 隱藏
.visible-lg-* 顯示 顯示 顯示 隱藏 隱藏
.visible-xl-* 顯示 顯示 顯示 顯示 隱藏
Result HTML
visible-sm-block ( 隱藏 )
visible-sm-block ( 顯示 )
visible-md ( 隱藏 )
visible-md-block ( 顯示 )
visible-lg ( 隱藏 )
visible-lg-block ( 顯示 )
visible-xl-block ( 隱藏 )
visible-xl-block ( 顯示 )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<div class="container-wrap">
  <div class="container">
    <div class="row">
      <div class="col-12">
        visible-sm-block ( 隱藏 )
        <div class="visible-sm-block">visible-sm-block ( 顯示 )</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        visible-md ( 隱藏 )
        <div class="visible-md-block">visible-md-block ( 顯示 )</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        visible-lg ( 隱藏 )
        <div class="visible-lg-block">visible-lg-block ( 顯示 )</div>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        visible-xl-block ( 隱藏 )
        <div class="visible-xl-block">visible-xl-block ( 顯示 )</div>
      </div>
    </div>
  </div>
</div>