2015. 9. 7. 14:27ㆍProgramming/CodeIgniter
* 설치
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 를 보면 옵션으로 설정할 수 있는 클래스들이 나왔음.
'Programming > CodeIgniter' 카테고리의 다른 글
| helper (0) | 2015.09.07 |
|---|---|
| URI Routing (0) | 2015.09.07 |
| Model(4/5) - 각 리스트 정보 페이지마다 전체리스트 생성 구현 (0) | 2015.09.07 |
| Model(3/5) - 소스 중복제거 (0) | 2015.09.07 |
| Model(2/5) - 리스트와 각 리스트 정보 구현 (0) | 2015.09.04 |