부트 스트랩과 관련하여 여기에 많은 질문이 있습니다. 나는 그것을 사용하는 많은 사람들을 봅니다. 그래서 나는 그것을 조사하려고 노력했고 공식 부트 스트랩 사이트를 찾았 지만 그 이후에는 다운로드 섹션과 몇 마디 만있었습니다. 그것이 무엇인지 설명하는 것은 없습니다. 나는 그것이 프론트 엔드 헬퍼라는 것을 이해했습니다. 나는 인터넷 검색으로 무언가를 찾으려고 노력했지만 아무것도 발견하지 못했습니다. 내가 찾은 모든 것은 컴퓨터 과학 정의와 관련이 있습니다.

그래서 내 질문은 :

• 부트 스트랩은 무엇입니까?
• 무엇을 위해 사용되며 프론트 엔드 개발에 어떻게 도움이됩니까?
• 또한 그것을 설명하는 더 자세한 내용을 원합니다.

웹 사이트 나 웹 응용 프로그램을 만들기위한 기초로 사용할 수있는 HTML, CSS 및 JavaScript 오픈 소스 프레임 워크 (처음 Twitter에서 만든)입니다.

• 추가 정보 및 다운로드 링크

• 시작하기

• 예

• 테마

• Bootply-부트 스트랩 편집기 및 빌더

최신 정보

공식 부트 스트랩 웹 사이트 가 업데이트되었으며 명확한 정의가 포함되어 있습니다.

"부트 스트랩은 웹에서 반응 형의 모바일 우선 프로젝트를 개발하는 데 가장 널리 사용되는 HTML, CSS 및 JS 프레임 워크입니다."

" @mdo 와 @fat에 의해 세상의 모든 사랑으로 설계되고 건축되었습니다 ."

Bootstrap은 Twitter 팀이 개발 한 오픈 소스 Javascript 프레임 워크입니다. 사용자 인터페이스 구성 요소를 작성하는 데 도움이되도록 설계된 HTML, CSS 및 Javascript 코드의 조합입니다. 부트 스트랩은 HTML5와 CSS3을 모두 지원하도록 프로그래밍되었습니다.

또한이를 프론트 엔드 프레임 워크라고합니다.

Bootstrap은 웹 사이트 및 웹 응용 프로그램을 만들기위한 무료 도구 모음입니다.

여기에는 타이포그래피, 양식, 버튼, 탐색 및 기타 인터페이스 구성 요소 및 선택적 JavaScript 확장을위한 HTML 및 CSS 기반 디자인 템플릿이 포함되어 있습니다.

프로그래머가 부트 스트랩 프레임 워크를 선호하는 몇 가지 이유

1. 손쉬운 시작

2. 훌륭한 그리드 시스템

3. 대부분의 HTML 요소 (타이포그래피, 코드, 표, 양식, 단추, 이미지, 아이콘)의 기본 스타일링

4. 광범위한 구성 요소 목록

5. 번들 자바 스크립트 플러그인

에서 촬영 부트 스트랩 프레임 워크 소개

내가 아는 것처럼 부트 스트랩은 잘 정의 된 CSS입니다. Bootstrap을 사용하더라도 JavaScript, jQuery 등을 사용할 수도 있습니다. 그러나 가장 큰 차이점은 Bootstrap을 사용하여 클래스 이름을 호출하면 HTML 양식으로 출력을 얻을 수 있다는 것입니다. 예를 들어. 레이아웃을 사용하여 텍스트를 형성하는 버튼의 채색. 이 모든 것을 위해 CSS 파일을 작성할 필요는 없으며 HTML 양식을 형성하기 위해 올바른 클래스 이름을 사용해야합니다.

간단히 말해, Bootstrap을 장치 응답 웹 응용 프로그램의 빠른 생성을 위해 Twitter에서 만든 프런트 엔드 웹 프레임 워크로 이해할 수 있습니다. 부트 스트랩은 주로 직접 사용될 수있는 CSS 클래스 모음으로 이해 될 수 있습니다. 백그라운드에서 CSS, javascript, jQuery 등을 사용하여 Bootstrap 요소의 스타일, 효과 및 작업을 만듭니다.

우리는 웹 페이지 요소를 스타일링하기 위해 CSS를 사용하고 클래스를 생성하고 클래스를 웹 페이지 요소에 할당하여 스타일을 적용한다는 것을 알고있을 것입니다. 여기서 Bootstrap은 Bootstrap 파일 만 포함하고 웹 페이지 요소에 대해 Bootstrap의 사전 정의 된 클래스 이름 만 언급하면되고 Bootstrap을 통해 자동으로 스타일이 지정되므로 설계가 간단 해집니다. 이를 통해 웹 페이지 요소의 스타일을 지정하기 위해 자체 CSS 클래스를 작성하지 않아도됩니다. 가장 중요한 것은 Bootstrap은 웹 사이트 장치를 반응 적으로 만들고 그 주요 목적인 방식으로 설계되었습니다. Bootstrap의 다른 대안으로는 Foundation , Materialise 등이 있습니다.

Bootstrap을 사용하면 많은 CSS 코드를 작성할 필요가 없으며 웹 페이지 디자인에 소요되는 시간도 절약됩니다.

Bootstrap은 트위터의 디자이너 및 개발자 팀이 트위터 애플리케이션을 위해 원래 개발 한 오픈 소스 CSS, JavaScript 프레임 워크입니다. 그런 다음 공개 소스로 공개했습니다. 트위터 부트 스트랩을 오랫동안 사용했기 때문에 모바일 준비 형 반응 형 웹 사이트를 디자인하는 데 가장 적합하다는 것을 알았습니다. 웹 사이트 디자인을 위해 많은 CSS 및 Javascript 플러그인을 즉시 사용할 수 있습니다. 빠른 템플릿 디자인 프레임 워크입니다. 어떤 사람들은 부트 스트랩 CSS 파일이 무겁고로드하는 데 시간이 걸리지 만이 주장은 게으른 사람들에 의해 제기된다고 불평합니다. 당신은 당신의 웹 사이트에 완전한 bootstrap.css를 유지할 필요가 없습니다. 웹 사이트에 필요하지 않은 구성 요소의 스타일을 제거 할 수있는 옵션이 항상 있습니다. 예를 들어 양식 및 버튼과 같은 기본 구성 요소 만 사용하는 경우 기본 CSS 파일에서 아코디언 등의 다른 구성 요소를 제거 할 수 있습니다. 부트 스트랩에서 손끝을 내기 위해 기본 템플릿 및 구성 요소를getbootstrap 사이트와 마법이 일어날 수 있습니다.

면책 조항 : 나는 과거에 부트 스트랩을 사용했지만 실제로 그것이 실제로 무엇인지 감사하지 않았습니다.이 설명은 오늘 저 자신의 정의에서 나옵니다. 부트 스트랩 v4가 나왔다는 것을 알고 있지만 부트 스트랩 v3 설명서가 훨씬 명확하다는 것을 알았습니다. 도서관은 도서관이 제공하는 것을 근본적으로 바꾸지 않을 것입니다.

간단히

부트 스트랩은 표준 html 요소에 대한 멋진 기본 스타일과 표준 html 요소가 아닌 일반적인 웹 컨텐츠 객체를 제공하는 CSS 및 자바 스크립트 파일 모음입니다.

유사점을 만들려면 파워 포인트에서 테마를 적용하는 것과 비슷하지만 웹 사이트에 너무 많은 노력을 기울이지 않아도 상황이 예쁘게 보입니다.

무엇으로 구성되어 있습니까?

공식 v3 설명서는 다음 세 부분으로 나뉩니다.

• CSS
• 구성 요소
• 자바 스크립트

이것들은 대략 부트 스트랩이 제공하는 세 가지 주요 사항에 해당합니다.

• 표준 html 요소를 스타일링하는 일반 CSS 파일 따라서 부트 스트랩은 표준 요소를 예쁘게 만듭니다. 예를 들어 html :<input class="btn btn-default" type="button" value="Input">Click me</button>
• 표준 HTML 요소에 스타일을 사용하십시오 CSS 파일은 표준 HTML 요소가 아니라 뭔가를 만들 것입니다 표준 부트 스트랩 요소 (예 : https://getbootstrap.com/docs/3.3/components/#progress ). 이러한 방식으로 Bootstrap은 시각적으로 일관된 방식으로 "표준"웹 요소 목록을 확장합니다. 예를 들어 html :<span class="glyphicon glyphicon-align-left"></span>
• CSS 클래스는 jQuery를 염두에두고 설계되었습니다. 내부적으로 Bootstrap은 jQuery 선택기를 사용하여 스타일을 즉석에서 수정하고 DOM과 상호 작용하므로 사용자에게 동일한 기능을 제공합니다. 더 자세한 설명이 필요하다고 생각합니다.

자바 스크립트 / jQuery 사용

부트 스트랩 은 jQuery를 상당히 확장 합니다. 소스 코드를 보면 jQuery를 사용 하여 키 다운 이벤트에 대한 리스너를 설정하여 드롭 다운과 상호 작용 한다는 것을 알 수 있습니다 . <script>태그 에서 가져올 때이 jQuery 설정을 모두 수행 하므로 부트 스트랩이로드되기 전에 jQuery가로드되어 있는지 확인해야합니다.

또한 Javascript를 일반 jQuery보다 더 밀접하게 DOM에 연결하여 Javascript 클래스 인터페이스를 제공합니다 . 예를 들어 버튼을 프로그래밍 방식으로 토글합니다 . CSS는 물건의 모양을 정의하기 때문에 이러한 작업의 주요 작업은 해당 시점에 요소에 적용 할 CSS 클래스를 수정하는 경향이 있습니다. 사용자 입력에 따라 이러한 종류의 변경은 일반 CSS로는 수행 할 수 없습니다.

CSS에 포함되지 않은 인터넷 사용이 거부 된 사용자와의 다른 표준 상호 작용이 있습니다. 마찬가지로 페이지를 변경하는 대신 페이지를 아래로 스크롤하는 링크를 클릭하십시오. Bootstrap이 제공하는 것 중 하나는 웹 사이트에서이 동작을 쉽게 구현할 수있는 방법입니다.

표준

나는 여기서 "표준"이라는 단어를 많이 언급했으며, 그럴만한 이유가 있습니다. Bootstrap이 제공하는 가장 좋은 것은 좋은 표준 세트라고 생각합니다. 기본 테마를 원하는만큼 자유롭게 수정할 수 있지만 원시 html, css 및 js보다 더 나은 기본입니다. 이것이 바로 "프레임 워크"라고하는 이유입니다.

웹 브라우저마다 기본 스타일이 다르고 다르게 작동 할 수 있으며 다른 CSS 접두사 및 이와 유사한 항목이 필요합니다. 부트 스트랩의 주요 이점은 브라우저 간 내용을 직접 작성하는 것보다 훨씬 안정적이라는 것입니다 (여전히 문제가 있지만 확실하지만 더 쉽습니다).

나는 gulp와 babel이 인기가 없었을 때 Bootstrap이 더 선호되었다고 생각합니다. 부트 스트랩을 살펴보면 모든 사람이 자바 스크립트를 컴파일하기 전에 한 때부터 온 것 같습니다. 여전히 관련성이 있지만 지금은 다른 출처에서 얻을 수있는 혜택 중 일부를 얻을 수 있습니다.

_{최신 버전의 CSS를 사용하면 이러한 정적 목록 사이의 전환을 변경할 수 있습니다. Bootstrap의 원래 버전은 실제로 브라우저에서이 기능을 널리 채택하기 이전에 여전히 고유 한 애니메이션 클래스를 가지고 있습니다. 다음과 같은 몇 가지 부트 스트랩이 있습니다. 다른 것들이 주변에 와서 약간 중복되어 보입니다.}

Bootstrap은 아름답고 현대적인 웹 사이트 또는 웹 응용 프로그램을 매우 빠르게 만들 수있는 많은 구성 요소가 포함 된 HTML, CSS, JS 프레임 워크입니다.

다음 웹 사이트에는 부트 스트랩 프레임 워크를 사용하여 프로젝트에 통합 할 수있는 예제, 요소 및 재사용 가능한 구성 요소가 포함되어 있습니다.

bootsnipp.com

startbootstrap.com

bootdey.com

부트 스트랩은 HTML, CSS 및 JS로 개발하기 위해 세계에서 가장 널리 사용되고 널리 사용되는 오픈 소스 프레임 워크입니다. HTML의 프론트 엔드 프레임 워크입니다. Bootstrap은 반응 형 웹 사이트 또는 웹 응용 프로그램 및 12 열 그리드 시스템을 구축하여 웹 사이트를 적절한 화면 해상도로 동적으로 조정할 수 있도록 도와줍니다. 부트 스트랩의 현재 버전은 4.3.1이며 부트 스트랩 팀은 공식적으로 Bootstrap 5 버전과 부트 스트랩에서 jquery를 제거하는 것과 같은 변경 사항을 발표했습니다 . 부트 스트랩 프레임 워크가 가장 바람직한 몇 가지 중요한 이유는 다음과 같습니다.

• 사용하기 쉽다
• 부트 스트랩은 큰 커뮤니티 지원을 제공합니다
• 쉽게 사용자 정의 할 수 있습니다
• 개발 속도를 높입니다

• 민감도

  자세한 내용은 공식 웹 사이트 ( https://getbootstrap.com/)를 확인 하십시오.

출처 : https://vmokshagroup.com/blog/bootstrap-advantages/

오늘날의 기준 및 웹 용어, 나는 부트 스트랩 실제로 말할 것 없는 프레임 워크 가 어떤 웹 사이트의 주장 비록. 대부분의 개발자는 Angular, Vue 및 React 프레임 워크를 고려하지만 부트 스트랩은 일반적으로 " 라이브러리 라고 합니다. "라고합니다.

그러나 정확하고 정확한 Bootstrap은 오픈 소스, 모바일 우선 CSS, JavaScript 및 HTML 디자인 유틸리티 모음입니다. 일반적으로 사용되는 웹 요소를 처음부터 코딩하는 것보다 훨씬 빠르고 똑똑하게 개발할 수있는 수단을 제공합니다. .

부트 스트랩의 성공에 기여한 몇 가지 핵심 원칙 :

• 재사용이 가능하다
• 융통성이 뛰어납니다 (즉, 맞춤형 그리드 시스템, 응답 성 중단 점, 열 거터 크기 또는 상태 색상을 쉽게 변경할 수 있습니다. 일반적으로 대부분의 설정은 전역 변수에 의해 제어됩니다)
• 직관적입니다
• 모듈 식 (JavaScript 및 (S) CSS는 모듈 식 접근 방식을 사용합니다. 사용자는 필요한 부분 만 포함하도록 사용자 정의 부트 스트랩 빌드를 만드는 방법에 대한 자습서를 쉽게 찾을 수 있습니다)
• 브라우저 간 호환성이 평균 이상임
• 즉시 사용 가능한 웹 접근성 (스크린 리더 준비)
• 상당히 잘 문서화되어 있습니다.

레이아웃, 타이포그래피, 양식, 탐색, 메뉴 (드롭 다운 포함), 버튼, 패널, 배지, 모달, 경고, 탭, 축소 가능, 아코디언, 회전 목마, 목록, 표, 페이지 매김, 미디어 유틸리티 (포함) 포함, 이미지 및 이미지 교체), 반응 유틸리티, 색상 기반 유틸리티 (1 차, 2 차, 위험, 경고, 정보, 밝음, 어둡게, 음소거, 흰색), 기타 유틸리티 (위치, 여백, 패딩, 크기 조정, 간격, 정렬, 가시성), 스크롤, 첨부, 툴팁, 팝 오버.

기본적으로 jQuery에 의존하지만 현대적인 인기있는 진보적 인 JavaScript 프레임 워크 각각에 의해 구동되는 jQuery 무료 변형이 있습니다.

• React-Bootstrap- 반응 형 부트 스트랩
• BootrapVue -Vue 전원 부트 스트랩
• ng-bootstrap- 앵귤러 파워 부트 스트랩

부트 스트랩 작업은 특정 클래스를 적용하거나 (JS 프레임 워크에 따라 지시문, 메소드 또는 속성 / 프로 프) 특정 마크 업 구조를 사용하는 데 크게 의존합니다.

문서에는 일반적으로 쉽게 복사하여 붙여 넣을 수 있고 시작 템플릿으로 사용할 수있는 일반적인 예가 포함되어 있습니다.

Bootstrap으로 개발할 때 얻을 수있는 또 다른 장점은 활기찬 커뮤니티로, 다양한 테마, 템플릿 및 플러그인으로 번역되어 있으며 대부분 오픈 소스 (예 : 달력, 날짜 / 시간 선택기, 표 형식 컨텐츠 관리 용 플러그인)입니다. MDB, 포트폴리오 템플릿, 관리 템플릿 등과 같은 부트 스트랩 위에 구축 된 라이브러리 / 구성 요소 모음)

마지막으로, Bootstrap은 수년에 걸쳐 잘 관리되어 프로덕션 준비가 된 응용 프로그램 / 웹 사이트에 대한 견고한 선택입니다.