부트 스트랩이란 무엇입니까?
부트 스트랩과 관련하여 여기에 많은 질문이 있습니다. 나는 그것을 사용하는 많은 사람들을 봅니다. 그래서 나는 그것을 조사하려고 노력했고 공식 부트 스트랩 사이트를 찾았 지만 그 이후에는 다운로드 섹션과 몇 마디 만있었습니다. 그것이 무엇인지 설명하는 것은 없습니다. 나는 그것이 프론트 엔드 헬퍼라는 것을 이해했습니다. 인터넷 검색으로 무언가를 찾으려고 시도했지만 구체적인 것은 없습니다. 내가 찾은 모든 것은 컴퓨터 과학 정의와 관련이 있습니다.
그래서 내 질문은 :
- 부트 스트랩은 무엇입니까?
- 어떤 용도로 사용되며 프런트 엔드 개발에 어떤 도움이됩니까?
- 또한 그것을 설명하는 더 자세한 내용을 원합니다.
웹 사이트 나 웹 응용 프로그램을 만들기위한 기초로 사용할 수있는 HTML, CSS 및 JavaScript 오픈 소스 프레임 워크 (처음 Twitter에서 만든)입니다.
최신 정보
공식 부트 스트랩 웹 사이트 가 업데이트되었으며 명확한 정의가 포함되어 있습니다.
"부트 스트랩은 웹에서 반응 형의 모바일 우선 프로젝트를 개발하는 데 가장 널리 사용되는 HTML, CSS 및 JS 프레임 워크입니다."
" @mdo 와 @fat에 의해 세상의 모든 사랑으로 설계되고 건축되었습니다 ."
Bootstrap은 Twitter 팀이 개발 한 오픈 소스 Javascript 프레임 워크입니다. 사용자 인터페이스 구성 요소를 빌드하는 데 도움이되도록 설계된 HTML, CSS 및 Javascript 코드의 조합입니다. 부트 스트랩은 HTML5와 CSS3을 모두 지원하도록 프로그래밍되었습니다.
또한이를 프론트 엔드 프레임 워크라고합니다.
Bootstrap은 웹 사이트 및 웹 응용 프로그램을 만들기위한 무료 도구 모음입니다.
여기에는 타이포그래피, 양식, 단추, 탐색 및 기타 인터페이스 구성 요소 및 선택적 JavaScript 확장을위한 HTML 및 CSS 기반 디자인 템플릿이 포함되어 있습니다.
프로그래머가 Bootstrap Framework를 선호하는 몇 가지 이유
손쉬운 시작
훌륭한 그리드 시스템
대부분의 HTML 요소 (타이포그래피, 코드, 표, 양식, 단추, 이미지, 아이콘)의 기본 스타일링
광범위한 구성 요소 목록
번들 자바 스크립트 플러그인
에서 촬영 부트 스트랩 프레임 워크 소개
내가 아는 것처럼 부트 스트랩은 잘 정의 된 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 사이트와 마법이 일어날 수 있습니다.
Bootstrap은 아름답고 현대적인 웹 사이트 또는 웹 응용 프로그램을 매우 빠르게 만들 수있는 많은 구성 요소가 포함 된 HTML, CSS, JS 프레임 워크입니다.
면책 조항 : 나는 과거에 부트 스트랩을 사용했지만 실제로 그것이 실제로 무엇인지 감사하지 않았습니다.이 설명은 오늘 저 자신의 정의에서 나옵니다. 부트 스트랩 v4가 나왔다는 것을 알고 있지만 부트 스트랩 v3 설명서가 훨씬 명확하다는 것을 알았습니다. 도서관은 도서관이 제공하는 것을 근본적으로 바꾸지 않을 것입니다.
간단히
부트 스트랩은 표준 html 요소에 대한 멋진 기본 스타일과 표준 html 요소가 아닌 일반적인 웹 컨텐츠 객체를 제공하는 CSS 및 자바 스크립트 파일 모음입니다.
유추하기 위해 파워 포인트에 테마를 적용하는 것과 비슷하지만 웹 사이트에는 너무 많은 초기 노력없이 일을 멋지게 보이게합니다.
무엇으로 구성되어 있습니까?
공식 v3 설명서는 다음 세 부분으로 구성되어 있습니다.
이것들은 대략 부트 스트랩이 제공하는 세 가지 주요 사항에 해당합니다.
- 표준 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의 원래 버전은 실제로 브라우저에서이 기능을 널리 채택하기 이전에 여전히 고유 한 애니메이션 클래스를 가지고 있습니다. 다음과 같은 몇 가지 부트 스트랩이 있습니다. 다른 것들이 주변에 와서 약간 중복되어 보입니다.
참고 URL : https://stackoverflow.com/questions/14546709/what-is-bootstrap
'development' 카테고리의 다른 글
| Xcode 10 오류 : 여러 명령 생성 (0) | 2020.02.12 |
|---|---|
| Android에서 INSTALL_FAILED_INSUFFICIENT_STORAGE 오류에 대한 솔루션 (0) | 2020.02.12 |
| maven이 "MyRepo의 업데이트 간격이 경과 할 때까지 해결을 다시 시도하지 않습니다"라고 말하면 해당 간격은 어디에 지정됩니까? (0) | 2020.02.12 |
| 아파치에있는 httpd.conf 파일이 손실 됨 (0) | 2020.02.12 |
| 대소 문자를 구분하지 않는 문자열 비교는 어떻게합니까? (0) | 2020.02.12 |