JAVA 교육/myWeb
bootstrap
- -
bootstrap
참고 사이트 https://www.w3schools.com/bootstrap/default.asp
부트스트랩은 트위터에서 사용하는 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 놓은 것이다.
웹 디자이너나 개발자 사이에서는 웹 디자인의 혁명이라고 불릴 정도로 폭발적은 반응을 얻는 프레임워크이다.
'프레임워크' 라고 하는 것은 재사용이 가능한 요소들의 집합되어 있으며,정해진 구조와 틀 안에서 이것들이 확장이 가능한 기반 코드로 이루어 짐을 뜻한다. jquery는 라이브러리이고, 부트스트랩은 프레임워크다.
따라서, 우리는 '부트스트랩 프레임워크에서 jquery 라이브러리를 사용할 수 있다.'라고 말 할 수 있다.
01_bootstrap시작(container)
<!DOCTYPE html>
<html lang="ko">
<head>
<title>01_bootstrap시작(container).html</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--부트스트랩을 사용하기 위한 용어 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!--부트스트랩은 기본적으로 jQuery가 기본적으로 깔려 있다 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container class.</p>
<p>The .container class provides a responsive fixed width container.</p>
</div>
</body>
</html>▶화면 출력
02_bootstrap시작(container-fluid)
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>▶화면 출력
03_bootstrap시작(오픈소스 다운)
1,2 는 코드를 발채 해서 가져왔지만
오픈소스를 다운받아서 해보자
다운로드 링크: https://getbootstrap.com/docs/4.3/getting-started/introduction/
다운로드 받은 bootstrap
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>03_bootstrap시작(오픈소스 다운).html</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This part is inside a .container-fluid class.</p>
<p>The .container-fluid class provides a full width container, spanning the entire width of the viewport.</p>
</div>
</body>
</html>내컴퓨터 환경에 맞게 설정
bootstrap 발췌
04_media_Query
05_grid2,3단
06_simply me
07_company
08_band
'JAVA 교육 > myWeb' 카테고리의 다른 글
| 2019/09/11 6. 로그인 (0) | 2019.11.22 |
|---|---|
| 2019/09/11 5. session&application (0) | 2019.11.22 |
| 2019/09/10 4. scope (0) | 2019.11.22 |
| 2019/09/10 3. 페이징 (0) | 2019.11.22 |
| 2019/09/09 2. 검색 창 (0) | 2019.11.22 |
Contents
소중한 공감 감사합니다