Bootstrap 세팅과 사용법

https://lesscss.org/

Getting started | Less.js

LESS 를 사용해 만들어졌다.

 

12 column 반응형 grid system / 수많은 위젯 / 컴포넌트 / javascript plug in 을지원하며 원하는 기능만 커스터마이징 할 수 있다

 

1. 부트스트랩의 기본 사용법을 한글로 번역한 사이트

http://bootstrapk.com/

부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크.

2. 부트스트랩 소스코드 사이트

기본적은 내용들이 나와있습니다. 필요한 부분을 찾아 오른쪽 위의 버튼을 클릭하면 소스코드를 볼 수 있습니다. 그 소스를 자신이 원하는 위치에 넣기만 하면 됩니다.

 

http://bootswatch.com

Bootswatch: Free themes for Bootstrap

3. 부트스트랩 소스코드 사이트2

https://www.w3schools.com/bootstrap/

 

*부트스트랩 사용

• 부트스트랩은 jQuery 기반으로 만들어져 지원되는 jQuery의 버전을 맞추어 주어야한다.
• CSS 와 JS 기능 두가지 기능으로 나뉜다. 필요한 기능만 연결해 사용이 가능하다

1. grid system

 

 그리드는 총 12열로 구성되어 있다.

 

• 기기별 해상도에 따른 클래스 접두사
• 모바일 (<768px)        .col-xs- 단수
• 태블릿 (>=768px)      .col-sm- 단수
• 데스트탑 (>=992px)   .col-md- 단수
• 와이드 (>=1200px)    .col-lg- 단수

 

• class="container"   => 레이아웃을 감싸는 역할   (grid.html) ( 양쪽 여백이 존재한다 )
• class="container-fluid" => 레이아웃을 감싸는 역할   (grid.html) ( 양쪽 여백없이 화면에 꽉 찬다 )
• class="row"는 한 행을 구성한다. 한 행은 총 12열로 구성되어 있다.
• 해상도가 1200px인 경우 자동으로 1170px로 변경
• 해상도가 1200px보다 작게되면 970px로 변경

<div class="container">
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>

행의 값이 12일 때

기본 12단으로 행의 합을 12로 맞추어 주는것이 기본이며

합의 값이 12 미만 또는 초과일 경우 float : left ; 처리된 것 처럼 적용된다.

12 초과 일 때

12 미만일 때

ex) 해상도에 따라 여러 그리드를 구현하고 싶을 때 클래스를 추가해준다

<div class="container">
    <div class="row">
      <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">.col-lg-2</div>
      <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">.col-lg-2</div>
      <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">.col-lg-2</div>
      <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">.col-lg-2</div>
      <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">.col-lg-2</div>
      <div class="col-lg-2 col-md-4 col-sm-6 col-xs-12">.col-lg-2</div>
  </div>
</div>

col-lg-2 : 와이드 pc일 때 해당 div 는 12 단 중 2 만큼 공간을 차지

col-md-4 : 일반 pc일 때 해당 div 는 12 단 중 4 만큼 공간을 차지

col-sm-6 : 태블릿 일 때 해당 div 는 12 단 중 6 만큼 공간을 차지

col-xs-12 : 모바일 일 때 해당 div 는 12 단 중 12 만큼 공간을 차지

 

2. 중첩 그리드  (grid2.html)

• 하나의 그리드 내부에 또 그리드를 만들수 있다.
• 내부에 만들어진 그리드는 또다시 12개의 그리드가 생성된다.

<div class="container">
    <div class="row">
        <div class="col-md-8">
            .col-md-8
            <div class="row">
                <div class="col-md-4 pad10">
                    내부 12개 그리드 중 4개 .col-md-4
                </div>
                <div class="col-md-8 pad10">
                    내부 12개 그리드 중 8개 .col-md-8
                </div>
            </div>
        </div>
        <div class="col-md-4">
            .col-md-4
            <div class="row"> <!-- 열 안에 class="row" 로 감싸준다 -->
                <div class="col-md-6 pad10">
                    내부 12개 그리드 중 6개 .col-md-6
                </div>
                <div class="col-md-6 pad10">
                    내부 12개 그리드 중 6개 .col-md-6
                </div>
            </div>
        </div>
    </div>
</div>

3. 그리드 사이에 공간

<div class="container">
    <div class="row">
        <div class="col-md-5">
            .col-md-5
        </div>
        <div class="col-md-5 col-md-offset-2">
            .col-md-5 col-md-offset-2
        </div>
    </div>
    <div class="row">
        <div class="col-md-4">
            .col-md-4
        </div>
        <div class="col-md-7 col-md-offset-1">
            .col-md-7 .col-md-offset-1
        </div>
    </div>
</div>

grid 사이 공간주기

• col-md-offset-  => 그리드 사이의 offset  (grid3.html)
• offset 값 까지 더한 총 개수가 12가 되어야 한다.  (grid4.html)->총합이 12를 넘겼을때.
• offset 값은 값을 준 박스의 앞쪽에 공간을 만든다.

3-1 예시

<div class="container">
    <header>
        <h2>그리드 시스템을 이용한 레이아웃
        </h2>
    </header>
    <div class="row">
        <div class="col-md-2 col-sm-2">
            <ul class="nav">
                <li>menu 1</li>
                <li>menu 2</li>
                <li>menu 3</li>
                <li>menu 4</li>
            </ul>
        </div>
        <div class="col-md-8 col-sm-10">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rutrum vitae
                lectus sit amet tincidunt. Aliquam id fringilla sapien. Mauris eu nulla at nunc
                mollis pharetra. Fusce iaculis lectus nec enim feugiat luctus. Nunc tempor orci
                auctor iaculis consectetur. Cras pellentesque lorem sit amet tempor convallis.
                Sed ut cursus urna, sed adipiscing elit. Curabitur sit amet adipiscing felis.
                Duis pellentesque justo quam. Integer lobortis vehicula mauris, at ornare turpis
                consectetur at. Duis tristique velit tortor, quis viverra dolor venenatis eget.</p>

            <p>Nunc venenatis laoreet ullamcorper. Fusce at orci vulputate, mattis neque
                vel, euismod ipsum. Proin varius metus neque. In congue, arcu eu posuere
                gravida, erat sem auctor orci, eu convallis tortor est id sapien. Phasellus
                gravida quam est, et posuere diam cursus ut. Donec et ipsum laoreet, mattis
                mauris sit amet, suscipit augue. Etiam vel massa consequat leo pulvinar
                fermentum a vel urna. Duis malesuada tincidunt tortor id mattis. Sed facilisis
                massa libero, ut cursus turpis molestie a. Sed ornare, nibh et suscipit semper,
                sapien lorem auctor nisl, et volutpat lacus quam sit amet mauris.</p>
        </div>
        <div class="col-md-2 col-md-offset-0 col-sm-10 col-sm-offset-2"> <!-- offset 값을 줄 때 돌아갈때 offset 값을 지정해 주어야 한다 -->
            <div class="banner">
                기타 부가적인 내용이 들어 가는 곳
            </div>
        </div>
    </div>
    <hr>
    <footer>
        여기는 푸터가 들어가는 곳입니다.
    </footer>
</div>

4. 그리드 push / pull

레이아웃의 순서를 바꿀 수 있다.

<div class="row">
  <div class="col-md-2 col-md-push-10"></div>
  <div class="col-md-10 col-md-pull-2"></div>
</div>

5. 해당 그리드 없애기

• visible-해상도 : display : block
• hidden-해상도 : display : none

<div class=row>
	<div class="col-lg-12 sm-hidden"></div>
    <div class="col-lg-12 sm-hidden"></div>
</div>

6. 타이포그래피

 

7. 코드와 테이블