Bootstrap은 Twitter에서 출시한 프런트 엔드 개발용 오픈 소스 툴킷으로, 이러한 구성 요소를 기반으로 아름답고 완전한 기능을 갖춘 웹 사이트를 빠르게 구축할 수 있습니다.
최근 부트스트랩 중국어 웹사이트를 통해 그 중 일부 사용법을 배웠는데, 그 간단한 사용법과 명확한 로직, 우아한 인터페이스에 깊은 매력을 느꼈습니다. 하지만 튜토리얼을 통해 기본적인 사용법을 간략하게 이해할 수 있을 뿐이지만, 일부 상용 수준의 애플리케이션을 구축하기에는 여전히 어느 정도 거리가 있습니다. 특히 우리 개발자들에게 더 필요한 것은 필요한 템플릿을 구축하기 위한 참조로서 보다 완전한 사례를 얻는 것입니다.
인터넷에는 부트스트랩을 기반으로 한 템플릿과 테마가 많이 있지만 일반적인 문제는 무료인 것은 꽤 간단하고, 더 완전한 것들은 요금을 청구해야 하고, 요금 청구 절차도 더 번거로워서 제가 원하는 것은 완벽한 템플릿의 2차 개발에는 몇 가지 어려움이 있을 것입니다.
부스트랩 테마와 템플릿을 얻는 더욱 편리한 방법을 살펴보겠습니다.
1. 템플릿 웹사이트에 들어가서 템플릿을 선택하여 미리보기 인터페이스로 들어갑니다.
미리보기 인터페이스로 들어간 후 F12 도구 모음을 누릅니다. 브라우저 하단에 개발자 도구가 나타납니다. 툴바에서 리소스 버튼을 클릭하면 웹사이트의 프레임 폴더와 필요한 그림, 스크립트, 스타일을 볼 수 있습니다. 글꼴, 이미지, 스크립트, 스타일시트의 네 가지 폴더가 있습니다.
2 먼저 컴퓨터 폴더에 새로운 웹사이트 폴더를 생성하고, 그 폴더 아래에 새로운 css,font,img,js 폴더를 생성합니다.
3. 브라우저로 돌아가서 다양한 방법으로 웹사이트 파일을 다운로드합니다.
글꼴: 파일을 마우스 오른쪽 버튼으로 클릭하고 새 탭에서 열기 링크를 선택합니다. 파일이 다운로드 인터페이스로 들어갑니다. 새로 생성된 웹사이트 폴더 아래에 있는 글꼴 폴더를 다운로드하세요.
이미지: 파일을 마우스 오른쪽 버튼으로 클릭하세요. 링크를 새 탭에 추가하면 파일이 보기 페이지로 들어갑니다. 해당 페이지는 새로 생성된 로컬 웹사이트 폴더
아래의 img 폴더에 있습니다. 스크립트: 파일을 마우스 오른쪽 버튼으로 클릭하고 다른 이름으로 저장...을 선택합니다. 파일 다운로드 인터페이스로 들어갑니다. 새로 생성된 로컬 폴더 아래에 js 폴더를 다운로드합니다.
스타일시트: 기본적으로 새로 생성된 웹사이트 폴더에 파일을 로컬로 다운로드합니다.
이 시점에서 웹사이트는 이제 기본적으로 html 파일을 다운로드할 수 있습니다.
4. F12로 브라우저의 개발자 도구를 닫고, 웹 페이지의 빈 공간에서 Ctrl+S(웹 페이지를 다른 이름으로 저장)를 누르고, html만 저장하도록 선택하고, 웹 페이지의 도메인 이름에 따라 파일 이름을 변경한 후 저장합니다. 로컬로 새로 생성된 웹사이트 폴더의 루트 디렉터리에 있습니다. 웹사이트 아래의 모든 웹페이지를 다운로드하려면 이 방법을 따르세요.
5 위의 방법에 따르면 기본적으로 웹사이트 템플릿을 완전히 다운로드할 수 있지만 때로는 로컬 웹사이트 폴더에서 웹페이지 파일을 열 때 일부 사진을 로드할 수 없거나 일부 글꼴이 올바르게 표시되지 않습니다. 웹사이트일 수 있습니다. 폴더 경로나 이름이 올바르지 않습니다. 웹페이지 코드를 통해 폴더 경로를 정리해야 합니다. 브라우저 인터페이스로 돌아가서 F12를 눌러 개발자 도구를 열고 Elements를 통해 웹 페이지 코드를 봅니다. 아래 그림에서 웹 페이지 파일이 다운로드되었지만 js, 이미지, CSS 및 글꼴을 볼 수 있습니다. 처음에 생성한 폴더가 웹페이지의 코드와 일치하지 않습니다. 이때 웹페이지의 코드에 맞게 파일을 정렬하여 폴더 경로를 재정렬해야 합니다.
6. 준비가 완료되면 부트스트랩 템플릿을 무료로 받을 수 있으니 지금 사용해 보세요!
Bootstrap과 관련된 더 많은 기술 기사를 보려면 Bootstrap Tutorial 칼럼을 방문하여 알아보세요! 부트스트랩 템플릿을 무료로 다운로드하고 싶다면 부트스트랩 템플릿 칼럼을 방문하세요!
위 내용은 부트스트랩 템플릿을 무료로 다운로드하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!