부트스트랩3 레이아웃 기초

이번에 부트스트랩3.3.0기반의 AdminLTE 프레임웍을 작업할 기회가 생겼습니다.

기존에 부트스트랩2만 사용하다가 이제야 버전3을 사용하게 되었네요...

작업전에 기본사항을 점검해 봅니다.

* 기술참조( http://bootstrapk.com/css/ )

* 데모참조( http://jaybabani.com/complete-admin/v4.2/preview/fixedmenu/index.html )

1. 가장 바깥쪽의 클래스명을 .container -> .container-fluid 으로 바꿈으로서, 고정폭 그리드 레이아웃을 최대폭 레이아웃으로 전환.

2. 클래스명에 따른 레이아웃 구분

.row (행 구분클래스 .container 또는 .container-fluid 안에 .row로 행을 만듭니다.)

.col-*-*

.row 안에 .col-*-*로 열을 만듭니다.

첫번째 *에는 xs, sm, md, lg 중의 하나가, 두번째 *에는 1부터 12까지의 수 중의 하나가 들어갑니다.

xs : eXtraSmall, 가로 해상도 768px 미만 기가에서 적용됩니다.(*기본값) -margin 양쪽합쳐서: 30px
sm : SMall, 가로 해상도 768px 이상에서 적용됩니다.-margin 양쪽합쳐서: 30px
md : MiDdle, 가로 해상도 992px 이상에서 적용됩니다.-margin 양쪽합쳐서: 30px
lg : LarGe, 가로 해상도 1200px 이상에서 적용됩니다.-margin 양쪽합쳐서: 30px
1 - 12 : 행을 12등분하여 그 중 몇 개를 사용할 지정합니다.

예) <div class="col-xs-12 col-md-6 col-lg-4"> 의미:

X-Small 기기에서는 너비=12컬럼(꽉차게) < Middle-Media 기기에서는 너비=6컬럼(반으로) < Large-Media 기기에서는 너비=4컬럼(1/3로) 으로 지정

Ps. 판매용도 있군요 https://wrapbootstrap.com/theme/complete-admin-.net-angular-html-WB0K88500

참고) 오늘 네이버modoo에 사이트가 만들어 졌습니다. https://timespacebiz.modoo.at/