Bootstrap 라이브러리

2015. 9. 7. 14:27Programming/CodeIgniter

반응형

* 설치

 1. Bootstrap 다운로드

 2. 보통 css, js, img 폴더는 static/에 생성하며, bootstrap 라이브러리 동일 폴더에 lib라는 폴더를 생성하여, 관리함

     - static/lib/bootstrap

 3. 해당 사이트에 들어가서 다운로드 후 위 경로에 업로드/압축을 풀어준다.

 4. 설치 완료


* bootstrap include

<!DOCTYPE html>

<html>

  <head>

    <title>Bootstrap 101 Template</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">  //모바일을 지원

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">  //bootstrap css include

  </head>

  <body>

    <h1>Hello, world!</h1>

    <script src="http://code.jquery.com/jquery.js"></script>  //jquery include

    <script src="js/bootstrap.min.js"></script>  //bootstrap script include

  </body>

</html>


* 사용.

 1. scaffolding : 전체적인 layout을 설정(http://getbootstrap.com/2.3.2/scaffolding.html#layouts)

<div class="container-fluid">

  <div class="row-fluid">

    <div class="span2">

      <!--Sidebar content-->

    </div>

    <div class="span10">

      <!--Body content-->

    </div>

  </div>

</div> 

 

 2. Responsive design(http://getbootstrap.com/2.3.2/scaffolding.html#responsive)

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

<link href="assets/css/bootstrap-responsive.css" rel="stylesheet"> 

  - head 에 위 부분을 추가적으로 선언해야 함.

  - viewport는 bootstrap 사용을 위해 선언해 주었기 때문에 다시 해줄 필요는 없음.

  - 반응형 디자인 : 창의 크기가 작아졌을 경우 스스로 창에 크기에 따라 전체적인 구도가 변화하는 것.

  - 모바일 기기에서 볼 때 많이 유용할 수 있음.


 3. component(메뉴)

  (1) navbar(상단메뉴) - http://getbootstrap.com/2.3.2/components.html#navbar

 - Responsive navbar sample

<div class="navbar nav-bar-fixed-top">

  <div class="navbar-inner">

    <div class="container">

 

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->

      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">

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

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

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

      </a>

 

      <!-- Be sure to leave the brand out there if you want it shown -->

      <a class="brand" href="#">Project name</a>

 

      <!-- Everything you want hidden at 940px or less, place within here -->

      <div class="nav-collapse collapse">

        <!-- .nav, .navbar-search, .navbar-form, etc -->

      </div>

 

    </div>

  </div>

</div>


 - Fixed to Top

<div class="navbar navbar-fixed-top">

  ...

</div>


 - views/head.php

<head>

    <title>Bootstrap 101 Template</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">  //모바일을 지원

    <!-- Bootstrap -->

    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">  //bootstrap css include

    <style>body{padding-top:60px;}</style>

    <link href="assets/css/bootstrap-responsive.css" rel="stylesheet">

</head> 

  - Responsive navbar sample를 보면 navbar-fixed-top 클래스를 추가해 주면서 body안에 값들이

    메뉴바들에 의해 가려지게 되어 head에 bootstrap.min.css와 bootstrap-responsive.css 선언 사이에 style 

    body{padding-top:60px;}이라고 선언하여 구도를 맞춰주었음.


  (2) navs(사이드메뉴) - http://getbootstrap.com/2.3.2/components.html#navs

 -Stacked tabs sample

<ul class="nav nav-tabs nav-stacked">  //해당 클래스를 복사하여 원하는 곳에 copy 한다.

  ...

</ul> 

  -views/topic_list.php

<div class="span2">  //scaffolding 을 참조하여 적용한 Sidebar content

    <ul class="nav nav-tabs nav-stacked">  //copy

        <?

            foreach($topics as $entry) {

        ?>

            <li><a href="index.php/topic/get/<?=$entry->id?>"><?=$entry->id?></a></li>

        <?

            }

        ?>

    </ul>

</div>

 

 4. bootstrap 사이트 활용

  - 각 기능 들에 대한 샘플 소스들이 나와 있으며, 이것에 대한 클래스등을 잘 활용하여 UI에 변화를 줄 수 있음.

  - 원하는 class 및 소스를 가져와서 태그에 넣어주면 됨.

  - optional display variantions 를 보면 옵션으로 설정할 수 있는 클래스들이 나왔음.

반응형