Embed Size (px)
Citation preview
Intelligent Software Lab.
Bootstrap
Intelligent Software Lab.
Bootstrap
• HTML5, CSS3 UI 프레임 워크
• CSS3, Javascript
• 트위터에 근무하는 두 명의 엔지니어가 개발
• Mark Otto
• Jacob Thornton
• 트위터 홈페이지와 비슷한 디자인을 빠르게 구현해낼
수 있음
• http://getbootstrap.com/
3
Intelligent Software Lab. 4
Intelligent Software Lab.
Bootstrap 기본 파일구조
5
Intelligent Software Lab.
Bootstrap 사용
• <head>…</head> 내에 다음을 추가• <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"> 포함
• <body>…</body> 내의 마지막 부분에 다음을 추가• <script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
• <script src="bootstrap/js/bootstrap.min.js"></script>
• jQuery• 자바스크립트 라이브러리
6
Intelligent Software Lab.
Menu, Dropdown
7
Intelligent Software Lab.
Menu, Dropdown
8
Intelligent Software Lab.
Buttons
9
Intelligent Software Lab.
Buttons
10
Intelligent Software Lab.
Table
11
Intelligent Software Lab.
Table
12
Intelligent Software Lab.
Table
13
Intelligent Software Lab.
Login
14
Intelligent Software Lab.
Login
15
Intelligent Software Lab.
Jumbotron
16
Intelligent Software Lab.
Jumbotron
17
Intelligent Software Lab.
Sidebar
18
Intelligent Software Lab.
Sidebar
19
Intelligent Software Lab.
Modal
20
Intelligent Software Lab.
Modal
21
Intelligent Software Lab.
Carousel
22
Intelligent Software Lab.
Carousel
23
인터넷에서다운받은이미지사용
Intelligent Software Lab.
Progress Bar
24
Intelligent Software Lab.
Progress Bar
25
