[ Bootstrap ] 부트스트랩 Navbar 나브 바 Container 컨테이너 Grid 그리드 활용

[ Bootstrap ] 부트스트랩 Navbar 나브 바 Container 컨테이너 Grid 그리드 활용

부트스트랩을 활용하기에 앞서 가장 중요한 것은 버전을 확인하는 것이다. Doit 장고 부트스트랩 교재에서는 4.5 버전을 사용하니 이에 유의하여 작성하길 바란다.

 

 

Bootstrap Navbar

 

 

1. 부트스트랩 홈페이지(bootstrap.com)에 접속한다.

2. Components 인덱스의 Navbar를 클릭한다.

3. 다양한 디자인의 나브 바와 코드가 나열되어 있다.

4. 원하는 Navbar를 클릭한다.

5. Html에 있는 원래 nav태그가 있는 곳에 복사 붙여 넣기 한다.

6. 반응형 navbar를 사용하면 윈도 크기에 따라 나브 바 디자인이 변경된다.

7. a 태그의 innerHTML과 href의 주소를 수정한다.

 

 

728x90

 

Bootstrap Container

 

1. Container 추가 기본 방법

 

Container는 본문의 내용에 여백을 주기 위해 사용한다. 사용 방법은 새로운 <div> 태그를 추가한 뒤 class에 container를 추가하는 기본적인 방법이 있다.

<div class=“container”>

 

2. Navbar 자체에 여백을 주기

 

Navbar 자체에 여백을 주게 되면 상단에 있는 인덱스 자체에 여백을 주는 것이다. 따라서 상단바에 여백이 생기게 된다.

<nav class=“navbar navbar-expan-lg container”>

 

3. Navbar 내용에 여백을 주기

 

Navbar 내용에 여백을 주려면 <nav> 태그 안에 있는 코드를 기본적인 방법인 <div> 태그를 추가하는 방식으로 묶어준다.

 

 

728x90

 

 

Bootstrap Grid

 

부트스트랩에서 제공하는 grid는 화면 폭을 12개로 나눠 관리해준다. 화면 폭의 크기에 따라 설정을 다르게 해 유동적인 변화를 나타낼 수 있다. 유의할 점은 행(col)에 대해 적용해야 한다는 점이다. ex) 9:3 , 6:6

<div class=“row”> 
   <div class=“col-9”> 
   <div class=“col-3”>

 

 

설정에 따른 폭의 크기

 

폭의 넓이가 두 가지 상태 공존할 수 있다.

윈도 화면의 크기에 따라 폭의 넓이를 다르게 지정해 유동적인 웹사이트를 만들 수 있다.

 

col-sm = small col 작은 화면일 때 폭의 넓이

col-md = mid col 중간 화면일 때 폭의 넓이

col-lg = large col 큰 화면일 때 폭의 넓이

col-md-8 col-lg-9

col-md-4 col-lg-3

 

728x90

자동 조정하기

이미지의 크기 폭에 맞춰 자동 조정할 수 있다. 이미지 태그 안에 클래스 속성을 넣자

<img class = “img-fluid w-100”>