FlowerBombs

responsive_util.html 본문

Javascript & JQuery&Ajax/bootstrap

responsive_util.html

CitronLemon 2019. 2. 22. 14:50

해상도에 따른 요소의 표시  <body>~ </body>


1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <div class="container">
        <div class="page-header">
            <h2>해상도에 따른 요소의 표시</h2>
        </div>
 
        <h1 class="text-primary visible-lg">(LG)Twitter bootstrap responsive utils</h1>
        <h2 class="text-success visible-md">(MD)Twitter bootstrap responsive utils</h2>
        <h3 class="text-info visible-sm">(SM)Twitter bootstrap responsive utils</h3>
        <h4 class="text-warning visible-xs">(XS)Twitter bootstrap responsive utils</h4>
 
    </div>
cs



PC vs Mobile


1
2
3
4
5
6
7
8
    <div class="container">
        <div class="page-header">
            <h2>PC vs Mobile</h2>
        </div>
 
        <h1 class="text-primary visible-lg visible-md">(LG, MD) PC용 컨텐츠</h1>
        <h3 class="text-info visible-sm visible-xs">(SM, XS)Mobile용 컨텐츠</h3>
    </div>
cs



해상도에 따른 요소의 숨김

1
2
3
4
5
6
7
8
9
10
    <div class="container">
        <div class="page-header">
            <h2>해상도에 따른 요소의 숨김</h2>
        </div>
 
        <h1 class="text-primary hidden-lg">(LG)Twitter bootstrap responsive utils</h1>
        <h2 class="text-success hidden-md">(MD)Twitter bootstrap responsive utils</h2>
        <h3 class="text-info hidden-sm">(SM)Twitter bootstrap responsive utils</h3>
        <h4 class="text-warning hidden-xs">(XS)Twitter bootstrap responsive utils</h4>
    </div>
cs






저작자표시 비영리 변경금지

'Javascript & JQuery&Ajax > bootstrap' 카테고리의 다른 글

form1.html  (0) 2019.02.22
mediaquery.html  (0) 2019.02.22
grid6.html  (0) 2019.02.22
grid5.html  (0) 2019.02.22
inner grid 3  (0) 2019.02.22
'Javascript & JQuery&Ajax/bootstrap' Related Articles more
Comments