[JavaScript] Responsive Design With Bootstrap

Use Responsive Design With Bootstrap Fluid Containers

popular Bootstrap responsive CSS framework

bootstrap은 스크린 사이즈에 따라 html element의 사이즈를 resizing해주는 responsive design이라고 불리운다. 

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>

<div class=container-fluid>

<elements ...>

</div>

Make Image Mobile Responsive

<img class="img-responsive" src="https://bit.ly/fcc-running-cats">

img-responsive의 class를 갖고 있어야 한다. 폰 사이즈에 이미지를 조정하기 위해 사용한다.

Center text with Bootstrap

만약 h2 element의 텍스트를 text-center의 class를 사용한다면 가능하다. 

Create Bootstrap Button

기존 HTML에서 제공하는 이미지보다는 좀더 세련된 모양으로 제공한다.

<button class=btn>Like</button>

Create Block Element Bootstrap Button

<button class="btn btn-block">Submit</button> 을 사용하면 스크린 사이즈 전체 horizontal space의 width를 사용할 수 있다. (한줄 모두 사용)

색을 입히는 기본 값 들을 설정 (primary, info, danger)

Taste the Bootstrap Button Color Rainbow

btn-primary는 highlighting을 사용할때 유용하다.  사용자가 버튼위에 버튼을 올렸을때 색을 변경시켜주는 작업을 자동으로 해준다. 

<button class="btn btn-block btn-primary">Like</button>

   

Call out Optional Actions with Button Info

btn-info는 사용자가 정보를 

<button class="btn btn-block btn-info">Info</button>

Warn your Users of a Dangerous Action

btn-danger는 사용자에게 빨간색으로 표시함으로써 경고를 준다.

<button class="btn btn-block btn-danger">Delete</button>

Use the Bootstrap Grid to Put Elements Side By Side

Bootstrap에는 responsive grid system을 사용할 수 있다. 

col-md-* class를 사용하면 생성이 가능한데 여기서 md는 medium을 의미하고 *는 얼마나 많은 column을 만들것인가에 대한 정보이다. 

col-xs-*는 extra small을 말한다. 

   <div class="col-xs-4">

      <button class="btn btn-block btn-primary">Like</button>

    </div>

    <div class="col-xs-4">

      <button class="btn btn-block btn-info">Info</button>

    </div>

    <div class="col-xs-4">

      <button class="btn btn-block btn-danger">Delete</button>

    </div>

  </div>

  <p>Things 

Use Spans for Inline Elements

inline button element와 block-level button element와의 차이점

block은 스크린 사이즈의 최대 width를 차지한다. 

span element를 사용하면 여러개의 elements를 한줄에 함께 사용이 가능하다. 

<p>Top 3 things cats <span class = "text-danger">hate:</span></p> 

Create a Custom Heading

title과 image를 함께 넣으려면 어떻게 할까. div class를 사용해서 한줄에 넣을 수 있다.

 <div class="row">

    <div class="col-xs-8">

      <h2 class="text-primary text-center">CatPhotoApp</h2>

    </div>

    <div class="col-xs-4">

      <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat"></a>

    </div>

  </div>

Add Font Awesome Icons to our Buttons

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

i element는 italic 체로 글씨 스타일을 변경할때 사용한다. 하지만 지금은 icons를 위해 사용된다. 

<i class="fa fa-info-circle"></i>

<i class="fa fa-thumbs-up"></i>

<button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i>Like</button>

 

Add Font Awesome Icons to all of our Buttons

<div class="row">

    <div class="col-xs-4">

      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>

    </div>

    <div class="col-xs-4">

      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>

    </div>

    <div class="col-xs-4">

      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i>Delete</button>

    </div>

</div>

Responsively Style Radio Buttons, Checkboxes

한줄에 여러개의 라디오 버튼, 체크박스를 생성하기 위해서는 div, row, col-xs-*를 사용하면 된다. 

<div class="row">

   <div class="col-xs-6">

        <label><input type="radio" name="indoor-outdoor"> Indoor</label>

      </div>

      <div class="col-xs-6">

        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>

      </div>

    </div>

    <div class="row">

      <div class="col-xs-4">

        <label><input type="checkbox" name="personality"> Loving</label>

      </div>

      <div class="col-xs-4">

        <label><input type="checkbox" name="personality"> Lazy</label>

      </div>

      <div class="col-xs-4">

        <label><input type="checkbox" name="personality"> Crazy</label>

      </div>

  </div>

Style Text Inputs as Form Controls

<form>

    <input type="text" class="form-control" placeholder="cat photo URL" required>

    <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>

</form>

Line up Form Elements Responsively with Bootstrap

그렇다면 이제 elements을 line up해주기 위해서는 다시한번 div, row, col-xs-*을 사용해서 구성해주면 된다. 

Create a Bootstrap Headline

well은 columns의 visual sense of depth 를 만들때 사용한다.

row만들고 --> column나누고 --> well 만들고 --> well 내부에 button을 생성하고 --> button에 btn btn-default 클래스 입히고 --> jQuery Selectors를 위해서 target을 주고 --> id attributes를 추가하고 --> text 추가하고 --> comments 하면 끝

jQuery Selectors를 사용하기 위해서create a class to target with jQuery Selectors

<!--Only change code above this line.-->

<div class="container-fluid">

  <h3 class="text-primary text-center">jQuery Playground</h3>

  <div class="row">

    <div class="col-xs-6">

      <h4>#left-well</h4>

      <div class="well" id="left-well">

        <button class="btn btn-default target" id="target1">#target1</button>

        <button class="btn btn-default target" id="target2">#target2</button>

        <button class="btn btn-default target" id="target3">#target3</button>

      </div>

    </div>

    <div class="col-xs-6">

      <h4>#right-well</h4>

      <div class="well" id="right-well">

        <button class="btn btn-default target" id="target4">#target4</button>

        <button class="btn btn-default target" id="target5">#target5</button>

        <button class="btn btn-default target" id="target6">#target6</button>

      </div>

    </div>

  </div>

</div>