TIL 06 | Bootstrap

meow·2020년 7월 16일

HTML/CSS

목록 보기

6/12

Bootstrap을 적용하는 방법에는 두가지가 있다.
1. html과 같은 폴더에 bootstrap.css 를 넣고 link를 걸기
2. 외부링크를 가져와서 삽입하기

<!--그 외부링크-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

유용한 코드

<div class="container">

전체 레이아웃을 잡아준다.

<div class="form-group">

요소간 간격을 적절하게 잡아준다.

<form class="form-inline">

요소가 같은 줄에 올 수 있도록 해준다.

button, form 등을 부트스트랩 홈페이지에서 찾아 복사, 붙여넣기하면 잘 정돈된 ui를 적용할 수 있게 된다.

네비게이션 예시

<nav class="navbar navbar-default”> (nav 가 들어가는 컨테이너)
    <div class="container">
        <div class="navbar-header”> <!--보통 브랜드 로고-->
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav-demo" aria-expanded="false”> <!--모바일 화면에서 햄버거 안에 들어가는 요소들-->
                <span class="sr-only">Toggle navigation</span>
                <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>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Sign up</a></li>
                <li><a href="#">Log-in</a></li>
            </ul>
        </div>
    </div>
</nav>

부트스트랩 모션

bootstrap의 인터렉티브 모션(toggle이 나오거나 drop-down이 되는 등)을 가능하게 하기 위해서는 <body> 가장 하단에 아래 코드를 붙여넣기 해야한다.

<script src="http://code.jquery.com/jquery-3.5.1.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Grid System

전체 그리드는 항상 12이다. 이를 col-XX-X 로 클래스를 부여하여 나누어 그리드를 짠다.

<div class="container">
    <div class="row">
        <div class="col-md-2 pink">COL LG 2</div>
        <div class="col-md-8 pink">COL LG 8</div>
        <div class="col-md-2 pink">COL LG 2</div>
    </div>
    <div class="row">
        <div class="col-md-4 pink">COL MD 4</div>
        <div class="col-md-4 pink">COL MD 4</div>
        <div class="col-md-4 pink">COL MD 4</div>
    </div>
</div>

그리드 안에 그리드를 만들 수 있으며 (nested grid)
화면의 사이즈에서 각각 어떻게 그리드가 나타나게 할지도 선택할 수 있다. (lg, md, sm, xs)

<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-6 pink">
        <div class="row">
            <div class="col-lg-6 orange">First Half</div>
            <div class="col-lg-6 orange">Second Half</div>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 pink">Tour Date!</div>
    <div class="col-lg-3 col-md-3 col-sm-6 pink">Tour Date!</div>
    <div class="col-lg-3 col-md-3 col-sm-6 pink">
        <div class="row">
            <div class="col-lg-2 orange">hey</div>
            <div class="col-lg-2 orange">hey</div>
            <div class="col-lg-2 orange">hey</div>
            <div class="col-lg-2 orange">hey</div>
            <div class="col-lg-2 orange">hey</div>
            <div class="col-lg-2 orange">hey</div>
        </div>
    </div>
</div>

부트스트랩 반응형 웹 (모바일)

부트스트랩으로 스타일링된 웹사이트가 모바일에서도 반응형으로 작동하길 바란다면 아래의 메타 태그를 <head> 엘리먼트, <title> 태그 위에 더하면 된다.

<meta name="viewport" content="width=device-width, initial-scale=1”>

meow

🌙｀、、｀ヽ｀ヽ｀、、ヽヽ、｀、ヽ｀ヽ｀ヽヽ｀ヽ｀、｀ヽ｀、ヽ｀｀、ヽ｀ヽ｀、ヽヽ｀ヽ、ヽ｀ヽ、ヽヽ｀ヽ｀、｀｀ヽ｀ヽ、ヽ、ヽ｀ヽ｀ヽ、ヽ｀ヽ｀ヽ、ヽ、ヽ｀ヽ｀ヽ、ヽ、ヽ、ヽ｀｀、ヽ｀、ヽヽ 🚶‍♀ ヽ｀｀ヽ｀｀、ヽ｀、