grunt와 less Sass를 활용한 부트스트랩의 사용과 예제 등은 다음 예제사이트 진행시에 정리할 계획입니다.(아직미정-협의필요)
-
Bootstrap 시작하기(세팅)
- 시작하기 bootstrap-start
- 다운로드 start-download
- 살펴보기 start-whats-included
- 그런트 start-grunt
- 기본 템플릿 start-template
- 예제 start-example
- 반응성 끄기 start-disable-responsive
- 서드파티 지원 start-third-parties
- 접근성 start-accessibility
-
Bootstrap CSS
- 개요 css-overview
- 그리드 시스템 css-grid
- 타이포그래피 css-container
- 코드 css-code
- 테이블 css-table
- 폼 css-form
- 버튼 css-button
- 이미지 css-images
- 도움 클래스 css-helper-classes
- 반응형 유틸리티 css-responsive-utilities
- Less 사용하기 css-less
- Sass 사용하기 css-sass
-
Bootstrap component
- 아이콘 Glyphicons
- 드롭다운 Dropdowns
- 버튼 그룹 Button groups
- 버튼 드롭다운 Button dropdowns
- 입력 그룹 Input groups
- 네비게이션 Navs
- 네비게이션 바 Navbar
- 사이트 이동경로 Breadcrumbs
- 페이지네이션 Pagination
- 라벨 Labels
- 배지 Badges
- 점보트론 Jumbotron
- 페이지 제목 Page header
- 썸네일 Thumbnails
- 경보 Alerts
- 프로그래스바 Progress bars
- 미디어 객체 Media object
- 목록 그룹 List group
- 패널 Panels
- 반응성 임베드 Responsive embed
- 웰 Wells
-
Bootstrap Javascript
- bootstrap-start
- css-container
- css-grid
- component-list-group
- component-panelmark
- javascript-collapse
- javascript-modal
- 아래 코드에 자바스크립트 예제 코드를 넣으면 확인이 가능합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bootstrap example</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</head>
<body>
<!-- 여기 예제를 추가하세요. -->
</body>
</html>