Bootstrap Demystified : 간단한 설명

Bootstrap은 응답적이고 모바일 최초의 웹 사이트를 만드는 데 도움이되는 무료 오픈 소스 CSS 프레임 워크입니다. 1) 레이아웃 유연성을위한 그리드 시스템을 제공합니다. 2) 빠른 디자인을위한 프리 스타일 구성 요소가 포함되어 있으며 3) 일반적인 외관을 피하기 위해 고도로 사용자 정의 할 수 있지만 성능을 최적화하고 과도한 관계를 피하기 위해 CSS를 이해해야합니다.

Bootstrap Demystified : 간단한 설명

Bootstrap이 무엇인지, 왜 웹 개발자들 사이에서 인기가 있는지 궁금한 적이 있습니까? 부트 스트랩의 세계로 뛰어 들고, 미스터리를 풀고, 웹 개발 여정에 어떻게 혁명을 일으킬 수 있는지 탐구합시다.

Bootstrap은 새로운 사람들을위한 사람들을 위해 무료로 오픈 소스 CSS 프레임 워크로, 반응 형 및 모바일 우선 웹 사이트를 쉽게 만들 수 있도록 설계되었습니다. 웹 디자인 용 스위스 군용 나이프를 갖는 것과 같습니다. 수많은 사전 스타일 구성 요소, JavaScript 플러그인 및 몇 시간의 코딩을 절약 할 수있는 반응 형 그리드 시스템이 포함되어 있습니다. 그러나 왜 부트 스트랩에 관심을 가져야하고, 프로젝트에 어떤 도움이 될 수 있습니까?

Bootstrap은 단순한 도구가 아니라고 말하면서 시작합시다. 게임 체인저입니다. 그것은 경기장을 레벨링하여 모든 기술 수준의 개발자가 복잡한 CSS에 깊이 빠져들지 않고 전문적인 웹 사이트를 만들 수 있습니다. Bootstrap을 처음 사용하기 시작했을 때를 기억합니다. 신선한 공기의 호흡처럼 느껴졌습니다. 갑자기, 나는 브라우저 크로스 브라우저 호환성 문제와 씨름하지 않고 내 사이트의 기능에 더 집중하거나 내 사이트를 모바일 장치에서 잘 보이게하기 위해 고군분투 할 수있었습니다.

부트 스트랩에서 가장 멋진 것 중 하나는 그리드 시스템입니다. 웹 사이트 레이아웃을 위해 레고 세트를 갖는 것과 같습니다. 콘텐츠를 행과 열로 쉽게 배열 할 수 있으며 몇 가지 클래스를 사용하면 모든 장치에서 사이트를 환상적으로 보이게 할 수 있습니다. 다음은 사용 방법에 대한 빠른 예입니다.

<div class = "컨테이너">
  <div class = "row">
    <div class = "col-sm-6"> 열 1 </div>
    <div class = "col-sm-6"> 열 2 </div>
  </div>
</div>

이 간단한 스 니펫은 두 개의 동등한 폭으로 행을 만듭니다. 그것은 마법입니다. 실제로 몇 줄의 코드가 어떻게 그러한 반응 형 레이아웃을 만들 수 있는지.

그러나 부트 스트랩은 단지 그리드에 관한 것이 아닙니다. 버튼, 양식, 내비게이션 바 등과 같은 수많은 사전 스타일 구성 요소가 제공됩니다. 버튼을 스타일링 할 수있는 방법은 다음과 같습니다.

<버튼 유형 = "버튼"클래스 = "btn btn-primary"> 기본 버튼 </button>

몇 개의 수업만으로도 갈 준비가 된 매끄럽고 전문적인 모습 버튼을 얻을 수 있습니다. 부트 스트랩을 매우 매력적으로 만드는 것은이 작은 시간 절차입니다.

이제 방에있는 코끼리에 대해 이야기합시다 : 커스터마이징. 일부 개발자는 부트 스트랩을 사용하면 사이트가 다른 모든 부트 스트랩 사이트처럼 보일 것이라고 걱정합니다. 물론, 조정없이 상자에서 똑바로 사용하면 약간 일반적인 느낌의 사이트로 끝날 수 있습니다. 그러나 여기에 있습니다 : 부트 스트랩은 엄청나게 사용자 정의 할 수 있습니다. 기본 스타일을 무시하고 자신의 CSS를 추가하며 Bootstrap의 고유 한 사용자 정의 옵션과 같은 도구를 사용하여 필요에 맞게 조정할 수 있습니다.

부트 스트랩을 만드는 가장 좋은 방법 중 하나는 기본부터 시작한 다음 자신의 스타일을 맨 위에 쌓는 것입니다. 예를 들어, 부트 스트랩의 그리드 시스템과 버튼을 사용하지만 고유 한 사용자 정의 색상과 글꼴을 추가하여 사이트에 독특한 모양을 제공합니다. 버튼 스타일을 무시할 수있는 방법은 다음과 같습니다.

.btn-custom {
  배경색 : #FF6347;
  국경 색상 : #FF6347;
  색상 : 흰색;
}

.btn-custom : 호버 {
  배경색 : #FF4500;
  국경 색 : #FF4500;
}

그런 다음 다음과 같이 사용하십시오.

<버튼 유형 = "button"class = "btn btn-custom"> 사용자 정의 버튼 </button>

이런 식으로, 당신은 두 세계를 최대한 활용합니다 : 부트 스트랩의 용이성과 자신의 디자인의 독창성.

그러나 잠재적 인 함정을 잊지 마십시오. 내가 보는 일반적인 실수 중 하나는 개발자가 기본 CSS를 이해하지 않고 부트 스트랩에 너무 많이 의존하는 것입니다. 많은 수업을 때리고 하루를 부르는 것이 유혹적이지만 코드와 성능 문제로 이어질 수 있습니다. 내 조언? 부트 스트랩을 출발점으로 사용하되 시간을내어 CSS 뒤에 배우십시오. 이렇게하면 부트 스트랩을 사용하는시기와 자신의 코드를 작성 해야하는시기에 대한 정보에 근거한 결정을 내릴 수 있습니다.

고려해야 할 또 다른 점은 프로젝트의 규모입니다. 소규모 프로젝트의 경우 부트 스트랩은 신의 선물이 될 수 있습니다. 그러나 더 크고 더 복잡한 사이트의 경우 Bootstrap의 CSS 및 JavaScript를 모두 포함하는 오버 헤드가 약간 많을 수 있습니다. 이 경우 필요한 부트 스트랩 부분을 포함하거나 Tailwind CSS와 같은 프레임 워크를 사용하는 것과 같은보다 모듈 식 접근법을 사용하는 것을 고려하십시오.

성능 측면에서, 내가 배운 것 중 하나는 부트 스트랩 사용을 최적화하는 것이 중요하다는 것입니다. 예를 들어, PurgecsS와 같은 도구를 사용하여 사용하지 않은 스타일을 제거 할 수 있으며, 이는 CSS 파일의 크기를 크게 줄일 수 있습니다. 다음은 Bootstrap과 함께 Purgecss를 사용하는 방법에 대한 빠른 예입니다.

const purgecss = require ( '@fullhuman/postcss-purgecss')

module.exports = {
  플러그인 : [
    필요 ( 'Tailwindcss'),
    require ( 'AutoPrefixer'),
    ... (process.env.node_env === '생산'
      ? [Purgecss ({
          내용 : [ '**/*. html'],
          defaultextractor : content => content.match (/[\ w-/:] (? <! :)/g) || []
        })]]
      : [])
  ]]
}

이 구성은 생산을 위해 구축 할 때 사용하지 않은 CSS를 제거하여 사이트로드를 더 빠르게로드 할 수 있습니다.

따라서 상황을 마무리하기 위해 Bootstrap은 아름답고 반응이 좋은 웹 사이트를 신속하게 구축하는 데 도움이되는 매우 강력한 도구입니다. 그러나 다른 도구와 마찬가지로 현명하게 사용하는 것이 중요합니다. 맹목적으로 의존하지 마십시오. 시간을내어 이해하고 사용자 정의하고 필요에 맞게 최적화하십시오. 약간의 창의성과 노하우로 부트 스트랩을 사용하여 기능적 일뿐 만 아니라 독특한 사이트를 만들 수 있습니다.

행복한 코딩!

위 내용은 Bootstrap Demystified : 간단한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!