[부트스트랩] 컴포넌트 배치해보기

 

2-1. 로그인 화면

상단의 동작하는 네비게이션은 JQuery 의존성을 신경써서 작성해줘야한다.

 

 

# 네비게이션 + 패널

pannel 중앙정렬 前

# 패널 중앙 정렬 

로그인 입력화면을 만들 '패널 컴포넌트'를 가져올 때

중앙 정렬 및 영역 지정하기 위해 <div> 감싸준다 ! 

<!-- 중앙 정렬 -->
<div class="col-md-4 col-md-offset-4">
   <!-- 패널 -->
   <div class="panel panel-default">

      <div class="panel-heading">
      pannel-heading
      </div>

      <div class="panel-body">
       pannel-body <br />
       로그인 창으로 자주 사용된다. <br />
     </div>
   </div>
</div>

pannel 중앙정렬 後

 

# input class="form-control"

ID는 클래스 적용 ❌

비밀번호는 클래스 적용 ⭕

 

 

# 로그인 버튼 디자인

<button class="btn btn-lg btn-success btn-block">로그인</button>

btn : 버튼 기본 디자인 제공 

btn-lg : 버튼 크기가 크다.

btn-success : 초록색 버튼
btn-block : inline형태의 버튼을 공간을 꽉채우는 너비로 바꿔준다.

btn-block 클래스 적용 ❌

 

btn-block 클래스 적용 ⭕