bootstrap

2019년 11월 22일

조별하
작성자
2019.11.22.:17

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

다음 글이 없습니다.

이전 글이 없습니다.

bootstrap

01_bootstrap시작(container)

▶화면 출력

02_bootstrap시작(container-fluid)

▶화면 출력

03_bootstrap시작(오픈소스 다운)

다운로드 받은 bootstrap

bootstrap 발췌

04_media_Query

05_grid2,3단

06_simply me

07_company

08_band

'JAVA 교육 > myWeb' 카테고리의 다른 글

티스토리툴바