Bootstrap) 자주 쓰는 컴포넌트(button, jumbotron, form, container, nav)

*                    *                    *                    *                    *

전체 참고 사이트 : https://getbootstrap.com/docs/3.3/css/

위 사이트를 참고하면 템플릿 사용 여부를 떠나 수정도 용이하고

백지에서 시작할 때에도 필요한 부분만 차용하는 것이 쉽다

*                    *                    *                    *                    *

Button>

CSS 중심으로 커스터마이징 할 것이 있으면 보고 찾아서 변경한다

https://getbootstrap.com/docs/3.3/css/#buttons

http://getbootstrap.com/docs/4.1/components/buttons/

Jumbotron>

A lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site.

cf. 원래 Jumbotron은 width를 모두 쓰는 것이었는데 처음에 컨테이너에 넣어서 쓰는 것으로 배우다보니 Jumbotron이 원래 좌우 패딩이 들어가 있는 것인줄 알았음

https://getbootstrap.com/docs/3.3/components/#jumbotron

form>

.form-group) form-group for optimum spacing.

.form-control) form-control are set to width: 100%

.form-inline) 한 줄로 길게 늘어진 form으로 상단 nav에서 로그인시 사용하기 적절

https://getbootstrap.com/docs/3.3/css/#forms

.Container>

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

그리드 시스템은 반드시 컨테이너 내부에서만 작동하는지 나중에 테스트 후 다시 정리

글로만 봐서는 그리드 시스템은 반드시 컨테이너 내부에서 작동하는 것으로 보인다

컨테이너는 그리드 시스템과는 별개로 페이지 전체에 적절한 여백과 패딩을 주고 싶을 때에 사용하면 편할 것 같다

nav>

https://getbootstrap.com/docs/3.3/components/#nav

ex) default nav 

<nav class="navbar navbar-default navbar-fixed-top">

    <div class="container">

        <div class="navbar-header">

            <!-- 사이즈 축소시 햄버거가 속할 태그 내부에 아래 코드 생성 -->

            <!-- data-target을 'collapse navbar-collapse' 클래스의 id로 맞춰야 -->

            <!-- 숨긴 데이터들이 햄버거 안으로 들어가게 된다 -->

            <button type="button" class="navbar-toggle collapsed"

            data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false">

                <!-- 햄버거 내부에 들어갈 줄들 -->

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a href="#" class="navbar-brand">Koffee</a>

        </div>

        <div class="collapse navbar-collapse" id="bs-nav-demo">

           

 <ul class="nav navbar-nav">

                <li><a href="#">About</a></li>

                <li><a href="#">Contact</a></li>

                <li class="dropdown">

         <a href="#" class="dropdown-toggle" data-toggle="dropdown"

                    role="button" aria-haspopup="true" aria-expanded="false">Dropdown

                    <span class="caret"></span></a>

         <ul class="dropdown-menu">

            <li><a href="#">Action</a></li>

            <li><a href="#">Another action</a></li>

            <li><a href="#">Something else here</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">Separated link</a></li>

            <li role="separator" class="divider"></li>

            <li><a href="#">One more separated link</a></li>

         </ul>

         </li>

            </ul>

        <form class="navbar-form navbar-left" role="search">

        <div class="form-group">

         <input type="text" class="form-control" placeholder="Search">

        </div>

        <button type="submit" class="btn btn-default">Submit</button>

     </form>

            <ul class="nav navbar-nav navbar-right">

                <li><a href="#">Sign Up</a></li>

                <li><a href="#">Login</a></li>

            </ul>

        </div> <!-- collapse navbar-collapse (햄버거 감싸는 div 태그) -->

    </div> <!-- container -->

</nav>

※ nav bar가 스크롤이 내려가도 항상 top에 위치하도록 하고 싶다면

클래스에서 "navbar-fixed-top"를 씌워주면 된다

You're not becoming an expert in memorization and in knowing every bit of information.

Yes you have to understand and memorize somethings but you're not becoming an expert or memorization.

(강의때 나온 말인데 좀 와닿았다. 숙지하고 방향키로 삼아야 할 말인 것 같다)