부트스트랩 (4) margin, padding, flex

Frameworks/Bootstrap 2019. 7. 3. 16:02

728x90

오늘은 이어서 부트스트랩에서 마진 클래스, 패딩클래스 그리고 디스플레이 플렉스에 대해 정리합니다.

margin, padding 마진과 패딩

m - (0 ~ 5) : 마진 클래스로 (...ml , mt , mb, mr)

 <div class="container">
      <div class="bg-danger m-5">한개의 div 입니다.</div>
      <div class="bg-info m-4">한개의 div 입니다.</div>
      <div class="bg-warning m-3">한개의 div 입니다.</div>
      <div class="bg-success m-2">한개의 div 입니다.</div>
      <div class="bg-primary m-1">한개의 div 입니다.</div>
</div>

p - (0 ~ 5) : 패딩 클래스 (...pl , pt , pb, pr)
w (width) - px , mx - auto

Flex

flex 시작 : .d-flex

수평정렬

.justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around

수직 정렬

.align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch

아이템 각각의 (세로) 수직 정렬 방법
- 아이템 개별 정렬은 수직 정렬만 있고 수평정렬은 없다.

.align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch

.border : 부트스트랩으로 보더박스를 표시.
.wrap : 아이템이 화면끝으로 올 때 줄바꿈
.nowrap : 줄안바꿈

실습하기

.d-flex.flex-nowrap>(.p-2.border.bg-success{Item $})*9 //한번에 여러 아이템을 적을 수 있다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>부트스트랩 flex</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        .flex-height {
            height: 40vh; /* 뷰포트높이 % vw(가로) */
        }
    </style>
</head>

<body>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

    <!-- flex -->
    <div class="d-flex p-3 bg-secondary text-white justify-content-end">
        <div class="p-2 bg-info">flex item 1</div>
        <div class="p-2 bg-warning">flex item 2</div>
        <div class="p-2 bg-primary">flex item 3</div>
        <!-- content-end/center/start(안적었을때 기본) -->
    </div>

    <div class="flex-height d-flex p-3 bg-secondary text-white">
        <div class="p-2 bg-info align-self-start">flex item</div>
        <div class="p-2 bg-warning">flex item</div>
        <div class="p-2 bg-primary align-self-end">flex item</div>
    </div>

    <div class="container mt-3">
        <h2>Flex</h2>
        <div class="d-flex p-3 bg-success text-white">
            <div class="p-2">Home</div>
            <div class="p-2">Search</div>
            <div class="p-2 border ml-auto">Logout</div>
            <!-- 수직 제외하고는 같이 묶어서만 바뀌는 상위태그임-->
        </div>
    </div>

    <!-- wrap -->
    <div class="container mt-3"> 
        <h2>Wrap</h2> 
        <p><code>.flex-wrap:</code></p> 
        <!-- wrap : 아이템이 화면끝으로 올 때 줄바꿈 -->
        <div class="d-flex flex-wrap text-white bg-light"> 
            <div class="p-2 border bg-success">Item 1</div> 
            <div class="p-2 border bg-success">Item 2</div> 
            <div class="p-2 border bg-success">Item 3</div> 
            <div class="p-2 border bg-success">Item 4</div> 
            <div class="p-2 border bg-success">Item 5</div> 
            <div class="p-2 border bg-success">Item 6</div> 
            <div class="p-2 border bg-success">Item 7</div> 
            <div class="p-2 border bg-success">Item 8</div> 
            <div class="p-2 border bg-success">Item 9</div> 
        </div> 
        <br> 
        <p><code>.flex-wrap-reverse:</code></p> 
        <!-- nowrap : 줄안바꿈 -->
        <div class="d-flex flex-nowrap text-white bg-light">
            <div class="p-2 border bg-success">Item 1</div> 
            <div class="p-2 border bg-success">Item 2</div> 
            <div class="p-2 border bg-success">Item 3</div> 
            <div class="p-2 border bg-success">Item 4</div> 
            <div class="p-2 border bg-success">Item 5</div> 
            <div class="p-2 border bg-success">Item 6</div> 
            <div class="p-2 border bg-success">Item 7</div> 
            <div class="p-2 border bg-success">Item 8</div> 
            <div class="p-2 border bg-success">Item 9</div> 
        </div> 
     </div>

</body>

</html>

728x90

저작자표시 비영리 변경금지

'Frameworks > Bootstrap' 카테고리의 다른 글

부트스트랩 (6) 점보트론과 버튼 스타일 (0)	2019.07.05
부트스트랩 (5) 테이블 (0)	2019.07.05
부트스트랩 (3) 반응형 그리드 (0)	2019.07.03
부트스트랩 (2) 텍스트 서식(Typography)과 색(Colors) (0)	2019.07.03
부트스트랩 (1) 유래와 정의, 설치하기 (0)	2019.07.03

coding-restaurant

코딩 맛집에 방문해주셔서 감사합니다.