이 강의로 돌아 가시면 부트 스트랩을 사용하여 가상의 시작을위한 방문 페이지를 만들 것입니다.
시작은 완벽한 경기라고합니다.
아주 재밌 네요.
나는 그것이 인간 고양이과 데이트 앱이라는 것을 알고 있으며, 인간 고양이와 데이트하는 것이 상대적으로 무해 할 수도 있다는 것을 해석하기 위해 여러분에게 맡겨 놓을 것입니다. Sheldrick 고양이와 외로운 사람을 어울리는 것은 다른 것일 수 있습니다.
나는 모른다.
사이트를 둘러보고 그녀에게 편지 쓰기를 시작하겠습니다.
나는 정말로 몇 가지 특징을 지적하는 것입니다.
여기에는별로 없습니다.
우리는 실제로 이것을 접하지 않았다. 아직 아무것도하지 않는다.
HD mounseers만이 사실입니다. 그러나 지금까지 우리가 다루었습니다.
그래서 우리는 접촉 길이에 관해 우리의 완벽한 매치 가정을 충분히 가지고 있습니다.
그들은 실제로 어디에도 가입하지 않고 오른쪽에 두 개의 작은 아이콘으로 로그인합니다. 거기에 우리는 그녀의 햄버거를 얻습니다.
나는 그것을 클릭 할 수있다.
그 모든 링크는 이제 그 햄버거 안에 있습니다.
그런 다음 우리는 중심에 머물고 전체 배경을 커버하는 큰 배경 이미지를 가지고 있습니다.
그래서 중간에 우리는 우리의 시작의 이름을 가지고 우리와 완벽하게 일치합니다. 그리고 우리는 캡션을 가지고 있습니다. 데이트 앱의 유일한 인간 피드.
그리고 나서 우리는 약간의 H R 수평 규칙을 가지고 아이콘을 시작하는 버튼을 가지고 있습니다.
그리고이 크기를 줄이면 모든 것이 중간에 머물러있게되고 페이지 위로 아래쪽으로 텍스트가 시작되는 모바일 장치에 어색한 레이아웃이 생기지 않도록 조금 위로 이동합니다.
그래서 우리는 그것을 조금 움직이고 중심에 머물러 있습니다.
이 레이아웃은 정말 쉽고 부트 스트랩이 쉽지만 방문 페이지의 경우 비교적 효과적입니다.
우리가 가지고있는 모든 것은 전체 너비를 차지하는 단일 컬럼입니다.
그래서이 칼럼은 12 단위로 나뉩니다.
우리는 하나의 열을 12 개 단위로 나누는 것이 아니라 그 열의 모든 것을 가운데에 배치합니다.
시작하겠습니다.
우리가해야 할 일은 파일을 만드는 것입니다.
DML에서 색인이라고하는 색인이 있습니다.
이것을 정기적 인 상용구 완벽한 경기에 추가하고 부트 스트랩에 추가하여 시작하고 CDN 비트 스트립 CDN을 사용하겠습니다.
SS와 Javascript를 여기서 보자.
우리는 작업 표시 줄에 해당 자바 스크립트가 필요합니다.
그래서 우리는 태그를 연결해야합니다.
그런 다음 자바 스크립트를 얻습니다.
알았다.
이것을 스크립트 태그 인 맨 아래에 놓은 다음 소스를 사용자와 동일하게 설정합니다.
이제 우리가 이것을 열면 콘솔을 열어서 작은 문제가 생겼습니다. Jay 쿼리가 필요하고 bootstrap 자바 스크립트도 필요합니다.
탐색 바에서 우리가 필요로하는 교훈을 기억하십시오.
퀘 레이.
그래서 우리는 CDN을 얻을 것입니다.
수정 된 버전을 사용하겠습니다.
해당 URL을 복사하십시오.
그리고 마침내 여기로 돌아가서 자바 스크립트로 연결하기 전에해야만합니다.
그렇지 않으면 여전히 쿼리에 대해 알지 못하므로 먼저 쿼리를로드해야합니다.
이제 다시 시도하겠습니다.
화재 새로 고침.
우리는 아무런 오류도 보이지 않기 때문에 좋은 징후는 보이지 않습니다.
중간에있는 텍스트로 시작해 봅시다.
이 모든 내용은 여기에 있습니다.
그래서 우리는 컨테이너를 생성 한 다음 컨테이너 내부에 클래스 ECO 컨테이너를 div 행할 행이 필요합니다. 그리고 그 안에는 항상 그 행이 필요한 또 다른 div가 있습니다.
우리가 그리드 시스템을 사용할 때마다 우리 div는 열 대시 12와 동등한 클래스가 될 것입니다.
그리고 그것은 그 컨테이너를 가로 질러 줄 것입니다.
그리고 나서 그들은 완벽한 일치를 말하고 저장하는 H1을 갖게 될 것입니다.
그리고 새로 고침을 해봅시다.
그리고 우리가 아직 원하는 것은 아니며, 우리가해야 할 일이 몇 가지 있기 때문입니다.
첫 번째는 우리가 그 칸에 모든 것을 집중시킬 필요가 있다는 것입니다.
따라서 우리가 여기서 다루고있는 것을 조사해 보면 H1이 모든 것을 가로 질러가는 것을 볼 수 있습니다.
그리고 두 번째는 우리가 그것을 약간 밀어 내야한다는 것입니다.
패딩이나 여백을 추가하여 페이지 상단으로 이동하지 않아야합니다.
나머지 콘텐츠를 추가하여 시작하겠습니다.
그래서 우리는 유일한 인간 고양이 데이트 앱을 가지고 있으며 그것은 단지 H 3 일 것이고 우리는 그것이 우리가 원하는 어떤 요소이든지간에 실제로 놀 수 있습니다.하지만 H-3 인간 친화적 인 대시 고양이 데이트 앱으로 만들 것입니다.
그리고 나서 우리는 많이 보이지 않을 수평 규칙을 추가 할 수 있습니다. 그러나 사실 후에 스타일을 적용한 다음 해당 버튼의 클래스에 버튼을 추가 할 것입니다.
우리가 살펴 봅니다.
이것은 부트 스트랩 버튼 기본값이며 커다란 버튼입니다.
다시 가자.
따라서 우리는 PTEN과 컬러 기본값을 필요로하고 크기가 큰 LG와 크기 사이의 크기를 입력해야합니다. 여기서는 시작하는 텍스트를 추가하고 저장하는 방법을 알려 드리겠습니다.
괜찮아.
이제 우리는 우리의 내용을 다음에 그리지 만 가운데에 그리드가 있습니다.
그리고 나서 패딩에 초점을 맞추고 그것을 움직입니다.
그러나이 그리드 안의 중심에서 시작하여 더 쉽게하기 위해 div의 모든 것을 그룹화하여 각 것을 개별적으로 중앙에 배치 할 필요가 없습니다.
우리는 H-1과 3, 그리고 나서 버튼을 중앙에 배치해야합니다. 하나의 선으로 나누는 div와 center에서 그룹화 할 수 있습니다.
div를 만들어 보자. Cantet의 신분증을주고 그 안에 모든 것을 넣을거야.
그래서 H-1 세 살이 H.R.이고 버튼이 들여 쓰기되고 저장됩니다.
그래서 우리 스타일 시트에 추가하기 전에 페이지를 새로 고치면 아무 것도 다르게 보일 것입니다.
그래서 링크 태그를 추가하고 스타일 시트 애플리케이션을 호출 할 것입니다.
SS 아직 존재하지 않습니다.
그래서 그것을 구할 필요가 있습니다.
같은 디렉토리에 SS가 보입니다.
그리고 모든 h가 보라색 인 것처럼 간단한 것으로 시작합시다.
그냥 제대로 작동하는지 확인하십시오.
새로 고침하자.
앤드류는 보라색 H-1을 얻는다.
큰.
이제 Dave에 콘텐츠 아이디어를 추가하고 중심에두기로 선택하겠습니다.
그러니 그걸 없애고 ID 콘텐츠가 필요하고 텍스트 생략 센터를 생략하면됩니다.
다시 가자.
우리는 거기에 갈.
이제 상황이 센터와 일치합니다.
다음으로 25 %를 페이지 아래로 25 % 밀어 넣고 정확히 25 %의 패딩을 만듭니다.
그래서 여기서 우리는 패딩 25 %를 할 것입니다.
그리고 우리가 백분율로 그것을 지키면 그것을 단단한 수의 픽셀로주는 것보다 좀 더 반응 적입니다.
그것이 바로 중앙에 있습니다.
화면 크기를 조정하면 25 %가 변경됩니다.
큰.
이제 배경 이미지를 추가해 보겠습니다.
그래서 제가 사용하고있는 이미지는 사랑스럽고 고양이와 인간의 상호 작용은 여기에서 진행됩니다. 스플래시 웹 사이트에서 부트 스트랩 이미지 그리드를 만든 마지막 비디오에서 소개했습니다.
그리고 그들은 모든 문제없이 사용할 수있는 모든 종류의 정말 훌륭한 고품질 이미지를 가지고 있습니다.
그리고 제가 사용하는 것은 바로 여기에 고양이 링크를 검색하는 것입니다.
여기이 이미지의 아로가 바로 당신이있는 이미지를 복사하는 것입니다.
이제 돌아가서 배경 이미지로 추가하겠습니다.
그래서 배경과 거대한 그 URL을주세요. 바로 거기에 있습니다.
그리고 우리가 그것을이 수준의 형태로 남겨 두거나 새로 고침을하면 거대한 배경 이미지를 얻을 수 있습니다. 그리고 이것은 우리가 손톱을위한 일종의 신생 식물이라고 말할 수 있습니다.
그래서 우리는 크기를 조정해야하고 그렇게하기 위해서 우리는 배경 크기를 사용하고 그것을 새로 변경해야합니다.
다시 우리는 점점 가까워지고 있습니다.
이렇게하면 화면의 전체 너비와 높이를 가리지 만 가능한 한 이미지가 작아집니다.
따라서 어떤 방식 으로든 이미지를 왜곡시키지 않을 종횡비가 변경되지는 않지만 필요에 따라 양 방향으로 늘어납니다.
그러나 화면에 맞추기 위해 필요한 최소한의 양은 여전히 ​​완벽하지는 않습니다.
우리가하고 싶은 것은 그것의 크기를 바꾸는 것이 아니라 위치를 바꾸는 것입니다.
우리는 배경 위치 센터를 중심으로 배치 할 것이지만 우리가 더 가깝게 만들지는 않을 것입니다.
그러나 이미지가가는 한 여전히 완벽한 일치는 아닙니다.
그리고 그 변화는 나중에 올 것입니다.
지금은 탐색 표시 줄에 추가하는 것에 중점을두고 Boucek 문서로 이동하여 구성 요소로 이동하고 이전에 언급했으면합니다.
부트 스트랩 탐색 모음에 추가하는 경우 항상이 작업을 수행합니다.
다르게 기억하는 것은 너무 많은 것입니다.
그리고 저는 여기에 바로 이것을 복사합니다.
전체 탐색기를 시작하여 여기에있는 앱으로 돌아가서 바로 위에 올리십시오.
이것은 분명히 우리가 원하는 NAF가 아니지만 새로 고치려는 조각을 포함하고 있습니다.
충분히 가깝습니다.
그래서 우리가하고 싶은 몇 가지 변화가 있습니다.
가장 쉬운 방법 중 하나는 솔루션의 콘텐츠가 컨테이너에 있으므로 여기에서와 같이 가장자리까지 완전히 이동하지 않는 것입니다.
그래서 우리는 되돌아 가서 inset을하거나 div 클래스 컨테이너로 바꿀 수 있습니다. 그리고 우리가 지금 되돌아 간다면 우리는 컨테이너에 추가했기 때문에 솔루션에 대해 여기처럼 간격을 두는 것을 볼 수 있습니다.
이제 Nev의 실제 내용을 작업 해 보겠습니다.
따라서 가장 쉬운 방법은 바로 지금 말하는 브랜드를 바꾸는 것입니다.이 라인 클래스의 브랜드는 네스 바 브랜드와 동일하므로 고정 고정 및 저장으로 변경합니다.
그것을 밖으로 시도하십시오.
그래 좋아.
이제이 양식을 제거해 보겠습니다.
우리는 이것을 전혀 필요로하지 않습니다.
그래서 우리의 형식이 모두 여기에서 시작됩니다.
그 모든 것을 새로 고쳐라.
드롭 다운을 없애자.
당신은 그럴 필요가 없습니다.
이제부터 시작됩니다.
끝내는이 거짓말은 다시 신선합니다.
이제 우리는 하나의 링크를 가지고 있습니다.
그래서 우리는 가입해야하고 로그인 할 예정인이 두 링크로 시작할 것입니다.
이것이 바로이 링크입니다. 그래서 우리는이 링크를 등록하고 복제 할 수 있습니다.
안쪽에 앵커 태그가있는 동맹국.
그리고이 사람은 로그인 할 것입니다.
확인 해보자.
큰.
그래서 아이콘이 끝날 것입니다.
두 가지 링크가 있습니다.
이제 세 개의 링크가 필요합니다.
우리는 이미 그 중 두 가지를 가지고 있으며 우리는 그 드롭 다운을 제거 할 것입니다.
그래서 우리는 접촉 할 수있는 집이 필요합니다.
따라서 드롭 다운을 찾으십시오.
클래스는 드롭 다운과 같습니다.
이제는 그것을 없애고 아크 바가 단순화되었습니다.
이제 두 가지 길이가 있습니다.
우리는 실제로 그것들을 제거하고 처음부터 그것을 할 것입니다.
그래서 우리는 하나의 동맹에 앵커 태그를 추가하고 그 다음에 3 번 할 것입니다.
이 첫 번째 사람은 집이라고 말해야합니다.
다음은 대략이다.
마지막은 연락입니다.
확인 해보자.
우리는 세 가지 길이 있습니다.
사소한 일 하나.
집은 활발하고 쉬우니까요.
우리가해야 할 일은 앵커 태그가 아니라 동맹인 인 동맹국에 동등한 클래스를 추가하는 것입니다. 이제 우리는 집이 활성 링크가되도록합니다.
큰.
좋아, 그래서 우리 nav 막대기이고 우리가 크기를 재조정하면 우리는 벌써 잘 작동하는이 햄버거를 가지고있는 것을 볼 것이다.
우리에게는 배경 이미지가 엉망인 문제가 있습니다.
우리는 그것을 조금씩 다룰 것입니다. 그러나 햄버거는 잘 작동합니다.
모든 것이 좋아 보인다.
이제 글꼴을 다루겠습니다. 제가 여기 사용 된 글꼴이 Ledo L.A.입니다.
Google 글꼴에서 가져온 것이므로 Google 글꼴로 이동하여 Ledo를 찾아 보겠습니다.
LA T-O는 모두 컬렉션에갑니다.
그것이 정상적이고 대담 해지면 그것을 사용합시다.
또한 우리는 H-1이 대담 해지기를 바랍니다.
괜찮아.
그런 다음이 링크를 애플리케이션에 바로 추가 할 것입니다.
위로 가기 여기까지 저장 이제는 글꼴을 모든 것에 적용 할 것입니다.
그래서 Ledo라는 본문 폰트 패밀리를 선택하고 올바르게로드되는지 확인하겠습니다.
우리가 새롭게 한 것을 보아라.
텍스트가 어둡지 만 변경 되었기 때문에 앞 부분을 변경하기가 어렵습니다. NFR에서도 볼 수 있습니다.
그것은 바뀌 었습니다.
이 솔루션에서 우리가 가진 것과 일치합니다.