부트스트랩: 최신 프런트 엔드 프레임워크 소개

4215 단어 programmingreactbootstrapwebdev

부트스트랩이란 무엇입니까?



부트스트랩은 웹사이트 개발 속도를 높이고 사용자 장치(데스크탑, 태블릿, 전화)에 대한 반응성을 높이도록 설계된 프런트 엔드 프레임워크입니다.



부트스트랩은 CSS 위에 구축된 프레임워크입니다. 정확하지는 않지만 Bootstrap을 스타일링을 위한 React로 생각하는 것이 도움이 된다고 생각합니다. React는 JavaScript를 "더 쉽게"만들고 Bootstrap은 CSS를 "더 쉽게"만듭니다.

Bootstrap은 2011년 Twitter에서 웹 페이지의 디자인 원칙을 단순화하기 위한 내부 프로젝트로 시작되었습니다. 지난 10년 동안 이 프레임워크는 가장 인기 있는 프런트 엔드 프레임워크 중 하나로 성장하면서 무료 및 오픈 소스가 되었습니다.

부트스트랩은 CSS 위에 구축된 프레임워크입니다.



CSS(Cascading Style Sheets)는 HTML 구조와 기본 JavaScript가 일부 부트스트랩 구성 요소에 포함되어 있지만 부트스트랩이 기반으로 하는 것입니다.

기술적으로 CSS는 최고의 유연성을 제공하고 설치가 필요하지 않지만 CSS는 웹 응용 프로그램을 개발하는 데 더 많은 시간이 걸립니다.

부트스트랩은 작업이 더 빠르고 설치가 필요하지만 jsDelivr로 피할 수 있습니다. 원하는 경우 기본 CSS를 사용자 지정하여 더 많은 유연성을 가질 수 있습니다.

부트스트랩 가져오기



개발자는 해당 프로젝트의 콘솔 창에서 노드를 사용하여 부트스트랩을 설치할 수 있습니다.
npm install bootstrap

또는



개발자는 jsDelivr를 사용하여 프레임워크를 다운로드하는 대신 부트스트랩의 캐시된 버전을 사용할 수도 있습니다.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

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

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>


부트스트랩 작업



부트스트랩은 반응형 그리드를 사용합니다. 즉, 생성한 구성 요소가 다소 고정된 위치에 표시됩니다. 이러한 그리드는 개발자의 노력이 거의 필요하지 않은 스타일리쉬한 방식으로 다른 장치에서 효과적으로 다시 렌더링됩니다. 이것을 부트스트랩의 "반응성"이라고 합니다. 데스크톱에서 사이트를 구축하고 있지만 모바일 사용자의 경험이 크게 다르지 않을 것이라고 확신할 수 있습니다.





Bootstrap에는 즉시 사용할 수 있는 미리 패키지된 HTML 구성 요소가 포함되어 있습니다. 버튼, 탐색 모음, 카드, 드롭다운 및 유용한 양식 구성 요소는 모두 개발자의 손끝에 있습니다.

기타 유용한 정보


  • 부트스트랩은 모든 최신 브라우저에서 작동합니다.
  • 기본적인 HTML과 CSS만 알면 부트스트랩을 사용할 수 있습니다.
  • 문서 및 타사 테마를 위한 대규모 개발자 커뮤니티.
  • 반응과 마찬가지로 Bootstrap은 적극적으로 개발, 업그레이드 및 수정됩니다.

    • 부트스트랩 확인



    https://getbootstrap.com/



    기록: Git 노출, 취약한 암호 재설정 및 계정 탈취.
    Flutter의 제공자 상태 관리 - 2부

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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