부트 스트랩 튜토리얼


부트 스트랩 4 튜토리얼


부트 스트랩 는 모바일 반응 형 웹 사이트를보다 빠르고 쉽게 구축 할 수 있도록 도와주는 프런트 엔드 프레임 워크입니다. Twitter에서 처음 개발 한 Bootstrap은 이제 웹 응용 프로그램 개발에서 WordPress 테마에 이르기까지 모든 용도로 사용됩니다. 또한 완전 무료이며 다목적이며 직관적입니다..

Bootstrap을 사용하면 표준 HTML에서 복잡한 웹 페이지를 활용하여 필요에 따라 사용자 정의 할 수 있습니다. 부트 스트랩에는 회전 목마, 버튼, 툴팁 등과 같은 추가 기능을 제공 할 수있는 많은 jQuery 플러그인이 제공됩니다..

마지막으로 시간과 에너지를 절약 할 수있는 웹 페이지를 만들 수있는 많은 지름길을 제공합니다. 반응 형, 모바일 우선, 모든 최신 브라우저와 호환되는 HTML 및 CSS에 대한 기본 지식 만 있으면됩니다..

추신. 부트 스트랩은 초보자에게 완벽한 옵션이 아닙니다. 일부 HTML 및 CSS 지식이 도움이 될 것입니다. 또는 웹 사이트 빌더 또는 WordPress를 사용하여 웹 사이트를 만들 수 있습니다.

부트 스트랩을 사용하여 웹 사이트를 만드는 방법 (목차) :

  1. 1 단계: 설정 및 개요
    1. HTML 페이지 만들기
    2. CDN을 통해 부트 스트랩로드 또는 로컬로 호스트
    3. jQuery 포함
    4. 부트 스트랩 JavaScript로드
    5. 다 합쳐
  2. 2 단계: 방문 페이지 디자인
    1. 탐색 줄 추가
    2. 맞춤 CSS 포함
    3. 페이지 컨텐츠 컨테이너 작성
    4. 배경 이미지 및 사용자 정의 JavaScript 추가
    5. 오버레이 추가
    6. 페이지 제목과 본문을 포함
    7. CTA 버튼 만들기
    8. 3 열 섹션 설정
    9. 연락처 양식 추가
    10. 2 열 바닥 글 만들기
    11. 미디어 쿼리 추가
    12. 웹 사이트를 생생하게

부트 스트랩을 사용하여 웹 사이트를 만드는 총 시간 : 3-4 시간.
기술 수준 : 초급 ~ 중급

1 단계 : 설정 및 개요


부트 스트랩을 사용하려면 먼저 웹 페이지 인 개발 환경에 부트 스트랩을 통합해야합니다. 이를 위해 원격으로로드하거나 Bootstrap을 로컬로 다운로드하여 사용하는 두 가지 가능성이 있습니다. 그러나 두 가지 모두 먼저로드 할 무언가가 필요합니다..,

1. HTML 페이지를 만듭니다

첫 단계로 부트 스트랩을 사용할 간단한 HTML 템플릿을 기반으로 만들 것입니다. 이를 위해 가장 먼저 할 일은 프로젝트 파일을위한 컴퓨터 나 서버에 폴더를 만드는 것입니다. 이 경우 간단히 전화하겠습니다 부트 스트랩. 여기에 새 텍스트 파일을 만들어 호출하십시오. index.html. 원하는 텍스트 편집기로 엽니 다 (예 :. 메모장++) 그런 다음 아래 코드를 붙여 넣으십시오..





부트 스트랩 튜토리얼 샘플 페이지








계속 진행하기 전에 파일을 저장하는 것을 잊지 마십시오!

2a. CDN을 통한 부트 스트랩로드

이미 설명했듯이 Bootstrap은 주로 스타일 시트와 스크립트로 구성됩니다. 따라서 사용자 정의 글꼴과 같은 다른 자산과 같이 웹 페이지의 머리글과 바닥 글에로드 할 수 있습니다. 프레임 워크는이를위한 CDN (content delivery network) 액세스 경로를 제공합니다. 당신은 그것을 찾을 수 있습니다 부트 스트랩 다운로드 페이지, 더 아래에.

Bootstrap을 페이지로 가져 오려면 아래 코드를 템플릿 섹션.

이제 파일을 저장하면 파일을 여는 모든 브라우저가 자동으로 부트 스트랩 자산을로드합니다.

많은 사용자가 이미 브라우저 캐시에 프레임 워크를 가지고 있으므로 원격 방법을 사용하는 것이 좋습니다. 이 경우 사이트를 방문 할 때 다시로드하지 않아도되므로 페이지 로딩 시간이 단축됩니다. 결과적으로 이것은 라이브 사이트에 권장되는 방법입니다.

그러나 실험 및 개발을 위해 또는 인터넷 연결과 독립하고 싶다면 자신 만의 Bootstrap 사본을 얻을 수도 있습니다. 이 튜토리얼에서는 내가 게시하는 코드가 줄어들 기 때문에이 작업을 수행하고 있습니다..

2b. 로컬로 호스트 부트 스트랩

부트 스트랩을 설정하는 다른 방법은 하드 드라이브로 다운로드하여 파일을 로컬로 사용하는 것입니다. 원격 버전에 대한 링크와 같은 위치에 다운로드 옵션이 있습니다. 여기에서 컴파일 된 CSS 및 JS 파일을 가져와야합니다. 소스 파일이 필요하지 않습니다.

그렇게 한 후에 파일의 압축을 풀고 내용을 같은 디렉토리에 복사하십시오. index.html. 그 후, 다음과 같이 Bootstrap CSS를 프로젝트에로드 할 수 있습니다 :

여기에는 부트 스트랩 파일을 찾을 수있는 파일 경로가 포함되어 있습니다. 귀하의 경우 경로가 실제 설정과 일치하는지 확인하십시오. 예를 들어, 다른 버전의 부트 스트랩을 다운로드 한 경우 디렉토리 이름이 다를 수 있습니다.

3. jQuery 포함

Bootstrap의 모든 기능을 사용하려면 jQuery 라이브러리도로드해야합니다. 여기에서도 원격으로로드하거나 로컬로 호스팅 할 수 있어야합니다.

첫 번째 경우 최신 버전의 jQuery에 대한 링크를 찾습니다. 여기. 코드를 사용하기 전에 코드 줄을 아래에 두어 라이브러리를 페이지에로드 할 수 있습니다. 귀하의 페이지에.

대안 적으로, jQuery 다운로드 (마우스 오른쪽 버튼 클릭> 다른 이름으로 링크 저장…)를 풀고 프로젝트 폴더에 넣습니다. 그런 다음 파일과 같은 곳에 다음과 같이 포함하십시오.

다시, 경로가 설정과 일치하는지 확인하십시오.

4. 부트 스트랩 JavaScript로드

Bootstrap 설정의 마지막 단계는 Bootstrap JavaScript 라이브러리를로드하는 것입니다. 이들은 다운로드 한 버전의 프레임 워크에 포함되어 있으며 이전과 동일한 위치에서 원격 소스에 대한 링크를 찾을 수 있습니다. 그러나 스타일 시트와 다른 위치에로드합니다. 헤더 대신 jQuery 호출 직후 페이지 바닥 글로 이동합니다..

다음과 같이 원격으로 호출 할 수 있습니다.

또는 로컬 에서처럼 :

5. 모두 합치십시오

위의 단계를 올바르게 수행했다면 원격 솔루션에 다음과 같은 파일이 표시되어야합니다.

   부트 스트랩 튜토리얼 샘플 페이지         

또는 로컬에서 호스팅하는 경우 페이지 템플릿은 아래 코드와 유사해야합니다.

   부트 스트랩 튜토리얼 샘플 페이지         

그것이 당신이 가지고 있고 작업을 저장했다면, 이제 다음 단계로 넘어갈 준비가되었습니다..

2 단계 : 방문 페이지 디자인


물론, 그것은 많은 준비 작업이었습니다. 그러나 그렇게 힘들지는 않았습니까? 게다가 이제 재미가 시작됩니다.

현재 샘플 사이트로 이동하면 빈 페이지가 표시됩니다. 그것을 바꿀 시간.

1. 네비게이션 바 추가

가장 먼저 할 일은 페이지 상단에 네비게이션 바를 추가하는 것입니다. 이렇게하면 방문자가 사이트를 돌아 다니면서 나머지 페이지를 발견 할 수 있습니다.

이를 위해 우리는 네비게이션 바 수업. 이것은 중 하나입니다 기본 요소 부트 스트랩의. 기본적으로 반응하는 탐색 요소를 만들고 작은 화면에서는 자동으로 축소됩니다. 또한 브랜딩, 색 구성표, 간격 및 기타 구성 요소 추가를위한 기본 지원 기능을 제공합니다..

아래처럼 사용하고 바로 아래에 게시합니다. 꼬리표:

 심벌 마크   

코드에 대한 설명 :

  • navbar-expand-md — 탐색 막대가 수직 또는 햄버거 아이콘에서 전체 크기의 수평 막대로 확장되는 지점을 나타냅니다. 이 경우 부트 스트랩에서 768px보다 큰 화면으로 설정했습니다..
  • 탐색 바 브랜드 — 웹 사이트 브랜딩에 사용됩니다. 여기에 로고 이미지 파일을 포함시킬 수도 있습니다.
  • 네비게이션 바 토글 러 — 축소 메뉴의 토글 버튼을 나타냅니다. 작품 data-toggle = "collapse" 이 옵션은 다른 옵션 인 드롭 다운 메뉴가 아닌 햄버거 메뉴로 바뀌도록 정의합니다. 당신이 정의하는 것이 중요합니다 데이터 대상 CSS id로 ( #) 및 랩 사업부 실제와 같은 이름으로 네비게이션 바 요소.
  • navbar-toggler-icon — 아마 짐작할 수 있듯이 사용자가 작은 화면에서 메뉴를 열기 위해 클릭하는 아이콘이 생성됩니다..
  • navbar-nav — 수업
      메뉴 항목을 보유하는 목록 요소 후자는 탐색 항목탐색 링크.

    내가 왜 이렇게 많이 설명하니?

    그것이 부트 스트랩의 요점이기 때문입니다. HTML 및 CSS 클래스를 사용하여 요소를 빠르게 만들 수있는 이러한 표준이 모두 있습니다. 스타일을 제공하기 위해 CSS를 작성할 필요는 없습니다. 모든 것은 이미 Bootstrap 내에 설정되어 있습니다. 또한 모든 것이 기본적으로 모바일 반응 형입니다! 이것이 얼마나 유용한 지보기 시작하고 있습니까?

    위의 내용은 사이트에 탐색 모음을 추가하기에 충분합니다. 그러나 현재로서는 여전히 거의 보이지 않습니다..

    부트 스트랩 튜토리얼 탐색 모음 추가

    스타일링이 많지 않기 때문입니다. 추가 할 수있는 동안 기본 색상 (예를 들어, 네비게이션 바에 다음과 같은 클래스를 제공함으로써 bg-dark navbar-dark) 대신 우리는 우리 자신을 추가하고 싶습니다.

    2. 맞춤 CSS 포함

    다행히도 기본 스타일을 변경하려면 큰 스타일 시트 라이브러리를 사용하지 않고 직접 변경할 필요가 없습니다. 대신 WordPress 자식 테마와 마찬가지로 기존 스타일을 덮어 쓰는 데 사용할 수있는 고유 한 CSS 파일을 추가 할 수 있습니다.

    이를 위해 텍스트 편집기를 사용하여 빈 파일을 만들고 호출하십시오. main.css. 저장 한 후 다음과 같이 Bootstrap 사이트의 헤드 섹션에 추가하십시오.

    기본 디렉토리에있는 스타일 시트의 코드입니다. 당신이 내부를 배치하기로 결정하면 CSS 폴더에서 링크에 올바른 경로를 포함해야합니다.

    여기에서 사이트에 사용자 정의 CSS를 추가 할 수 있습니다. 예를 들어, 탐색 모음 및 해당 요소의 스타일을 지정하려면 다음과 같이 마크 업을 사용할 수 있습니다.

    신체 { 패딩 : 0; 여백 : 0; 배경 : # f2f6e9; } / * --- 탐색 모음 --- * / .탐색 모음 { 배경 : # 6ab446; } .탐색 링크, .탐색 바 브랜드 { 색상 : #fff; 커서 : 포인터; } .탐색 링크 { 오른쪽 여백 : 1em! 중요; } .탐색 링크 : 호버 { 색상 : # 000; } .탐색 모음 축소 { 정당화 내용 : flex-end; }

    결과는 다음과 같습니다.

    부트 스트랩 튜토리얼 스타일 탐색 모음

    예전보다 더 좋아 보이지 않습니까?

    3. 페이지 컨텐츠 컨테이너 작성

    탐색 막대 다음에 원하는 것은 페이지 컨텐츠의 컨테이너입니다. navbar 태그 아래에 필요한 모든 것이 Bootstrap에서 매우 쉽습니다.

    주목 컨테이너 유체 수업. 이것은 기본 부트 스트랩 클래스 중 하나입니다. 에 적용 사업부 요소가 CSS를 자동으로 적용합니다..

    그만큼 -체액 part는 컨테이너가 화면의 전체 너비에 걸쳐 펼쳐지도록합니다. 또한 단지 컨테이너, 고정 너비가 적용되어 화면 양쪽에 항상 공간이 있습니다..

    그러나 이제 페이지를 새로 고침해도 개발자 도구를 사용하지 않는 한 아무 것도 표시되지 않습니다. 빈 HTML 요소 만 만들었 기 때문입니다. 이제 바뀌기 시작합니다.

    4. 배경 이미지 및 사용자 정의 JavaScript 추가

    이 부트 스트랩 자습서의 다음 단계로 방문 페이지 헤더에 대한 전체 화면 배경 이미지를 포함하려고합니다. 이를 위해 일부 jQuery를 사용하여 이미지를 화면 전체에 걸쳐 늘려야합니다..

    사용자 정의 CSS를 포함하는 것과 동일한 방식으로 수행합니다. 먼저 이름의 텍스트 파일을 작성하십시오. main.js 사이트 폴더 안에 넣습니다. 그런 다음 닫기 전에 전화하십시오 안에 태그 index.html.

    그런 다음이 코드를 복사하여 붙여 넣어

    전체 화면에서 요소 확장 :
    $ (document) .ready (function () { $ ( '. header'). height ($ (window) .height ()); })

    그런 다음 남은 것은 배경 이미지를 설정하는 것입니다. 당신은 이렇게 이렇게 할 수 있습니다 main.css:

    .헤더 { 배경 이미지 : url ( 'images / header-background.jpg'); 배경 크기 : 덮개; 배경 위치 : 중심; 위치 : 상대; }

    위의 경로로 지정된 위치에 충분한 크기의 이미지를 배치하면 다음과 유사한 결과를 얻을 수 있습니다.

    부트 스트랩 튜토리얼 헤더 배경 이미지 포함

    5. 오버레이 추가

    배경 이미지를 더욱 세련되게 만들기 위해 오버레이도 추가합니다. 이를 위해 방금 이전에 포함시킨 요소 안에 다른 div 요소를 만듭니다..

    그런 다음 사용자 정의 CSS 파일에 다음을 추가 할 수 있습니다.

    .오버레이 { 위치 : 절대; 최소 높이 : 100 %; 최소 폭 : 100 %; 왼쪽 : 0; 상단 : 0; 배경 : rgba (0, 0, 0, 0.6); }

    이렇게하면 이전에 입력 한 이미지에 멋진 오버레이가 만들어집니다.

    부트 스트랩 튜토리얼 오버레이 추가

    6. 페이지 제목과 본문을 포함 시키십시오

    이제 제목과 본문 텍스트 형태로 페이지 제목을 추가하고 싶을 것입니다. 그렇게하면 방문자는 자신이 어느 사이트에 있고 어떤 사이트에서 기대할 수 있는지 즉시 알게됩니다.

    이를 생성하려면 마지막 단계에서 설정 한 컨테이너 내부의 오버레이 아래에이 스 니펫을 추가하면됩니다.

    방문 페이지에 오신 것을 환영합니다!

    Lorem ipsum의 dolor는 amet, conditetur adipiscing elit에 앉습니다. Quisque interdum quam odio, quis placerat 및 luctus eu. Sed aliquet dolor id sapien rutrum, id vulputate quam iaculis. Phestra sem ullamcorper에서 Suspendisse conmitetur mi id libero fringilla.

    그런 다음에 다음 마크 업을 추가하십시오. main.css.

    .설명 { 왼쪽 : 50 %; 위치 : 절대; 상단 : 45 %; 변형 : 번역 (-50 %, -55 %); 텍스트 정렬 : 가운데; } .설명 h1 { 색상 : # 6ab446; } .설명 p { 색상 : #fff; 글꼴 크기 : 1.3rem; 선 높이 : 1.5; }

    그러면 방문 페이지가 다음과 같이 보입니다.

    부트 스트랩 튜토리얼 페이지 제목 및 설명 추가

    정말 모이기 시작하지 않습니까??

    7. CTA 버튼 만들기

    클릭 유도 문안 없이는 대부분 방문 버튼이 없으며 대부분 버튼 형태입니다. 이러한 이유로, 우리는이 부트 스트랩 튜토리얼에서 생성하는 방법을 포함시키지 않을 것입니다.

    이 프레임 워크는 버튼을 빠르고 쉽게 만들 수있는 다양한 도구를 제공합니다. 많은 예제를 찾을 수 있습니다 여기. 제 경우에는 페이지 내용 바로 아래에 다음 마크 업을 추가합니다. 컨테이너:

    그 외에도이 CSS를 main.css:

    .설명 버튼 { 경계 : 1px 고체 # 6ab446; 배경 : # 6ab446; 국경 반경 : 0; 색상 : #fff; } .설명 버튼 : 호버 { 국경 : 1px 단색 #fff; 배경 : #fff; 색상 : # 000; }

    저장 후 다시로드하면 다음과 같습니다.

    부트 스트랩 튜토리얼 클릭 유도 문안 버튼

    8. 3 열 섹션 설정

    나는 상황이 어떻게 형성되고 있는지에 대해 이미 매우 만족합니다. 그러나 아직 페이지가 완료되지 않았습니다. 다음으로, 추가 정보를 위해 기본 컨텐츠 아래에 세 개의 열을 작성하려고합니다. 이것은 Bootstrap의 장점으로 강력합니다. 그리드 만들기. 이 경우이를 수행하는 방법은 다음과 같습니다.

    로렘 ipsum

    Lorem ipsum의 dolor는 amet, conditetur adipiscing elit에 앉습니다. Quisque interdum quam odio, quis placerat 및 luctus eu. Sed Aliquet Dolor ID Sapien Rutrum, ID vulputate quam iaculis.

    로렘 ipsum

    Lorem ipsum의 dolor는 amet, conditetur adipiscing elit에 앉습니다. Quisque interdum quam odio, quis placerat 및 luctus eu. Sed Aliquet Dolor ID Sapien Rutrum, ID vulputate quam iaculis.

    가장 먼저 눈에 띄는 것은 요소. 그리드의 컨테이너 역할을하는 열을 생성 할 때마다 필요합니다..

    열은 모두 몇 가지 클래스가 있습니다. col-lg-4, col-md-4열 SM-12. 이것은 우리가 다른 화면에서 가질 열과 크기를 다루고 있음을 나타냅니다..

    이것을 이해하려면 부트 스트랩 그리드에서 한 행의 모든 ​​열이 항상 숫자 12에 합산됨을 알아야합니다. 따라서 위의 클래스를 제공하면 화면의 3 분의 1이 대형 및 중형에서 차지한다는 것을 의미합니다 화면 (12를 3으로 나눈 값은 4)이지만 소형 장치의 경우 전체 화면 (12 열 중 12 열).

    이해가 되나요??

    또한 이미지를 포함하고 .이미지 유체 그들에게 수업. 페이지를 볼 수있는 화면과 함께 크기가 조정되도록 반응 형으로 만들기위한 것입니다..

    그 외에도 일반적인 장소에 다음과 같은 스타일이 포함되어 있습니다.

    .기능 { 여백 : 4em auto; 패딩 : 1em; 위치 : 상대; } .기능 제목 { 색깔 : # 333; 글꼴 크기 : 1.3rem; 폰트 가중치 : 700; 여백-하단 : 20px; 텍스트 변환 : 대문자; } .특징 img { -웹킷 박스 섀도우 : 1px 1px 4px rgba (0, 0, 0, 0.4); -moz-box-shadow : 1px 1px 4px rgba (0, 0, 0, 0.4); 상자 그림자 : 1px 1px 4px rgba (0, 0, 0, 0.4); 여백-하단 : 16px; }

    기본 컨텐츠 아래에 추가하고 저장하면 다음과 같습니다.

    부트 스트랩 튜토리얼 세 열 섹션 추가

    9. 연락 양식 추가

    새 필드 중 하나가 여전히 비어 있음을 알 수 있습니다. 연락처 양식을 추가하려고했기 때문에 이것은 의도적 인 것입니다. 방문 페이지에서 방문자가 연락 할 수 있도록하는 것은 매우 일반적인 방법입니다..

    부트 스트랩에서 연락처 양식을 만드는 것은 매우 쉽습니다.

    연락하기!

    이제는 더 이상 열을 만들기 위해 마크 업을 설명 할 필요가 없습니다. 나머지 마크 업의 의미는 다음과 같습니다.

    • 양식 그룹 — 서식을 위해 양식 필드를 감싸는 데 사용.
    • 폼 컨트롤 — 입력, 텍스트 영역 등과 같은 양식 필드를 나타냅니다..

    양식으로 더 많은 것을 할 수 있습니다. 선적 서류 비치. 그러나 데모 목적으로는 위의 것으로 충분합니다. 나머지 빈 열 안에 넣고 스타일을 추가하십시오. main.css:

    ..form-control 특징, .기능 입력 { 국경 반경 : 0; } .기능 .btn { 배경색 : # 589b37; 경계 : 1px 고체 # 589b37; 색상 : #fff; 여백 : 20px; } ..btn : 호버 { 배경색 : # 333; 테두리 : 1px 단색 # 333; }

    그렇게하면 다음과 같은 형태가됩니다.

    부트 스트랩 튜토리얼 연락처 양식 포함

    10. 2 열 바닥 글 만들기

    자, 이제 부트 스트랩 튜토리얼의 끝을 향해 가고 있습니다. 방문 페이지에 마지막으로 추가하려는 것은 두 개의 열이있는 바닥 글 섹션입니다. 지금까지는 더 이상 큰 문제가되지 않습니다..

    추가 정보

    Lorem ipsum의 dolor는 amet, conditetur adipiscing elit에 앉습니다. Quisque interdum quam odio, quis placerat 및 luctus eu. Sed Aliquet Dolor ID Sapien Rutrum, ID vulputate quam iaculis.

    Lorem ipsum의 dolor는 amet, conditetur adipiscing elit에 앉습니다. Quisque interdum quam odio, quis placerat 및 luctus eu. Sed Aliquet Dolor ID Sapien Rutrum, ID vulputate quam iaculis.

    접촉

    1640 Riverside Drive, 힐 밸리, 캘리포니아
    [이메일 보호]
    + 01234567 88
    + 01234567 89

    일반적인 그리드 마크 업 외에도이 섹션에서는 부트 스트랩으로 타이포그래피를 수정할 수있는 몇 가지 가능성을 강조합니다.

    • 텍스트 대문자
    • 글꼴 가중치
    • 텍스트 센터

    그들이하는 클래스의 이름에서 분명해야합니다. 부트 스트랩 및 타이포그래피에 대한 자세한 정보를 찾을 수 있습니다 여기.

    위의 스타일 외에도 다음과 같은 스타일을 사용할 수 있습니다.

    .페이지 바닥 글 { 배경색 : # 222; 색깔 : #ccc; 패딩 : 60px 0 30px; } .바닥 글 저작권 { 색깔 : # 666; 패딩 : 40px 0; }

    결과적으로 다음과 같이 아름다운 바닥 글이 나타납니다.

    부트 스트랩 튜토리얼 포함 페이지 바닥 글

    11. 미디어 쿼리 추가

    페이지는 기본적으로 준비되어 있습니다. 또한 전적으로 책임이 있습니다. 그러나 브라우저의 모바일보기에서 상단 섹션이 아직 제대로 나오지 않습니다..

    모바일 디자인의 부트 스트랩 튜토리얼 오류

    그러나 걱정할 필요없이 간단한 미디어 쿼리를 사용하여이를 쉽게 수정할 수 있습니다. 부트 스트랩 사이트를 컴파일하기 위해 SASS를 사용하지 않는 한 다른 인스턴스와 동일한 방식으로 작동합니다. 당신은 단지 명심해야 사전 설정 중단 점 부트 스트랩에 포함.

    결과적으로 위의 문제를 해결하기 위해 다음과 같은 코드를 포함시킬 수 있습니다.

    @ 미디어 (최대 너비 : 575.98px) { .설명 { 왼쪽 : 0; 패딩 : 0 15px; 위치 : 절대; 상위 10 개%; 변형 : 없음; 텍스트 정렬 : 가운데; } .설명 h1 { 글꼴 크기 : 2em; } .설명 p { 글꼴 크기 : 1.2rem; } .기능 { 여백 : 0; } }

    그 후 모든 것이 있어야합니다 :

    부트 스트랩 튜토리얼 미디어 추가 쿼리

    12. 웹 사이트를 웹 호스트에 업로드

    당신이 따라왔다면, 당신은 이제 모바일에서도 완벽하게 반응하는 완성 된 웹 사이트로 설정되어야합니다.

    그러나 지금까지는 아무도 볼 수 없습니다. 이를 변경하려면 웹 호스트와 도메인이 필요합니다. 이렇게하면 사람들이 웹 사이트 주소를 브라우저 표시 줄에 입력 한 다음 새로 제작 된 부트 스트랩 웹 사이트에 온라인으로 액세스 할 수 있습니다.

    그렇게하려면 사이트를 서버에 업로드해야합니다. FTP 클라이언트를 사용하여 그렇게 할 수 있습니다 FileZilla. 호스팅 제공 업체에서 FTP 호스트 주소, 사용자 이름 및 비밀번호를 수집하여 서버에 원격으로 연결하십시오. 당신이 할 때, 당신은 현재 거기에있는 파일과 디렉토리를 볼 수 있어야합니다.

    ftp를 통해 부트 스트랩 웹 사이트를 서버에 업로드

    도메인이 가리키는 디렉토리 (일반적으로 루트 디렉토리)로 이동하십시오. 이 작업을 완료하면 하드 드라이브에서 Bootstrap 파일이있는 폴더를 찾아 내부의 모든 파일을 표시 한 다음 서버로 드래그하여 업로드를 시작하십시오. 연결 속도와 파일 수 및 크기에 따라 프로세스를 완료하는 데 시간이 걸립니다..

    그러나 완료되면 도메인에 액세스하면 브라우저 창에서 완성 된 사이트를 볼 수 있어야합니다.

    부트 스트랩 튜토리얼 완료된 랜딩 페이지

    몇 줄의 코드에 나쁘지 않습니다.?

    사용자 정의 CSS 및 JavaScript를 포함하여 페이지의 전체 코드를 원한다면 여기에서 모두 다운로드 할 수 있습니다. 이것으로 Bootstrap으로 랜딩 페이지를 만드는 데 필요한 모든 것.

    결론

    부트 스트랩은 누구나 무료로 사용할 수있는 오픈 소스 프런트 엔드 개발 프레임 워크입니다. 디자인을 신속하게 프로토 타입 화하고 웹 페이지를 작성하며 일반적으로 시작됩니다..

    초보자를위한이 부트 스트랩 자습서에서 보았 듯이 HTML, CSS 및 선택적 jQuery에 대한 기본 지식 만 있으면됩니다. WordPress를 사용하는 것만 큼 편안하지는 않지만 Bootstrap은 여전히 ​​웹 사이트를 만드는 유효한 대안입니다..

    이제 부트 스트랩 및 해당 구성 요소를 설정 및 설치하고 간단한 랜딩 페이지를 작성하고 기본 컨텐츠를 포함하고 스타일을 지정하는 방법에 대해 알고 있습니다. 탐색 메뉴를 만들고 배경 이미지를 설정하고 단추, 열 및 연락처 양식을 포함 할 수 있습니다..

    물론 배울 것이 더 있습니다.

    이 기본 부트 스트랩 튜토리얼 덕분에 이제 스스로 앞으로 나아갈 수있을 것입니다. 프레임 워크에 대해 자세히 알아 보려면 좋은 출발점이 있습니다. W3 학교. 그 외에도이 초보자 용 튜토리얼이 마음에 들었고 이에 대한 생각과 경험을 듣고 싶습니다..

    업데이트 : 또한 .pdf 및 .png 버전의 초보자를위한 부트 스트랩 치트 시트를 만들었습니다..

    위의 부트 스트랩 튜토리얼에 대한 생각이 있습니까?? 질문, 의견, 요청? 아래의 의견 섹션에서 알려주십시오!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map