Bootstrap 4 와 AdminLTE 3

부트스트랩(Bootstrap)은

2011년 8월 19일 트위터에서 발표한 반응형 웹 디자인(Responsive Web Design)을 지원하는 오픈소스 CSS,JS 프레임워크 이다.

* 트위터는 2024년 현재 X(엑스) 로 사명이 바뀌었다. CEO는 따로있지만 영향력 있는 인물은 우리가 아는 바로 그분(일론 머스크) 이다.
로켓 회사와 소셜미디어 회사이름이 유사한것이 포인트.
부트스트랩 초기 이름은 트위터 블루프린트 였다.(위키백과 참조)

AdminLTE는

Bootstrap 기반의 Admin Dashboard 탬플릿 이다. 1,2 버전을 거쳐서 현재(2024.01) 3 버전이다.

* GitHub 에는 Bootstrap 5 를 지원한다고 하는데 공식사이트 문서에는 Bootstrap 4 기반이라고 나온다. 데모만 봤을때는 Bootstrap 4인것 같다.

부트스트랩의 레이아웃 특징

그리드 시스템(링크: https://getbootstrap.com/docs/4.6/layout/grid/#how-it-works)

그리드 시스템은 모바일 우선의 Flexbox(CSS Flexbox) 그리드를 사용하여 12개의 열 시스템, 5개의 기본 반응형 계층을 사용한다.

12개 컬럼 시스템: 화면을 수평으로 12개의 컬럼으로 구분
5개 반응형 계층

xs (Extra Small): 가장 작은 화면 크기를 나타냄. 주로 모바일 디바이스를 대상.
sm (Small): 중간 크기의 화면을 나타냄. 태블릿 디바이스를 대상.
md (Medium): 중간에서 큰 화면을 나타냄. 일반적인 데스크톱 화면을 대상.
lg (Large): 큰 화면을 나타냅. 대형 디스플레이나 모니터를 대상.
xl (Extra Large): 가장 큰 화면을 나타냅. 매우 큰 디스플레이나 모니터를 대상.

* Flexbox (링크: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)

xs는 Bootstrap 4 에서는 더이상 사용하지 않음

container - row - col

부트스트랩은 기본적으로 화면요소를 다음 3가지로 구성한다.

container: 그리드를 감싸는 최상위 요소.
row: 그리드 행을 나타내는 요소. 그 안에 여러 col을 포함할 수 있습니다.
col: 그리드 컬럼을 나타내는 요소. 그 안에 내용을 배치합니다.

<div class="container">
  <div class="row">
    <div class="col-12">
      
    </div>
  </div>
</div>

* row 는 해당 레이아웃이 칼럼형태로 구성된다는 것을 의미하는 클래스 이기때문에 row 와 col 이 하나의 태그에 동시에 사용할 수 없다.

카드레이아웃

오래된 테이블 레이이아웃에 익숙해진 상태에서 div 구조의 부트스트랩을 사용하게 되면 row와 col 은 이해하겠는데 동일 높이의 col 이 필요한 경우가 있다. 이 때 필요한 것이 카드레이아웃 이다. 기본적으로 col 과 유사하지만 card 를 같이 사용하게 되면 동일 높이를 유지할 수 있다.

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Card 1</h5>
          <p class="card-text">Content for Card 1.</p>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Card 2</h5>
          <p class="card-text">Content for Card 2.</p>
        </div>
      </div>
    </div>
  </div>
</div>

card 를 사용하게 되면 위의 예제처럼 html 양이 늘어난다. 다음 코딩처럼 다른 방법을 사용하기도 하는데 상황에 따라 맞게 적용하는게 좋다.

<div class="container">
  <div class="row">
    <div class="col-md-6 d-flex align-items-stretch">
      
      <p>Left Block Content</p>
    </div>
    <div class="col-md-6 d-flex align-items-stretch">
      
      <p>Right Block Content</p>
    </div>
  </div>
</div>

d-flex 클래스는 display: flex;를 설정하여 유연한 박스 컨테이너를 만들고, align-items-stretch는 자식 요소들의 높이를 부모 컨테이너에 맞추는 스타일을 적용한다. 이를 통해 두 개의 컬럼이 동일한 높이를 가지게 된다.

AdminLTE SCSS를 활용한 커스터마이징

부트스트랩 커스터마이징

부트스트랩은 SCSS 를 이용해서 커스텀 스타일을 만들수 있는데 다음 예제는 테두리가 있는 전체너비 col 스타일이다.

.jy-bordered-row {
@extend #{'.col-12', '.border'}
}

col-12, border 는 bootstrap4 에서 이미 지정된 css 이다.

AdminLTE 커스터마이징

AdminLTE의 문서에는 SCSS를 활용해서 커스터 마이징 하는 샘플을 제공하고 있다.

// Bootstrap
// ---------------------------------------------------
@import '~bootstrap/scss/functions';
@import '~admin-lte/build/scss/bootstrap-variables';

// Custom Theme Color START
$custom-color: #00FF00;
$theme-colors: map-merge((
    'custom-color': $custom-color,
), $theme-colors);
// Custom Theme Color END

// Variables and Mixins
// ---------------------------------------------------
@import '~admin-lte/build/scss/variables';
@import '~admin-lte/build/scss/variables-alt';
@import '~admin-lte/build/scss/mixins';

@import '~bootstrap/scss/bootstrap';

@import '~admin-lte/build/scss/parts/core';
@import '~admin-lte/build/scss/parts/components';
@import '~admin-lte/build/scss/parts/extra-components';
@import '~admin-lte/build/scss/parts/pages';
@import '~admin-lte/build/scss/parts/plugins';
@import '~admin-lte/build/scss/parts/miscellaneous';

// Custom Style START
.my-custom-style {
  background-color: $custom-color;
  padding: .5rem 0;
}
// Custom Style END

또한 다음을 참고해서 커스텀 버튼 등을 만들 수 있다.

// Bootstrap
// ---------------------------------------------------
@import '~bootstrap/scss/functions';
@import '~admin-lte/build/scss/bootstrap-variables';
@import '~bootstrap/scss/mixins';

$custom-color: #00FF00;

.btn-custom-color {
@include button-variant($custom-color, $custom-color);
}

AdminLTE 의 커스터마이징은 AdminLTE 문서 참조(https://adminlte.io/docs/3.2)

[참고] Bootstrap 버전별 차이는
Bootstrap3 는 LESS, SCSS 모두 지원, 초기라 기능이 약하다.
Bootstrap4 는 SCSS 만 지원, 기능이 많이 늘어남
Bootstrap5 는 JQuery 제외, 기능이 업그레이드(xxl, Floating labels 등 추가)

저작자표시 동일조건

청풍명월(淸風明月)

Bootstrap 4 와 AdminLTE 3

부트스트랩(Bootstrap)은

AdminLTE는

부트스트랩의 레이아웃 특징

그리드 시스템(링크: https://getbootstrap.com/docs/4.6/layout/grid/#how-it-works)

container - row - col

카드레이아웃

AdminLTE SCSS를 활용한 커스터마이징

부트스트랩 커스터마이징

AdminLTE 커스터마이징

티스토리툴바

Bootstrap 4 와 AdminLTE 3

부트스트랩(Bootstrap)은

AdminLTE는

부트스트랩의 레이아웃 특징

그리드 시스템(링크: https://getbootstrap.com/docs/4.6/layout/grid/#how-it-works)

container - row - col

카드레이아웃

AdminLTE SCSS를 활용한 커스터마이징

부트스트랩 커스터마이징

AdminLTE 커스터마이징

'Computer/Web Design' Related Articles

티스토리툴바