이 게시물에서는 Bootstrap으로 사이트를 만드는 것으로 시작합니다., 우리가 쉽게 반응형으로 만들고 약간의 상호 작용을 제공할 수 있게 해주는 오픈 소스 프레임워크입니다. 기존에 추천한 개발환경 플러그인에 의해 자동 생성되는 기본 템플릿으로 수정이 필요합니다.
의 이전 기사 VS Codium을 설치하고 사용자 인터페이스를 스페인어로 번역하고 부트스트랩 플러그인을 설치하는 지침을 찾을 수 있습니다.
명심해야 할 두 가지:
- 우리가 사용하는 명령은 키보드 단축키이므로 입력해야 합니다. 복사/붙여넣기가 작동하지 않습니다.
- 콘텐츠 관리자가 HTML 코드를 표시하는 것을 허용하지 않으므로 스크린샷을 사용해야 합니다. 내가 업로드한 예제의 코드에 액세스할 수 있도록 깃허브에.
GitHub 저장소를 복제하는 방법
위대한 사람들을 나머지 우리와 구별하는 것은 그들이 문제에 반응하는 방식입니다. Richard Stallman은 그의 프린터 드라이버를 좋아하지 않았고 그들이 그것을 바꾸도록 허락하지 않았기 때문에 그는 자유 소프트웨어 운동을 시작했습니다. Linus Torvalds는 코드 공유 플랫폼에 대해 확신을 갖지 못하고 자신의 플랫폼을 만들었습니다. 자식.
사용자 상호 작용이 다운로드만 허용되는 기존 소프트웨어 배포 시스템과 달리, Git을 사용하면 시간이 지남에 따라 프로젝트의 발전을 따라갈 수 있습니다. 다른 사람들은 저장소를 복제하고 수정하며 원래 프로젝트의 개발자가 이를 통합하도록 제안할 수 있습니다. 승인되면 개발자는 파일을 다운로드하고 다시 업로드할 필요 없이 쉽게 작업을 수행할 수 있습니다.
Git을 기반으로 하는 여러 서비스가 있습니다. 저는 GitHub를 선택했습니다. VS Codium과 통합되기 때문입니다.
샘플 파일을 컴퓨터에 다운로드하려면 터미널에 패키지를 설치하기 위한 배포 지침에 따라 git 패키지를 설치하기만 하면 됩니다.
그런 다음 다음 명령을 입력합니다.
나는 문서 폴더에 파일을 저장하는 것을 선호하므로 다음으로 디렉토리를 변경합니다.
cd Documentos
그런 다음 다음을 사용하여 파일을 복제합니다.
git clone https://github.com/dggonzalez1971/bootstrap.git
나머지 기사 각각에서 이 단계를 상기시켜 드리겠습니다. 이 방법으로 예제 파일이 업로드될 때 업데이트할 것이기 때문입니다.
파일을 보려면 파일 탐색기를 열고 폴더를 찾으십시오. 부트스트랩.
부트스트랩으로 사이트 만들기
코드를 수동으로 입력하는 것을 선호하는 경우 사이트를 저장할 폴더를 만드는 것부터 시작합니다. 원하는 이름을 입력할 수 있습니다.
그런 다음 다음 단계를 따릅니다.
- 메뉴로 가자 아카이브.
- 클릭 새 텍스트 파일.
- 클릭 저장.
- 우리는 우리가 만든 폴더를 찾고 파일 이름을 넣습니다. 예제1.html.
- 클릭 저장.
때로는 파일 탐색기 창이 VSCodium에 의해 숨겨질 수 있습니다.
확장 프로그램이 우리를 위한 기본 템플릿을 생성하도록 합시다. 이를 위해 우리는 입력합니다 !b5-$
그러면 examples 폴더에서 example1.html로 찾을 수 있는 코드가 생성됩니다.
다음이 표시됩니다.
이것은 부트스트랩 확장에 의해 생성된 코드입니다.
이 파일을 약간 변경하겠습니다. example2.html이라는 이름에서 수정 사항을 찾을 수 있습니다.
- 2행에서 eng을 es로 바꾸어 언어를 변경합니다. 이것은 사이트의 언어가 스페인어임을 검색 엔진에 나타냅니다.
- 6행에서 레이블 아래에 있는 텍스트를 변경합니다. 제목. 우리는 넣어 나의 첫 부트스트랩 사이트.
- 12행에서 태그 사이의 내용을 변경합니다. h1 로 부트스트랩으로 만든 사이트입니다.
다음으로 우리는 몇 가지 중요한 수정을 할 것입니다. 이러한 수정은 다음과 관련이 있습니다.
- 플러그인 개발자는 부트스트랩 버전을 따라갈 수 없으며 최신 버전이 있습니다.
- 부트스트랩 구성 요소에 대한 많은 옵션이 있으며 다른 옵션에 관심이 있습니다.
- 공식 문서에 따르면 Javascript 라이브러리에 대한 호출은 본문 태그 내부에 있어야 합니다.
예를 들어 2에서는 7행의 내용을 수정하고 8행과 9행을 삭제하고 나머지 내용을 업로드하여 넘버링 호환성을 유지했습니다. 그런 다음 줄 10의 끝을 클릭하여 새 줄 11을 만들고 Javascript 라이브러리에 대한 링크를 넣습니다.
코드를 이해하지 못하더라도 걱정하지 마십시오. 각 라인의 기능은 다음 글에서 설명하겠습니다.