이 강의로 돌아와서 여러분의 응용 프로그램에 부트 스트랩을 설치하는 방법을 보여 드리겠습니다.
그리고 일단 당신이 그것을하면 피치를 사용하는 중요한 몇 가지 기초를 보여 드리겠습니다.
그래서 나는 홈 페이지에서 bootstrapped 닷컴을 얻고 있는데 여기에 다운로드 부트 스트랩 링크가있다.
부트 스트랩을 사용하는 방법에 대한 두 가지 주요 선택 사항이 있기 때문에 실제로는 직접 다운로드 링크가 아닙니다.
우리는 파일을 다운로드 할 수 있으며 시작할 수 있도록 할 것입니다.
그런 다음 파일을 가져 와서 응용 프로그램에 추가 할 수 있습니다.
나는 기본적인 자료를 hMLML이라고 부르고 있다는 간단한 파일 탐색 팀을 만들었습니다.
제목을 추가하기 만하면 부트 스트랩의 몇 가지 요소를 추가 할 것입니다.
일단 우리가 그것을 설치하면 우리는 포괄적 인 것을 만들지 않을 것입니다. 우리는 그것을 기본적인 부트 스트랩 구성 요소의 놀이터로 사용하게 될 것입니다.
이제 간단하게 H-1 부트 스트랩을 추가하고 저장해 봅시다.
그리고 브라우저에서 이것을 열어 보겠습니다.
그냥 지금 거기에 보관하십시오.
이제 부트 스트랩을 설치하십시오.
나는 그것을 다운로드했다.
그래서 그 파일을 열면 여기에 몇 가지 다른 구성 요소가 있음을 볼 수 있습니다.
C S 디렉토리가 있고 CCS 디렉토리 안에는 꽤 많은 파일이 있지만 실제로 CSSA를 부트 스트래핑 한 중요한 파일이 하나 있습니다.
그리고 실제로 이것은 분당 최대 부트 스트랩 된 파일과 같습니다.
SS보다 작은 공간을 차지하기 위해 수축이 줄어들었다.
따라서이 두 파일은 실제로 부트 스트랩을 사용하는 중요한 파일입니다.
그리고 이것은 부트 스트랩 테마입니다.이 세가지는 부트 스트랩에 커스텀 테마를 추가하는 데 사용됩니다. 그래서 그다지 중요하지 않습니다.
우리가 필요로하는 것은 부트 스트랩 Dotsie 평가입니다.
그리고 우리는 그것을 열어서 우리가 작업하고있는 것을 볼 수 있습니다.
이것은 주 부트 스트랩 재평가 파일입니다.
그것은 단지 많은 수업들입니다.
CSSA의 모든 단일 라인을 보면 거의 클래스 선언 점이 있습니다.
그러면 우리가 할 수있는 일은 우리의 어플리케이션 대신에 클래스를 사용하는 것입니다.
따라서 흰색 텍스트와 빨간색 배경이있는 버튼을 원한다면 도트 버튼 위험을 적용 할 것입니다.
그리고 이것이 바로 이것이 여기서하는 일입니다.
그러나 위험은 흰 바탕에 빨간색 배경과 붉은 테두리가 있습니다.
이제 다른 CSSA 파일처럼 애플리케이션에 포함시켜 보겠습니다.
그래서 제가 할 일은 저의 기본 연구 팀이있는 곳과 같은 디렉토리로 끌어다 놓는 것입니다. 그리고 이것 대신에 부트 스트랩 된 분을 재평가 할 수 있습니다.
별로 중요하지 않습니다.
기술적으로 이것은 좀 더 빠르게로드됩니다. 왜냐하면 내가 여는 경우 모든 공백이 제거 된 거대한 라인이기 때문입니다.
따라서로드하는 것이 더 쉽지만이 더 긴 버전을 사용하여 우리가 작업하고있는 것을 정확히 볼 수 있습니다.
이제 실제 파일을 살펴 보겠습니다.이 파일을 닫고 CSX를 부트 스트랩으로 포함 할 것입니다.
그래서 다른 스타일 시트와 마찬가지로 우리는 링크 된 태그가 필요하고 Tref는 부트 랏트 C S S입니다. 그리고 우리가 저장하면 여기에 신선한 페이지가 있습니다. 약간의 차이가 있습니다.
이 H-1에서 글꼴을보십시오.
그것은 바뀐다.
이제 부트 스트랩이 설치되었거나 부트 스트랩과 함께 작동하는 C S가 필요합니다.
우리는 javascript로 작업하지 않을 것입니다. 그러나 부트 스트랩을 설치하는 또 다른 옵션은 실제로 부트 스트랩 웹 사이트에 있습니다.
부트 스트랩 CDN 여기에서이 링크를 가져 와서 코드에 추가 할 수 있습니다.
그리고 그것은 동일한 파일의 호스트 된 버전에 대한 링크입니다.
브라우저에서 열어서 붙여 넣으면 최소화 된 파일의 내용을 볼 수 있습니다.이 파일은이 파일에 저장되어 있습니다. 그래서 우리는 그 파일을 대체 할 수있는 링크를 가질 수 있습니다.
다른 링크.
태그를 붙여서 당신이 엘렌이고이 글을 주석으로 칠하겠습니다.
당분간은 돌아가서 새로 고침하십시오.
그리고 아무것도 바뀌지 않습니다.
유일한 차이점은 첫 번째 경우에는 컴퓨터에 다운로드 한 파일을 연결 한 것이고 두 번째 경우에는 줄에 호스팅 된 외부 파일에 연결하는 것입니다.
이제 부트 스트랩 문서를 살펴보고 이러한 구성 요소 중 일부 또는 일부를 시작해 보겠습니다.
그래서 부트 스트랩을 얻고 C Ss를 클릭하자. 우리가 사용하게 될 더 중요한 부분을 지적 할 것이다.
이제 버튼으로 간단하게 시작해 봅시다.
우리가해야 할 일은 버튼을 사용하는 것입니다. 그 다음에 beaten 클래스를 사용하고 기본값 사이에있는 버튼 유형을 사용합니다.이 버튼은 흰색 버튼을 제공하지만 VTAM 기본 BATNA 액세스 정보이기도합니다.
위험과 링크를 경고하고 그들 모두는 약간 다르게 스타일이 지정됩니다.
그리고 물론 우리는이 색상을 스스로 변경할 수 있지만, 우리는 한 번 내장 된 것을 사용하여 시작할 것입니다. 그리고 그는 여기에서도 볼 수 있습니다.
우리는 버튼 요소를 사용할 필요가 없습니다. 버튼이나 입력을 앵커 태그로 사용할 수 있습니다.
그럼 그걸 시험해 봅시다.
H-1 님, 안녕하세요.
버튼 태그를 추가하면이 버튼 태그가 나를 클릭하고 지금 당장 페이지를 새로 고침하고이를 살펴 봅니다.
그건 꽤 못 생겼어.
그러나 우리가 가서 그 수업 PTEN을 추가하고 나서 성공과 저장 사이에 우리는이 멋진 녹색 버튼을 얻습니다.
기본 스타일을 쉽게 익힐 수 있습니다.
다시 돌아가서 우리가 사용할 수있는 크기가 다른 버튼에 대해 몇 가지 다른 것들을 보여 드리겠습니다. 정말 쉽습니다.
단추 하나를 크고 작은 단추 또는 단추를 추가해야하기 때문에 단추 성공 후 시도해 볼 필요가 없습니다.
클래스의 순서는 중요하지 않지만 여기 DTN 이후에 할 것입니다. 좀 더 작게하고 페이지를 새로 고칩니다.
우리는 거기에 갈.
이제 이것을 옮겨 놓고 몇 가지 버튼을 더 추가하겠습니다.하지만이 태그는 앵커 태그가 될 것입니다. 태그에 있거나 HF 콜렉션이 DP 콜론 슬래시와 같습니다. 매일 읽고있는 부트 스트랩 도트 컴을 얻은 다음 텍스트는 단지 부트 스트랩 문서를 말할 것입니다.
이렇게 조금 더 크게 만들면 수업 시간에 수업에 추가하여 PTEN과 동등해야하며 Desch 정보를 공유하고 큰 PTEN 대시 Elgie로 만들고 새로 고침합니다.
이제 두 개의 버튼이 있습니다.
하나는 실제 버튼 요소입니다.
또 다른 하나는 앵커 태그를 가지고 있으며 이것을 클릭하면 앵커 태그로 볼 수 있습니다.
그래서 부트 스트랩을 사용하는 첫 1 분 안에 우리는 괜찮은 버튼을 얻을 수있었습니다.
CSSA 자체를 복제하는 데는 10 ~ 15 줄의 CSSA가 필요했습니다.
다시 가자.
이 전체 화면을 다시 작성하면 버튼에 대한 몇 가지 다른 점을 알려 드리겠습니다.
그래서 우리는 크기가 있습니다.
버튼이 활성 상태 인 것처럼 보이게 만들 수있는 다른 상태와 활성 클래스를 추가하기 만하면됩니다.
그래서 우리가 그것을 시도한다면 이제는 몇 개의 버튼을 추가하여 우리의 작은 미니어쳐 Click Me 버튼을 세 번 반복 할 것입니다. 그리고 중간 클래스의 마지막 하나를 활성화하고 새로 고침하면 잘 보일 것입니다. 이 화면이 제대로 작동하는 것처럼 화면에 충분히 잘 표시됩니다.
다시 돌아가서이 속성을 추가하여 버튼을 비활성화 할 수 있습니다.
사용 안 함은 사용할 수 없게됩니다.
돌아가서 마지막으로 새로 고침을 사용하지 않도록 설정합시다.
이제이 버튼은 사용할 수 없습니다.
우리는 그 작은 작은 아이콘을 얻는다.
색상이 더 이상 바뀌지 않는 호버링 효과가 없습니다.
분명히 비활성화 된 버튼입니다.
내가 당신에게 보여줄 위대한 마지막 것은 우리가 다시 색을 바꿀 수 있도록 위험한 밤은 우리에게 그 붉은 오렌지를 주며 당신은 여기에 모든 색을 볼 수 있습니다.
물론 스타일을 덮어 씀으로써 다른 스타일 시트를 만들지 않고 이렇게 변경할 수 있습니다.
나는 지금 여기서 그것을 할 것이다.
그래서 우리는 단지 한 줄을 할뿐 아니라 아름다움과 위험을 좋아할 것입니다.
우리는 오렌지 색으로 바꿀 수 있고 이제는 텍사스 오렌지를 위험에 빠뜨릴 수 있습니다. 실제로 배경을 변경하고 싶다면 배경색을 오렌지색으로 할 수 있습니다. 그렇게하면 스타일을 변경하고 오버라이드 할 수 있으므로 할 필요가 없습니다. 어떤 부트 스트랩이 당신을 상자에서 꺼내 주는지 사용하십시오.
그리고 대부분의 장소는 그렇지 않습니다.
좋아요, 그래서이 비디오에서 제가 할 일은 버튼입니다.
난 단지 당신에게 부트 스트랩이 어떻게 작동하는지에 대한 정말 빠른 맛을 전하고 싶었습니다.
기존 요소와 클래스에 클래스를 추가하는이 패턴은 다음 비디오의 CSSA 파일 부트 스트랩에서 정의됩니다. 양식과 입력을 포함하여 부트 스트랩과 함께 제공되는 다른 중요한 요소 중 일부를 강조하겠습니다.