CSS Bootstrap 부트스트랩

Bootstrap

• Bootstrap.css를 불러오고 해당 파일에 정의된 버튼, 레이아웃 등을 가져와서 사용

• 클래스로 간단하게 불러와서 사용

• 트위터에서 개발

• bootstrapk.com

• Bootstrap cdn 검색해서 부트스트랩 주소 복사 후 사용함<link rel="stylesheet" href="부트스트랩 주소">

• 아직 플러그인들이 3에 있는 경우가 많음

레이아웃

• 레이아웃은 한줄에 12개가 있다고 생각 해야 함

• class="col-sm-3"의 형태로 사용함

• 768px보다 클 때: col-sm-

• 970px보다 클 때: col-md-

• 1170px보다 클 때: col-lg-

• 768px보다 작을 때: col-xs-

콤포넌트-버튼

• bootstrapk.com에서 양식 찾아와서 사용하기

• btn-default

• btn-primary

• btn-danger 등

• 콤포넌트-테이블

• 콤포넌트-패널

• 로그인 패널 만들 때 사용함

• 콤포넌트-폼

• input 쓸 때 많이 씀

• 콤포넌트-네비게이션

• 상단바 만들 때 사용

• 부트스트랩용 js 파일은 jquery를 필요로 함

• jquery cdn 검색해서 3버전 코드 복붙 먼저 넣고

• 부트스트랩 js버전 <script src="부트스트랩 js버전">

• 콤포넌트-페이지네이션

• 게시판 아래에 숫자 표시

font awesome

• font awesome 4 cdn 검색해서 코드 복붙

• 아이콘이 필요할 경우 font awesome에서 따오기

• siummernote==위지윅에디터

• bootstrap templete

• sbadmin 관리자 템플릿