본문 바로가기
WEB/Bootstrap

[Web][Bootstrap] Bootstrap v5.1(jQuery는 없는) - 1. 다운받거나 불러오기

탱! 2022. 5. 20. 10:44

공식홈페이지 참조

https://getbootstrap.com/docs/5.2/getting-started/introduction/

 

Get started with Bootstrap

Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes.

getbootstrap.com

https://getbootstrap.kr/docs/5.1/getting-started/introduction/

 

시작하기

세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요.

getbootstrap.kr

Bootstrap : 프론트엔드 라이브러리

프리스타일 요소들이 있어서 원하는 html 요소의 클래스안에 선택자를 활성화하는 단어를 추가하면 css없이도 스타일이 추가된다.

이런 클래스들이 다양하게 많아서 클래스 이름을 요소 태그안에 불러오면 된다.

 

예를 들어 button요소를 만들 때 아래와 같이 사용하게 되는데 

<a class="btn btn-primary" href="url" rel="noopener noreferrer" target="_blank">버튼</a>

불러오거나 다운받은 css파일 안에

.btn{
    어쩌구어쩌구 :어쩌구;
}
.btn-primary{
    저쩌구저쩌구 :저쩌구	;
}

와 같은 클래스 속성값이 저장되어 있는 파일을 사용하게 된다.

 

앞서 말한 것처럼 라이브러리를 사용할 때

코드를 다운받거나 링크로 불러올 수 있다.

 

만일 링크로 불러오는 경우

(CDN : 셰계 여러지역에 라우팅 포인트가 있는 cdn에서 (가까운 곳에서) css나 javascript 파일을 호스팅해온다.)

css파일을 이미 사용자가 한번 썼던 파일이라면 브라우저에서 캐시되어 매번 다운로드할 필요없이 로컬복사본을 사용한다.

 

그러나 코드를 다운받는 경우

캐시없이 파일을 모두 다운로드해야한다. 따라서 대기시간이 오래걸릴 수 있다.

다만 소스파일을 다운 받아서 자세히 알아가면서 배우긴 좋을 것 같다.

 

0. 링크로 불러오기

다운은 홈페이지에서 파일을 다운받으면 된다. 대신 파일 위치를 잘 생각해서 배정하자 

 

Bootstrap v5.1에는 제이쿼리(jQuery)가 지원되지 않는다. 따라서 불러올 수 있는 것은 CSS와 Javascript두가지 인데

html 파일안에 불러온다.

CSS🌲

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

JavaScript🌳

자바스크립트는 웹의 동적인 기능을 처리해주는 언어이기 때문에 bootstrap에서 사용하는 많은 요소들이 자바스크립트를 필요로 한다.

드롭다운이나 팝오버 툴팁스 같은 기능을 사용하지 않는다면 popper가 포함된 번들이 아니라 개별로 불러올 수 있다.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

불러오거나 다운받으면 있는 파일 목록이 아래처럼 있다.

bootstrap/
├── css/
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css🌲
│   ├── bootstrap-grid.min.css.map
생략
│   ├── bootstrap.min.css.map
│   ├── bootstrap.rtl.css
│   ├── bootstrap.rtl.css.map
│   ├── bootstrap.rtl.min.css
│   └── bootstrap.rtl.min.css.map
└── js/
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js🌳
    ├── bootstrap.bundle.min.js.map
생략
    ├── bootstrap.esm.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js🌷
    └── bootstrap.min.js.map

블로그에 사용한 파일들을 이모티콘으로 나타냈다.

번들까지 필요 없고 파퍼는 필요할 때는 아래와 같이 불러온다. 🌷는 부트스트랩의 js플러그인이다.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

그렇다면 html에 한번 써보자

### 반나절을 삽질한 결과 js는 위 cdn 두개다 불러오는 것이 좋다. 드롭다운메뉴가 실행이 안되길래 제이쿼리가 없어져서 그런가보다하고 이리저리 삽질했으나 결국은 적절한 파일을 불러오는 것이 관건이었다.

1. 실전 html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
    <div class="container py-5">
        <h1 class="h2">Bootstrap v5 Bug Report</h1>
        <p>Have a bug report to share with us? Use this template to reproduce an isolated test case so we can more easily identify the problem and hopefully find a fix.</p>
        <p>
          <a class="btn btn-primary" href="https://github.com/twbs/bootstrap/blob/main/.github/CONTRIBUTING.md#bug-reports" rel="noopener noreferrer" target="_blank">Read bug report guidelines</a>
        </p>
        <p>Once you're set, replace the contents of this page and share the link with us in a <a href="https://github.com/twbs/bootstrap/issues/new/choose" rel="noopener noreferrer" target="_blank">new issue</a>.</p>
        <p>Thanks! <span class="text-danger">♥</span></p>
      </div>
    </body>
</html>

문서에 있는 코드펜 데모를 복사해왔다.

출처:https://codepen.io/team/bootstrap/pen/qBamdLj

 

Bootstrap v5 Bug Report Template

A Bootstrap v5 bug report template....

codepen.io

 

2. 중요한 전역 속성 globals

1) html5 doctype

<!doctype html>
<html lang="en">
  ...
</html>

2) viewport 메타태그 

<meta name="viewport" content="width=device-width, initial-scale=1">

3) Box-sizing

.selector-for-some-widget {
  box-sizing: content-box;
}

좀 더 직관적으로 알기 위해 전역 변수 box-sizing의 값을 content-box가 아니라 border-box로 바꿨다. 이러면 padding 이 최종 너비에 영향을 미치지 않지만 제3자 소프트웨어에서 문제가 생길 수 있어서 위와같이 수정한다.

4) Reboot

 

'WEB > Bootstrap' 카테고리의 다른 글

[Web][Bootstrap][Python][Flask]예시template 을 이용해서 flask에연결해보기-2.  (0) 2022.05.30
[Web][Bootstrap][Python][Flask]예시template 을 이용해서 flask에연결해보기  (0) 2022.05.27
[Web][Bootstrap] Bootstrap v5.1 간단히 따라하기 - 4.Carousel 캐러셀/ 카드  (0) 2022.05.26
[Web][Bootstrap] Bootstrap v5.1 간단히 따라하기 -3. container와 grid이용하기  (0) 2022.05.24
[Web][Bootstrap] Bootstrap v5.1 간단히 따라하기 - 2. 내비게이션 만들기  (0) 2022.05.23

'WEB/Bootstrap' Related Articles

티스토리툴바