부트스트랩 반응형 요소만 사용하기 > html

부트스트랩 반응형 요소만 사용하기

페이지 정보

작성자 서방님 댓글 0건 조회 144회 작성일 19-05-03 17:03

본문

반응형웹을 만들고 싶어 부트스트랩을 쓰고 싶기는 한데. 반응형 외의 다른 요소들의 디자인은 마음에 들지 않고... 부트스트랩 css 파일은 어찌나 그렇게 큰지! 라고 생각하지는 분들을 위해 오직 반응형요소만 뽑아보았습니다.

.container {padding-right:5px; padding-left:5px; margin-right:auto; margin-left:auto;}

.container:before, .container:after {display:table; content:" ";}

.container:after {clear:both;}

.container:before, .container:after {display:table; content:" ";}

.container:after {clear:both;}

.row {margin-right:-5px; margin-left:0px; margin-top:-5px;}

.row:before, .row:after {display:table; content:" ";}

.row:after {clear:both;}

.row:before, .row:after {display:table; content:" ";}

.row:after {clear:both;}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {min-height:1px; padding-top:5px; padding-right:5px; padding-left:0px; box-sizing:border-box;}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11 {float:left;}

.col-xs-1 {width:8.333333333333332%;}

.col-xs-2 {width:16.666666666666664%;}

.col-xs-3 {width:25%;}

.col-xs-4 {width:33.33333333333333%;}

.col-xs-5 {width:41.66666666666667%;}

.col-xs-6 {width:50%;}

.col-xs-7 {width:58.333333333333336%;}

.col-xs-8 {width:66.66666666666666%;}

.col-xs-9 {width:75%;}

.col-xs-10 {width:83.33333333333334%;}

.col-xs-11 {width:91.66666666666666%;}

.col-xs-12 {width:100%;}

@media (min-width:768px) {

.container {width:750px;}

.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11 {float:left;}

.col-sm-1 {width:8.333333333333332%;}

.col-sm-2 {width:16.666666666666664%;}

.col-sm-3 {width:25%;}

.col-sm-4 {width:33.33333333333333%;}

.col-sm-5 {width:41.66666666666667%;}

.col-sm-6 {width:50%;}

.col-sm-7 {width:58.333333333333336%;}

.col-sm-8 {width:66.66666666666666%;}

.col-sm-9 {width:75%;}

.col-sm-10 {width:83.33333333333334%;}

.col-sm-11 {width:91.66666666666666%;}

.col-sm-12 {width:100%;}

}

@media (min-width:992px) {

.container {width:970px;}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 {float:left;}

.col-md-1 {width:8.333333333333332%;}

.col-md-2 {width:16.666666666666664%;}

.col-md-3 {width:25%;}

.col-md-4 {width:33.33333333333333%;}

.col-md-5 {width:41.66666666666667%;}

.col-md-6 {width:50%;}

.col-md-7 {width:58.333333333333336%;}

.col-md-8 {width:66.66666666666666%;}

.col-md-9 {width:75%;}

.col-md-10 {width:83.33333333333334%;}

.col-md-11 {width:91.66666666666666%;}

.col-md-12 {width:100%;}

}

@media (min-width:1200px) {

.container {width:1170px;}

.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11 {float:left;}

.col-lg-1 {width:8.333333333333332%;}

.col-lg-2 {width:16.666666666666664%;}

.col-lg-3 {width:25%;}

.col-lg-4 {width:33.33333333333333%;}

.col-lg-5 {width:41.66666666666667%;}

.col-lg-6 {width:50%;}

.col-lg-7 {width:58.333333333333336%;}

.col-lg-8 {width:66.66666666666666%;}

.col-lg-9 {width:75%;}

.col-lg-10 {width:83.33333333333334%;}

.col-lg-11 {width:91.66666666666666%;}

.col-lg-12 {width:100%;}

}

.visible-xs, .visible-sm, .visible-md, .visible-lg {display:none !important;}

.visible-xs-block, .visible-xs-inline, .visible-xs-inline-block, .visible-sm-block, .visible-sm-inline, .visible-sm-inline-block, .visible-md-block, .visible-md-inline, .visible-md-inline-block, .visible-lg-block, .visible-lg-inline, .visible-lg-inline-block {display:none !important;}

@media (max-width:767px) {

.visible-xs {display:block !important;}

table.visible-xs {display:table;}

tr.visible-xs {display:table-row !important;}

th.visible-xs, td.visible-xs {display:table-cell !important;}

.visible-xs-block {display:block !important;}

.visible-xs-inline {display:inline !important;}

.visible-xs-inline-block {display:inline-block !important;}

.inputInline .helpBlock {display:block; margin-top:5px; line-height:1.6; height:auto;}

}

@media (min-width:768px) and (max-width:991px) {

.visible-sm {display:block !important;}

table.visible-sm {display:table;}

tr.visible-sm {display:table-row !important;}

th.visible-sm, td.visible-sm {display:table-cell !important;}

.visible-sm-block {display:block !important;}

.visible-sm-inline {display:inline !important;}

.visible-sm-inline-block {display:inline-block !important;}

}

@media (min-width:992px) and (max-width:1199px) {

.visible-md {display:block !important;}

table.visible-md {display:table;}

tr.visible-md {display:table-row !important;}

th.visible-md, td.visible-md {display:table-cell !important;}

.visible-md-block {display:block !important;}

.visible-md-inline {display:inline !important;}

.visible-md-inline-block {display:inline-block !important;}

}

@media (min-width:1200px) {

.visible-lg {display:block !important;}

table.visible-lg {display:table;}

tr.visible-lg {display:table-row !important;}

th.visible-lg, td.visible-lg {display:table-cell !important;}

.visible-lg-block {display:block !important;}

.visible-lg-inline {display:inline !important;}

.visible-lg-inline-block {display:inline-block !important;}

}

@media (max-width:767px) {

.hidden-xs {display:none !important;}

}

@media (min-width:768px) and (max-width:991px) {

.hidden-sm {display:none !important;}

}

@media (min-width:992px) and (max-width:1199px) {

.hidden-md {display:none !important;}

}

@media (min-width:1200px) {

.hidden-lg {display:none !important;}

}

.visible-print, .visible-print-block, .visible-print-inline, .visible-print-inline-block {display:none !important;}

@media print {

.visible-print {display:block !important;}

table.visible-print {display:table;}

tr.visible-print {display:table-row !important;}

th.visible-print, td.visible-print {display:table-cell !important;}

.visible-print-block {display:block !important;}

.visible-print-inline {display:inline !important;}

.visible-print-inline-block {display:inline-block !important;}

.hidden-print {display:none !important;}

}

위와 같은 CSS만 있으면 얼마든지 반응형 요소로 만들수 있습니다.

알아서 가로폭이 조절됩니다.

</div>

아이패드까진 가로로 2칸이 보이나, 폰에선 가로로 1칸을 차지합니다.

</div>

아이패드까진 가로로 2칸이 보이나, 폰에선 가로로 1칸을 차지합니다.

</div>

그리고 당연히 특정 해상도에서만 요소를 숨기거나 보이는 것도 가능합니다.

나는 인라인블럭 요소인데 폰 해상도에서만 보여!

</div>

나는 타블렛 해상도를 초과한 모니터에서만 보여! 아이패드 세로형에선 숨겨졌다 가로형에선 나오지!

</div>

=============================

8장의 이미지를 큰 해상도에선 가로로 4개씩 2줄 보이게, 작은해상도에서는 2개씩 4줄 보이게 하는 방법

<!-- 부트스트랩은 한줄을 12칸으로 쪼갭니다.

col-lg-3 이라는 의미는 lg(큰해상도)에서 3칸을 차지하라! 라는 의미입니다.

즉 12칸중 3칸을 차지하라! 라고 한다면 가로로 4칸이 나오겠죠? 12 / 3 = 4

거기에 추가로 col-xs-6 을 적었습니다.

이러면 xs (작은해상도)에서는 6칸을 차지하라! 라는 의미이기 때문에

작은해상도에서는 12 / 6 = 2 해서 한줄에 2칸이 나오겠죠! -->

</div>

댓글목록

등록된 댓글이 없습니다.

번호	제목	글쓴이	조회	날짜
323	NOTO SANS 노토산스 CDN	서방님	63	02-28
322	input file 버튼 커스터마이징하기	서방님	69	01-09
321	[CSS] 상품 이미지 위에, NEW 배너 + 문구 대각선 표시	서방님	1	08-18
320	[CSS] 이번에야말로 CSS Flex를 익혀보자	서방님	89	08-26
319	구글 캘린더 추가 링크 생성 방법	서방님	131	04-29
318	https 페이지내 http 컨텐츠가 있어서 IE에서 보안 콘텐츠만 표시됩니다. 에러 처리	서방님	153	06-08
317	구글 캘린더 추가 링크 생성 방법	서방님	146	02-19
316	IE img label for 클릭 안될때 처리	서방님	122	08-26
315	[CSS] 웹 컬러 색상표 (Web Color Palette)	서방님	113	08-07
314	HTML 테이블 tbody 스크롤 적용, head 고정3	서방님	133	05-09
313	HTML 테이블 tbody 스크롤 적용, head 고정2	서방님	133	05-09
312	HTML 테이블 tbody 스크롤 적용, head 고정	서방님	174	05-09
열람중	부트스트랩 반응형 요소만 사용하기	서방님	145	05-03
310	폰트어썸(Font Awesome) 아이콘	서방님	146	05-02
309	텍스트에 new 아이콘 달기	서방님	149	04-11

부트스트랩 반응형 요소만 사용하기 > html

인기검색어

html