부트스트랩에서 그리드만 사용할려고 하는데 전체파일을 받을필요가 있나요?
본문
부트스트랩 사용해서 반응형 코딩하는데
row, container, col-md-*, col-xs-*
등등 그리드에 대한것만 사용하는데
부트스트랩 전체파일을 받을 필요가 잇을까 해서용
저부분만 css에서 복사해서 써야하나요?
답변 4
네, 필요한 부분만 가져다 쓰셔도 됩니다. 원래 그러라고 있는 거에요.
자신이 자주쓰는 컴포넌트 및 구조랑 관련된 CSS만 복사해서 쓰시는 게 다른 프로젝트에 끼어넣기 편합니다. 그리드외에도 Responsive utilities 정도 가져다쓰는게 도움이 될 것입니다.
.row {margin-right:-15px;margin-left:-15px;}
.col-xs-1, .col-sm-1, .col-md-1, .col-xs-2, .col-sm-2, .col-md-2, .col-xs-3, .col-sm-3, .col-md-3, .col-xs-4, .col-sm-4, .col-md-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-xs-6, .col-sm-6, .col-md-6, .col-xs-7, .col-sm-7, .col-md-7, .col-xs-8, .col-sm-8, .col-md-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-xs-10, .col-sm-10, .col-md-10, .col-xs-11, .col-sm-11, .col-md-11, .col-xs-12, .col-sm-12, .col-md-12{
position:relative;
min-height:1px;
padding-right: 15px;
padding-left: 15px;
}
.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 {float:left;}
.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 {float: left;}
.col-md-12 {width: 100%;}
.col-md-11 {width: 91.66666667%;}
.col-md-10 {width: 83.33333333%;}
.col-md-9 {width: 75%;}
.col-md-8 {width: 66.66666667%;}
.col-md-7 {width: 58.33333333%;}
.col-md-6 {width: 50%;}
.col-md-5 {width: 41.66666667%;}
.col-md-4 {width: 33.33333333%;}
.col-md-3 {width: 25%;}
.col-md-2 {width: 16.66666667%;}
.col-md-1 {width: 8.33333333%;}
.col-xs-12 {width:100%;}
.col-xs-11 {width:91.66666667%;}
.col-xs-10 {width:83.33333333%;}
.col-xs-9 {width:75%;}
.col-xs-8 {width:66.66666667%;}
.col-xs-7 {width:58.33333333%;}
.col-xs-6 {width:50%;}
.col-xs-5 {width: 41.66666667%;}
.col-xs-4 {width: 33.33333333%;}
.col-xs-3 {width: 25%;}
.col-xs-2 {width: 16.66666667%;}
.col-xs-1 {width: 8.33333333%;}
@media (max-width:768px)
{
.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 {
float: left;
}
.col-xs-12 {width:100%;}
.col-xs-11 {width:91.66666667%;}
.col-xs-10 {width:83.33333333%;}
.col-xs-9 {width:75%;}
.col-xs-8 {width:66.66666667%;}
.col-xs-7 {width:58.33333333%;}
.col-xs-6 {width:50%;}
.col-xs-5 {width: 41.66666667%;}
.col-xs-4 {width: 33.33333333%;}
.col-xs-3 {width: 25%;}
.col-xs-2 {width: 16.66666667%;}
.col-xs-1 {width: 8.33333333%;}
}
이 부분만 쓰고 잇는데 혹시 잘못된걸까용 ?
부트스트랩의 기본 반응형 스타일이 있는데 그것만 한다고 되는게 아니죠.
배보다 배꼽이 더 큽니다. 그냥 전체사용하시는게...그냥 의견입니다.
정신건강을 위해서 기본 전체를 받으시고
원하는 클래스만 써도 좋습니다...
분리시키는게 더 손이 많이가고..
로딩 속도차이도 그닥 차이를 느끼지못합니다..
부트스트랩은 CSS와 JS파일이 있어야 정상적으로 구동 됩니다.
전체적으로 파일을 받을 필요는 없지만 필요한 js파일과 css 파일을 받으시면 됩니다.
물론 내용도 수정해서 사용 하셔도 가능 하구요.
답변을 작성하시기 전에 로그인 해주세요.
