Bootstrap은 프런트 엔드 개발을 위해 Twitter에서 출시한 오픈 소스 툴킷입니다. 트위터 디자이너 Mark Otto와 Jacob Thornton이 개발한 CSS/HTML 프레임워크입니다.
는 웹 페이지를 만들기 위한 프레임워크(현재 가장 인기 있는 웹 프런트 엔드 프레임워크)입니다. 즉, HTML 태그를 작성하고 해당 클래스를 호출하기만 하면 고급 웹 페이지를 빠르게 만들 수 있습니다. 호환성 문제에 대해 걱정할 필요가 없습니다. 선택할 수 있는 스타일이 다양합니다!
예를 들어 웹사이트 네비게이션을 만들어야 하잖아요? 직접 작성한다면 코드를 많이 작성해야 하지만, 부트스트랩 프레임워크를 사용해서 작성한다면 HTML 태그와 수업 이름을 불러주세요!
부트스트랩은 어떤 용도로 사용되나요?
기능:
부트스트랩이 제공하는 스타일과 구성요소를 사용하여 웹사이트를 빠르게 작성할 수 있습니다.
정의된 클래스, 즉 클래스 이름만 참조하면 됩니다. 매우 아름다운 스타일의 웹 페이지를 가지고 있으며 적응성을 지원하는 매우 좋은 프레임워크입니다.
간단히 말하면:
은 웹 사이트의 프런트 엔드 페이지를 빠르게 구축하기 위한 오픈 소스 프로젝트(Jquery 기반)입니다. 관련 클래스, 태그 이름 등의 의미만 이해하면 되며, 페이지를 구축할 때 부트스트랩의 JS, CSS 등을 가져오면 해당 효과가 표시됩니다.
예: HTML 설명: 약어 ; Bootstrap은 약어 및 약어 위로 마우스를 가져갈 때 전체 내용을 표시하여 HTML 요소에 대한 향상된 스타일을 구현합니다. 약어 요소에는 제목 속성이 있으며 밝은 점선 프레임으로 나타납니다. 마우스를 그 위로 이동하면 "물음표"가 있는 포인터로 변합니다.
위의 효과를 내기 위해 단락 텍스트에 특정 단어나 문구가 필요한 경우 해당 형식으로 작성하면 됩니다. 추가 class="initialism"은 글꼴 크기를 작게 만드는 것입니다. 그렇지 않으면 필요하지 않습니다. 반면에, 부트스트랩이나 기타 유사한 프레임워크를 시도하지 않는다면 그러한 효과를 직접 작성해야 하며, 이는 개발하는 데 오랜 시간이 걸립니다. 또 다른 예는 비슷한 Jquery의 easyui입니다.
부트스트랩 파일 패키지에 대한 간략한 소개
파일 이름:
bootstrap.css bootstrap.min.css bootstrap-responsive.css bootstrap-responsive.min.css bootstrap.js bootstrap.min.js
설명:
bootstrap.css는 압축되지 않은 완전한 부트스트랩 스타일 시트이며 개발 중 디버깅에 사용할 수 있습니다
부트스트랩. min.css는 압축된 부트스트랩 스타일 시트로, 내용은 bootstrap.css와 동일하지만, 중간에 불필요한 공백이나 기타 내용이 삭제되어 bootstrap.css보다 파일 크기가 작아집니다. 웹사이트 배포 시 참조하며, 이 파일을 참조하면 bootstrap.css
bootstrap-Response.css를 참조할 필요가 없습니다. 웹사이트가 프로젝트인 경우 반응형 레이아웃을 부트스트랩 프레임워크에 적용한 후 필요한 CSS 스타일 시트입니다. 반응형 디자인을 수행하지 않을 것이므로 이 CSS를 참조할 필요가 없습니다.
bootstrap-Response.min.css는 bootstrap.min.css와 동일한 기능을 가지고 있습니다. bootstrap-Response.css의 압축 버전입니다.
bootstrap.js는 bootstrap의 영혼이자 모든 js 명령어의 모음입니다. bootstrap.min의 경우 부트스트랩의 모든 js 효과가 이 파일에 의해 제어되는 것을 볼 수 있습니다. 이 파일은 개발 중 디버깅을 위한 압축되지 않은 버전이기도 합니다.
bootstrap.min.js는 bootstrap.js의 압축 버전입니다. bootstrap.js와 동일하지만 파일 크기가 훨씬 작습니다. 웹 사이트 배포 시 bootstrap.js 대신 이 파일을 참조하면 됩니다~~
관련 권장 사항: "bootstrap tutorial"
위 내용은 부트스트랩은 어디에 사용되나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!