Drupal 8 테마로 Twitter 부트 스트랩 설치 및 사용 방법

소개 : Drupal 8의 Twitter 부트 스트랩 테마

이 튜토리얼은 새로운 사용자가 설치하도록 안내합니다 & 트위터 사용 부트 스트랩 테마로 드루팔 8 단축 코드를 포함한 웹 사이트 CSS 빵 부스러기, 탐색 모음 템플릿, & 툴팁.


그만큼 부트 스트랩 에 대한 모듈 드루팔 8 구현 부트 스트랩 3 필요한 파일에 jsDelivr CDN을 사용하거나 sites / * / themes 디렉토리에있는 코드의 로컬 호스팅을 사용하는 CMS 프레임 워크.

트위터 부트 스트랩 에 대한 테마 드루팔 8 관습 포함 CSS 스타일링 버튼, 표, 레이블, 배지, 드롭 다운 메뉴, 탐색 모음, 경고, 패널, 우물에 대한 단축 코드, & 이미지 회전식 메뉴.

1 단계 : 다운로드, 설치, & 부트 스트랩 테마 활성화

스타트: 드루팔 8 웹 사이트로 이동 관리자 / 테마 / 설치 에 대한 테마 파일을 업로드 드루팔 부트 스트랩. 설치용 zip 파일은 다음 위치에서 다운로드 할 수 있습니다.

  • 다운로드 : https://www.drupal.org/project/bootstrap

다음: 로 이동 관리자 / 모양 그리고 설정 부트 스트랩 기본 테마.

끝: 새 구성을 저장하고 “설정” 고급 옵션에 액세스하기위한 링크.

2 단계 : D8 관리자에서 테마 설정 구성

스타트: 로 이동 관리자 / 모양 / 설정 / 부트 스트랩 에 대한 기본 설정을 검토 트위터 부트 스트랩 테마. 새 파일을 업로드하여 로고 이미지 변경 & 설정을 저장.

다음: CDN 설정을 검토하십시오. 트위터 부트 스트랩 3.0 테마에 필요한 JavaScript 파일 기본값은 jsDelivr. 고르다 “없음”파일을 로컬로 호스팅하려는 경우.

끝: 버튼, 이미지, 표의 테마 설정 검토, & 다른 구성 요소는 관심 분야와 일치하는 스타일 선택을 선택합니다.. “이미지에 둥근 모서리를 사용하십시오” JavaScript로.

3 단계 : CSS 변경을위한 Drupal 하위 테마 작성.

스타트: 만들 때 CSS 로 변경 드루팔 8 테마 파일을 추가하거나 새 사용자 정의 템플릿 추가 트위터 부트 스트랩 업그레이드 호환성을 유지하기 위해.

다음: 그만큼 트위터 부트 스트랩 테마 3 제공 스타터 킷 하위 테마에 대한 선택 :

  • CDN 스타터 킷
  • 적은 스타터 킷
  • 사스 스타터 킷

다음: 하나를 선택한 다음 파일을 테마 / 부트 스트랩 / 스타터 킷 선택한 테마 이름을 가진 새 폴더에 디렉토리, 즉. “신화”.

구성 : 서브 테마 파일 편집 :

다음: 서브 테마 디렉토리에서 다음 파일을 찾으십시오.

  • ./THEMENAME/THEMENAME.info.yml.
  • ./THEMENAME/THEMENAME.starterkit.yml
  • ./THEMENAME/THEMENAME.libraries.yml
  • ./THEMENAME/THEMENAME.theme.
  • ./THEMENAME/config/install/THEMENAME.settings.yml
  • ./THEMENAME/config/schema/THEMENAME.schema.yml

구성 : 변경 테마명 각 파일 제목의 값을 테마 값, 즉 서버에 복사 된 하위 테마 디렉토리에 사용 된 테마 이름.

다음: 코드 편집기에서 위에 나열된 하위 테마 파일을 개별적으로 열고 변수를 변경하십시오. 테마명 자신의 하위 테마를 반영하는 데 사용됩니다 (예 :., “신화”).

힌트: 각 .yml 파일의 하위 테마 변수에서 이름, 설명 및 기타 값을 변경하여 사용자 정의 할 수 있습니다. 드루팔 8 관리자 페이지.

구성 : 라이브러리 확장자에서 이름을 변경하십시오. 테마 / 프레임 워크

구성: 서브 테마 구성에서 이름을 변경하십시오. /THEMENAME/config/schema/THEMENAME.schema.yml

구성 : 이름 변경 THEMENAME. 설정 ‘THEMETITLE 설정’ 사용자 정의 테마 변수와 일치시킵니다. 즉. “mytheme.settings”.

힌트: 새 서브 테마 디렉토리의 이름이 지정된 경우 "신화" 위의 모든 변수는 신화 경우에 테마명 발견.

  • 예: /mytheme/mytheme.info.yml

끝: 서브 테마 패키지에서 모든 변수가 변경되면 관리자 / 모양 새로운 하위 테마를 기본값으로 설정.

4 단계 : 부트 스트랩 레이아웃 모듈 설치

스타트: 더욱이 드루팔 8 와 개발 부트 스트랩 테마 & 하위 테마 패키지는 사용자 정의를 포함 할 수 있습니다. CSS 페이지, 블록, & 뷰 및 사용자 정의 하위 테마 템플릿 파일.

  • 다운로드 : https://www.drupal.org/project/bootstrap_layouts

힌트: 설치 부트 스트랩 레이아웃 향상된 템플릿 선택을위한 모듈 드루팔 8.

다음: 로 이동 관리자 / 구조 / 유형 / 관리 / * / 디스플레이 & 기본보기에서 각 컨텐츠 유형의 레이아웃을 선택하십시오. 고르다 “부트 스트랩” & 메뉴에 제공된 디스플레이 옵션 중 하나.

구성 예-부트 스트랩 템플릿 모듈 :

  • 컨텐츠 유형의 디스플레이 구성 페이지로 이동하십시오..
  • 고르다 "세 열 쌓아" 레이아웃 설정에서.
  • 로 이동 모듈 / bootstrap_layouts / bs-3col 스택 폴더.
  • 모듈에서 생성 한 템플릿 파일에 액세스 & 다운로드.
  • 복사 bs-3 콜 스택 하위 테마 폴더로 재정의.
  • 사용자 정의 디자인을 위해 데스크탑 코드 편집기에서 템플릿 파일 수정.

끝: 사용하여> 부트 스트랩 템플릿 구성 단위, 드루팔 8 웹 개발자는 CSS를 통합 한 CMS 웹 사이트 페이지와 함께 사용할 사용자 지정 템플릿을 만들 수 있습니다 & JavaScript가 포함 된 HTML 코드.

5 단계 : 사용자 정의 페이지 스타일에 CSS 단축 코드 사용

스타트: 사용하다 >트위터 부트 스트랩 3.0 컨테이너 요소, 이동 경로, 버튼, 양식, 메뉴, 탐색 모음을 추가하기위한 사용자 지정 템플릿 파일의 CSS 단축 코드, & 스타일링이있는 기타 구성 요소.

CSS 짧은 코드-트위터 부트 스트랩 3.0

컨테이너 요소 :

또는

점보트론 :

제목 텍스트-큰 유형

Lorem ipsum dolor는 amet, conditetur adipiscing elit, eiusmod tempor incididunt ut worke et dolore magna aliqua에 앉아 있습니다. 가장 좋은 veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Volistate velit esse cillum dolore eu fugiat nulla pariatur에서 reprehenderit의 Duis aute irure dolor. Excepteur sint occaecat cupidatat nonidentident, culpa qui officiser deserunt mollit anim id est laborum에 햇볕에 쬐기.

버튼 :

기본
일 순위
성공
정보
경고
위험
링크

라벨 :

기본
일 순위
성공
정보
경고
위험

배지 :

내 프로필 42

썸네일 :

...

썸네일 라벨

버튼 버튼

반응 형 중단 점 :

// 초소형 장치 (세로 폰, 576 픽셀 미만)
// 부트 스트랩의 기본값이므로`xs`에 대한 미디어 쿼리가 없습니다.

// 소형 장치 (가로 전화, 576px 이상)
@ 미디어 (최소 너비 : 576px) {…}

// 중간 기기 (태블릿, 768 픽셀 이상)
@ 미디어 (최소 너비 : 768 픽셀) {…}

// 대형 기기 (데스크톱, 992 픽셀 이상)
@ 미디어 (최소 너비 : 992px) {…}

// 초대형 기기 (대형 데스크톱, 1200px 이상)
@media (최소 너비 : 1200px) {…}

끝: 개발자는 더 많은 것을 찾을 수 있습니다 CSS 단축 코드 트위터 부트 스트랩 3.0 대지:

    • 링크: https://getbootstrap.com/docs/3.3/components/
    • 링크: http://getbootstrap.com/docs/3.3/customize/

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me