반응형

AdminLTE에서 print시 모바일 기본인 것을 PC버전으로 출력하고 싶을때.  미디어쿼리 사용하자. 

CSS3 Media Queries

 

기존 css에 media=screen 으로 지정하고, print에도 동일한 스타일 적용할꺼면  media="screen,print" 로 지정

<link href="css/AdminLTE.css" rel="stylesheet" type="text/css" media="screen" />


<!-- print -->
 <link href="css/print.css" rel="stylesheet" type="text/css" media="print"/>

print.css에 있으면 인쇄시 적용된다. 

 @media print { 
 }

그래서, 일단 모바일로 안나오게끔 인쇄할때에도 사용되는 col-lg-~~를 넣어주었다. 

 

/* Enhancement for printing */
 
@media print {   
    .col-lg-4 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 33.33333%;
        flex: 0 0 33.33333%;
        max-width: 33.33333%;
    }
    .col-lg-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .col-lg-8 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 66.66667%; 
        flex: 0 0 66.66667%;
        max-width: 66.66667%;
    }
    .col-lg-auto {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

}

/* End of media print */

 

 

 

github.com/ColorlibHQ/AdminLTE/issues/199

반응형
반응형

부트스트랩, 어떻게 사용해야할까? -파트 1 (번역본)

https://brunch.co.kr/@clay1987/131

 

부트스트랩, 어떻게 사용해야할까? -파트 1 (번역본)

세계에서 가장 인기있는 프론트엔드 라이브러리, 부트스트랩 사용법! | 이 게시물은 Medium, wd stack 채널의 How to bootstrap 이라는 문서를 번역한 게시글입니다. 맥락상 이해가 쉽도록 의역 + 수정했�

brunch.co.kr

 

https://getbootstrap.com/docs/4.1/getting-started/introduction/

 

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.

getbootstrap.com

 

반응형

+ Recent posts