Bootstrap 초기 학습 노트

그리드

가로폭을 12분할로 간단하게 요소의 폭을 지정할 수 있다
col-[画面サイズ]-[カラム数]


col-xs- 숫자
col-sm-수
col-md- 숫자
col-lg- 숫자


창 폭
~767px
~991px
~1199px
1200픽셀~



요소끼리의 틈을 여는 경우
col-[画面サイズ]-offset-[カラム数]
기입 예

<div class="row">
  <div class="col-sm-5">col-sm-5</div>
  <div class="col-sm-offset-2 col-sm-5">col-sm-5</div>
</div>

미디어 쿼리

미디어 쿼리를 사용하면 특정 표시 환경에 대해서만 CSS를 적용.
아래의 설명으로 윈도우를 크게 하거나 작게 하는 것만으로 배경의 색이 바뀐다.

기입 예

body { background-color: #000; }
/* ウインドウ幅500px以上の時に適用されるスタイル */
@media (min-width: 500px) { body { background-color: #f00; } }
/* ウインドウ幅750px以上の時に適用されるスタイル */
@media (min-width: 750px) { body { background-color: #0f0; } }
/* ウインドウ幅1000px以上の時に適用されるスタイル */
@media (min-width: 1000px) { body { background-color: #00f; } }

반응형 디자인

다양한 화면 크기에 적응하도록 배려하면서 페이지를 제작하는 방법
기본적으로 모바일용 레이아웃 우선으로 제작

Bootstrap을 작성하는 방법

테이블
<table> + class="table"<table　class="table"></table> 설명

기입 예

<table class="table">
  <tr>
    <th class="text-center">A</th>
    <th class="text-center">B</th>
    <th class="text-center">C</th>
  </tr>
  <tr>
    <td class="text-center">A-1</td>
    <td class="text-center">B-1</td>
    <td class="text-center">C-1</td>
  </tr>
  <tr>
    <td class="text-center">A-2</td>
    <td class="text-center">B-2</td>
    <td class="text-center">C-2</td>
  </tr>
  <tr>
    <td class="text-center">A-3</td>
    <td class="text-center">B-3</td>
    <td class="text-center">C-3</td>
  </tr>
</table>

【표시】


・테이블의 외형 변경
<table　class="table ※"></table> ※부분에 기입


수업
효과


table-striped
각 행마다 배경색이 번갈아 바뀝니다.

table-bordered
각 셀에 테두리가 붙습니다.

table-hover
마우스를 올리면 행이 강조 표시됩니다.

table-condensed
여백을 채우고 컴팩트하게



멋진 양식
<input> + form-control<input type="text" class="form-control"> 설명

기입 예

<form>
  氏名<input type="text" class="form-control">
</form>

【표시】


· 복수의 요소를 그릿용 클래스로 배치를 정돈하려면(그릿에 대해서는 상기 참조)
<form> + form-horizontal<form class="form-horizontal"></form> 으로 둘러싸다

액세서리를 부착하는 방법

부모 요소 <div class="input-group"></div>로 둘러싸여 <span class="input-group-addon"></span>
기입 예

<form>
  郵便番号
  <div class="input-group">
    <span class="input-group-addon">〒</span>
    <input type="text" class="form-control" placeholder="000-0000">
  </div>
</form>

【표시】


Bootstrap 스타일의 외형 버튼
<button class="btn btn-default" type="submit"></button> 설명

기입 예

<button class="btn btn-default" type="submit">buttonボタン</button>

【표시】


・ <button class="btn ※" type="submit"></button> ※에 다른 기술을 넣으면 버튼의 외형 변경 가능
btn btn-default　（白）, btn btn-primary （青）, btn btn-success （緑）, btn btn-info （水色）, btn btn-warning （橙）, btn btn-danger （赤）
아이콘 사용

클래스 지정 例　<span class="※"></span>※에 링크처의 아이콘 한에 있는 이름을 코피페로 OK
htps : // 게이 t보오 tst et al p. 코 m / 두 cs / 3.3 / 코 m 포넨 ts / # glyp 히콘 s

기입 예

<button type="button" class="btn btn-default">
  <span class="glyphicon glyphicon-off"></span>
  起動
</button>

【표시】


드롭다운

기입 예

<div class="dropdown">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    select<span class="caret"></span>
  </button>

  <ul class="dropdown-menu">
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">C</a></li>
  </ul>
</div>

【표시】


탭

기입 예

<ul class="nav nav-tabs">
  <li class="active"><a href="#">A</a></li>
  <li><a href="#">B</a></li>
  <li><a href="#">C</a></li>
</ul>

【표시】


네비게이션 바

사이트 상단에 붙는 메뉴. 길기 때문에 커리큘럼 참조

라벨

텍스트 장식

기입 예

<span class="label label-default">A</span>
<span class="label label-primary">B</span>
<span class="label label-success">C</span>
<span class="label label-info">D</span>
<span class="label label-warning">E</span>
<span class="label label-danger">F</span>

【표시】


배지

새 도착 통지의 건수 등을 표시

기입 예

<button class="btn btn-success" type="button">
  新着情報 <span class="badge">2</span>
</button>

【표시】


경고

기입 예

<div class="alert alert-success" role="alert">新着情報があります</div>

【표시】


패널

정보 그룹화

기입 예

<div class="panel panel-info">
  <div class="panel-heading">
    <h3 class="panel-title">新着情報</h3>
  </div>
  <div class="panel-body">
    <ul class="list-unstyled">
      <li><a href="#">A</a></li>
      <li><a href="#">B</a></li>
      <li><a href="#">C</a></li>
    </ul>
  </div>
</div>

【표시】

기타

스크롤 스파이

콘텐츠의 스크롤에 맞추어 내비게이션 메뉴의 하이라이트를 변경해 주는 기능
길기 때문에 커리큘럼 참조

이미지를 쉽게 맞추기 위해 가공 가능

기능 목록

Bootstrap은 사용자 정의 가능
htps : // 게이 t보오 tst et al p. 코 m / 두 cs / 3.4 / 쿠 s와 미제 /