Bootstrap 도입 방법

8426 단어 bootstrap5초보자

BootStrap 도입



했던 일



Bootstrap5를 사용하여 HTML을 만들었습니다.

※JavaScript에 대해서 상세하게 기술해, 사용하고 있는 개소는 없습니다.

대상


  • Bootstrap을 처음 만지십시오
  • HTML, CSS의 기본 태그는 알고 있습니다
  • HTML, CSS는 가볍게 쓴 적이 있다
  • HTML, CSS를 비우지 않는다
  • 자바 스크립트는 전혀 만지지 않았다

    • 환경


  • Windows10 Pro
  • VScode

    • Bootstrap이란?



    개인적인 이해로서는 CSS로 파트를 제공해 주므로, 간단하게 HTML의 페이지를 작성할 수 있는 것 같은 인식입니다.

    세계에서 가장 인기있는 프런트 엔드 라이브러리 Bootstrap을 사용하여 모바일 우선 반응형 웹을 신속하게 디자인하고 사용자 정의 할 수 있습니다. Sass 변수와 mixin, 반응형 그리드 시스템, 풍부한 구성 요소, 강력한 JavaScript 플러그인을 갖추고 있습니다.
    ーBootstrap - 문서

    라이센스에 대해서는 MIT 라이센스 이며 카피레프트가 아닙니다.

    설치



    아래 공식 사이트에서 ダウンロード를 클릭하십시오.



    그 밖에도 ダウンロード를 클릭하십시오.
    그러면 bootstrap-5.0.0-beta1-dist.zip가 다운로드됩니다.
    어디서나 압축을 풉니 다.


    사용법



    스타터 템플릿



    설치한 Bootstrap은 HTML로 읽어들여 사용합니다.
    공식적으로 알기 쉽게 해설해 줍니다.

    아래 스타터 템플릿을 살펴 보겠습니다.
    <!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>私は仕事が大好きです。</title>
  </head>
  <body>
    <h1>私は仕事が大好きです。</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

    Bootstrap을 사용하기 위해 추가



    다음 부분에서 Bootstrap 방금 다운로드한 CSS 파일들 중 하나와 같은 내용의 것을 사용한다고 선언하고 있습니다.
    Bootstrap 는 CDN 에서도 사용 가능하다는 것으로, 다음과 같이 도입할 수 있습니다.
    물론 방금 설치한 CSS 파일의 경로를 항상 CSS 를 적용하도록 넣어주는 것도 좋다.

    만약 더 자신의 CSS 파일을 넣고 싶은 경우 등은 이 아래에 넣어 주세요.
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    JS에 대해서는 이번에는 사용할 수 없기 때문에 자세한 것은 피합니다만, 이하의 부분을 더합니다.
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    CDN은?



    물론 이미 아시는 분은 좋지만, CDN 에 대해서는 내가 몰랐기 때문에 (부끄럽다) 다른 분의 기사를 참조했습니다.
    감사합니다!

    CDN은 원래 무엇입니까? 왠지 서버의 부하가 내려간다고 들었는데! ~웹 제작/운영의 폭이 넓어지는 CDN을 알자 제1회~

    사용하다



    후에는 사용하고 싶은 파트를 조합해 갑니다.

    부품은 참조를 참조하여 적절히 사용하고 싶은 것을.



    예


  • Grid system


    • 기타



    Bootstrap icons



    이번, 이쪽도 사용했기 때문에 소개합니다.

    아이콘이 저장됩니다.
    이번에는 youtube 아이콘을 예로 사용합니다.

    도입에는 몇 가지 방법이 있는 것 같습니다만, 나는 이번 「HTMLをコピー 」를 클릭해, HTML에 넣었습니다.



    복사한 코드를 HTML 이미지를 넣고 싶은 부분에 붙여넣습니다.
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-youtube" viewBox="0 0 16 16">
  <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
</svg>

    이상입니다.
    Amazon chatbot 시도
    vmware를 설치합니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage