ACHO.pk devlog

[멋쟁이사저처럼10기] bootstrap 다루기 본문

멋쟁이사자처럼

[멋쟁이사저처럼10기] bootstrap 다루기

Acho 2022. 6. 26. 14:30

초기 환경 설정
1. 가상환경 myvenv 생성
2. 프로젝트 bootstrap_ex 생성
3. 어플리케이션 bootapp 생성
4. templates, html, settigs.py, urls.py, views.py 설정

bootstrap을 이용해서 웹 사이트를 쉽게 꾸밀 수 있게 해준다. 아래 링크 참고..
https://getbootstrap.com/docs/5.2/components/buttons/

 

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

 


형광펜으로 되어 있는 부분을 바꾸게 되면 색깔을 바꿀 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

bootstrap을 내 프로젝트 코드에 적용시키는 방법

1. bootstrap 관련 코드를 직접 다운 받아 설치하기

 

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

 

Download

Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.

getbootstrap.com

다운로드한 파일 열기


미리 준비된 css와 js는 static 파일이기 때문에 베이스 디렉토리 하위에 static 폴더를 생성하고 css와 js 폴더들을 넣어준다.

 

 

 



settings.py에 해당 코드를 적어준다. (static 파일의 경로를 알려줌 )

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    BASE_DIR / 'static'
]


home.html 파일에 bootstrap 사이트를 참고하여 여러 태그를 달아준다.

{% load static %}
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    
    <link rel = "stylesheet" type="text/css" href = "{% static 'css/bootstrap.min.css' %}">
    <script src = "{% static 'js/bootstrap.min.js' %}"></script>

    <title>Bootstrap</title>
</head>
<body>
    <div> 
        HEllO BOOT !! 
        <span class="badge bg-primary">Primary</span>
    </div>

    <div class="card" style="width: 18rem;">
      <img src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
    
    <div class="alert alert-danger" role="alert">
        A simple danger alert—check it out!
    </div>
    <div class="alert alert-warning" role="alert">
        A simple warning alert—check it out!
    </div>
    <div class="alert alert-info" role="alert">
        A simple info alert—check it out!
    </div>
</body>
</html>

화면

 

레이아웃 정렬(container)

https://getbootstrap.com/docs/5.2/layout/containers/

 

Containers

Containers are a fundamental building block of Bootstrap that contain, pad, and align your content within a given device or viewport.

getbootstrap.com

양쪽에 여백이 생겼음을 확인할 수 있다.

class = "container" 했을 떄 화면

 

 

Grid 사용

bootstrap은 기본적으로 화면의 가로를 12등분하고, 12등분 중에서 component가 차지하는 비율을 확인한다.

<div class="col-6">
      2 of 3 (wider)
</div>

위의 코드는 12등분 중 6등분을 가져간다는 뜻이다.

 


2. CDN 이용하기 (link, script 부분)

 

아래 링크 페이지에서 CDN 

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

 

Download

Download Bootstrap to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, RubyGems, and more.

getbootstrap.com

{% load static %}
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <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">
    <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>
    
    <title>Bootstrap</title>
</head>




'멋쟁이사자처럼' 카테고리의 다른 글

[멋쟁이사저처럼10기] Django 회사 소개 사이트 만들기  (0) 2022.06.26
[멋쟁이사저처럼10기] Django template 언어와 속성, 네임스페이스(url 이동)  (0) 2022.06.26
[멋쟁이사저처럼10기] Django static 파일 다루기  (0) 2022.06.26
[멋쟁이사자처럼10기] Django url mapping 다루기  (0) 2022.05.29
[멋쟁이사자처럼10기] 가상환경 설정하고 Django 시작하기  (0) 2022.05.23
'멋쟁이사자처럼' Related Articles more
Comments