레이아웃

부트스트랩은 Fixed 레이아웃과 Fluid 레이아웃을 모두 지원합니다. Fixed 레이아웃은 고정된 너비를 사용하는 레이아웃입니다. 반면에 Fluid 레이아웃은 특정 화면 크기에 따라 레이아웃 전체 크기가 변화합니다.

<!--fixed 레이아웃-->
<div class="container"></div>
<!--fluid 레이아웃-->
<div class="container-fluid"></div>

툴바

툴바는 웹 페이지 상단에 위치하는 구성 요소입니다.
툴바로 레이아웃처럼 일반 일반형 툴바와 고정형 툴바 2가지 형태가 있습니다.

부트스트랩에서 일반형 툴바를 만들때는 아래의 코드처럼 navbar 클래스를 가진 div 태그를 입력합니다.

     <div class="navbar navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">bootstrap</a>
        </div>
    </div>

고정형 툴바를 생성할때는 아래의 코드처럼 입력합니다.

<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">bootstrap</a>
        </div>
    </div>
<!--
fixed-top: 고정형 툴바로 만듭니다.
navbar-expand-lg: 화면 크기에 따라 형태가 변하는 반응형 툴바로 만듭니다.
-->

🤔그런데 일반 데스크톱 웹 브라우저 화면에서 내용의 일부분이 툴바에 가려집니다. 이는 툴바의 position 속성에 fixed 키워드가 적용되어 나타나는 현상입니다. 따라서 body 태그에 padding-top 속성을 사용해 내용이 특정 크기만큼 상단에서 떨어지게 만듭니다.

툴바 버튼

<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">bootstrap</a>
            <button class="navbar-toggler" type="button"
                data-toggle="collapse" data-target="#navbar-content">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="#navbar-content">
                
            </div>
        </div>
    </div>
<!-- 
data-taret="#navbar-content">
id="navbar-content">
버튼으로 열고 닫을 대상을 지정합니다.
-->

 <div class="navbar navbar-dark bg-dark fixed-top navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">bootstrap</a>
            <button class="navbar-toggler" type="button"
                data-toggle="collapse" data-target="#navbar-content">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbar-content">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item"><a class="nav-link" href="#">HTML5</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">CSS3</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">ECMAScript</a></li>
                </ul>
                <ul class=" navbar-nav">
                    <li class="nav-item"><a class="nav-link" href="#">node.js</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">API</a></li>
                </ul>
            </div>
        </div>
    </div>

또한 버튼에 dropdown 클래스를 사용하고 내부 요소를 입력해봅시다.

   <div class="navbar navbar-dark bg-dark fixed-top navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">bootstrap</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbar-content">
                <ul class="navbar-nav mr-auto">
                    <!--드롭 다운 아이템을 만듭니다.-->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">HTML5</a>
                        <!--드롭다운 대상입니다.-->
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">geolocation</a>
                            <a class="dropdown-item" href="#">drag and drop</a>
                            <div class="dropdown-divider" ></div>
                            <a class="dropdown-item" href="#">motion</a>
                        </div>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="#">CSS3</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">ECMAScript</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li class="nav-item"><a class="nav-link" href="#">node.js</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">API</a></li>
                </ul>
            </div>
        </div>
    </div>

마지막으로 아래코드 처럼 툴바 안에 form 태그를 넣을 수도 있습니다.

  <div class="navbar navbar-dark bg-dark fixed-top navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">bootstrap</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbar-content">
                <ul class="navbar-nav mr-auto">
                    <!--드롭 다운 아이템을 만듭니다.-->
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">HTML5</a>
                        <!--드롭다운 대상입니다.-->
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">geolocation</a>
                            <a class="dropdown-item" href="#">drag and drop</a>
                            <div class="dropdown-divider" ></div>
                            <a class="dropdown-item" href="#">motion</a>
                        </div>
                    </li>
                    <li class="nav-item"><a class="nav-link" href="#">CSS3</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">ECMAScript</a></li>
                </ul>
                <!--입력 양식을 넣습니다.-->
                <form class="form-inline">
                    <input type="text" class="form-control" placeholder="Search" />
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li class="nav-item"><a class="nav-link" href="#">node.js</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">API</a></li>
                </ul>
            </div>
        </div>
    </div>

그리드 시스템

웹 페이지 전체 영역의 레이아웃을 만들었던 것처럼 내용 부분도 별도의 레이아웃을 만들어여 합니다. 부트스트랩은 내용 부분의 레이아웃을 만들때 가장 현대적인 방법인 그리드 시스템을 사용합니다.

❗️한 row 클래스가 12줄의 열을 가지므로 내부에 합이 12가 되게 입력합니다.

   <div class="container">
        <div class="row">
            <div class="col-md-3">
                <h1>Lorem ipsum</h1>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus quo similique, impedit dignissimos porro eum numquam dolores corporis fugiat consequatur iusto eos velit quidem voluptatibus? Quam, illum aliquid! Quo, exercitationem!</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptates nobis similique, qui voluptate dicta accusamus quae, quasi ut ipsum aspernatur hic ex soluta corrupti possimus! Nesciunt corporis dolores possimus harum!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam dolor consequatur, quos nemo laudantium reprehenderit fugit doloribus fuga veniam dolorum repellendus adipisci tenetur incidunt soluta. Odio fuga inventore eligendi esse.</p>
            </div>
            <div class="col-md-9">
                <h1>lorem ipsum</h1>
                <p>Lorem ipsum dolorit amet consectetur, adipisicing elit. Repellat iusto officia similique fugiat, odit placeat praesentium et obcaecati illo minima commodi quaerat odio beatae earum amet molestias provident quisquam libero!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat iusto officia similique fugiat, odit placeat praesentium et obcaecati illo minima commodi quaerat odio beatae earum amet molestias provident quisquam libero!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat iusto officia similique fugiat, odit placeat praesentium et obcaecati illo minima commodi quaerat odio beatae earum amet molestias provident quisquam libero!</p>
            </div>
        </div>
    </div>

수직목록

  <div class="container">
        <div class="row">
            <div class="col-md-3">
                <!--수직 목록-->
                <ul class="list-group">
                    <li class="list-group-item"><a href="#">HTML5</a></li>
                    <li class="list-group-item"><a href="#">CSS3</a></li>
                    <li class="list-group-item"><a href="#">ECMAScript5</a></li>
                </ul>
                <br />
                <ul class="list-group">
                    <li class="list-group-item"><a href="#">jquery</a></li>
                    <li class="list-group-item"><a href="#">HTML5 API</a></li>
                </ul>
                <br />
                <ul class="list-group">
                    <li class="list-group-item"><a href="#">About</a></li>
                    <li class="list-group-item"><a href="#">help</a></li>
                </ul>
                <br />
            </div>
            <div class="col-md-9">
                <h1>lorem ipsum</h1>
                <p>Lorem ipsum dolorit amet consectetur, adipisicing elit. Repellat iusto officia similique fugiat, odit placeat praesentium et obcaecati illo minima commodi quaerat odio beatae earum amet molestias provident quisquam libero!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat iusto officia similique fugiat, odit placeat praesentium et obcaecati illo minima commodi quaerat odio beatae earum amet molestias provident quisquam libero!</p>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat iusto officia similique fugiat, odit placeat praesentium et obcaecati illo minima commodi quaerat odio beatae earum amet molestias provident quisquam libero!</p>
            </div>
        </div>
    </div>

이어서 목록 요소들에 제목을 달고 싶을 때는 card클래스를 사용합니다. card클래스를 사용하면 bg-primary, bg-secondary, panel-info, panel-warning 클래스 등을 활용해 색상을 적용할 수 있습니다.

 <div class="container">
        <div class="row">
            <!--수직 목록-->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header">panel title</div>
                       <!--flush는 리스트 윗부분의 둥근 모서리를 각지게 만급니다.-->
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item"><a href="#">HTML5</a></li>
                        <li class="list-group-item"><a href="#">CSS3</a></li>
                        <li class="list-group-item"><a href="#">ECMAScript5</a></li>
                    </ul>
                </div>
                <br />
                <div class="card bg-info">
                    <div class="card-header">panel title</div> 
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item"><a href="#">jquery</a></li>
                        <li class="list-group-item"><a href="#">HTML5 API</a></li>
                    </ul>
                </div>
                <br />
                <div class="card bg-secondary">
                    <div class="card-header">panel title</div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item"><a href="#">About</a></li>
                        <li class="list-group-item"><a href="#">help</a></li>
                    </ul>
                </div>
                <br />
            </div>