이 유닛으로 돌아와서 jumbotron 및 부트 스트랩 폼과 입력을 포함한 몇 가지 다른 구성 요소를 보여 드리겠습니다.
그러나 그 전에 부트 스트랩과 같은 새로운 도구를 배울 때 정말 중요한 것을 처리하기 위해 잠깐 시간을 내고 싶습니다.
그리고 웹 개발자가되는 사람들을 가르쳐 준 경험으로 부트 스트랩이 학생들 중 일부가 불편 함을 느낄 수있는 첫 번째 장소 중 하나라는 사실을 알게되었습니다. 우리는 누군가 다른 사람이 우리 응용 프로그램에 쓴 코드를 갑자기 포함시키고 있습니다.
그러나 여기서 문서를 살펴 본다면 정말 길기 때문에 포괄적입니다.하지만 여기에 많은 내용이 있습니다. 모든 것을 이해하기 위해 읽어야 할 설명서가 아닌 프레임으로 구성 해주십시오.
이것은 부트 스트랩을 사용하기 전에 끝내야한다는 안내 방법과는 다릅니다.
그것은 당신이 테이블이 필요하면 양식 섹션을 보면 양식이 필요하다고 결정한 경우 참조하십시오.
네비게이션 바가 필요한 경우 테이블 섹션을 누르십시오.
당신은 NFR 섹션을 보았습니다. 그러나 여러분이 사용하게 될 것처럼 문서를 다루는 것이 중요합니다. 여기서 다시 돌아 오는 것은 개별 코드 비트를 참조하여 코드 세그먼트를 복사하는 것입니다. 년이 시점에서.
그리고 나는 그것의 대부분을 꽤 잘 느낍니다.
하지만 부트 스트랩을 사용하여 작업 할 때 문서를 열어 두었습니다.
나는이 과정에서 정말로 초기의 비디오 중 하나에서 예제를 계속 참고하고 있는데, 나는 웹 개발자가되는 법을 이야기했다.
당신은 암기하고 모든 정보를 아는 전문가가되지 않습니다.
예, 당신은 사물을 알아야합니다.
예, 당신은 이해하고 기억해야하지만 당신은 전문가가되거나 암기가되지 않습니다.
귀하는 정보에 접근하는 전문가가되어 가고 있습니다.
그리고 그 중 일부 정보는 기억할 것이며 그 중 많은 부분이 문서 또는 예제 비디오 서적에서 온갖 종류의 자원으로 온라인 될 것입니다.
알았어. 전부 얘기하자.
기본적으로 나는 단지 부트 스트랩에 많은 것들이 있음을 명심하십시오. 그리고 당신은 그것의 20 30 %를 보게 될 것이고 거기에 더 많은 것이 있습니다.
그러나 그것에 협박하지 마십시오.
수행 방법을 보여주지 않는 무언가를해야 할 경우 문서에 쉽게 액세스 할 수 있어야합니다.
문서를 열고 찾아 봅니다.
그리고 항상 좋은 예와 설명이 bootstrapped dotcom을 얻습니다.
OK 그럼 더 이상 안도로 이러한 중요한 구성 요소 중 일부에 대한 이야기로 이동하자 그리고 당신 Jumbotron 보여 주기로 시작하겠습니다.
따라서 Jumbotron은 공식 문서에 따라 경량의 유연한 구성 요소로서 선택적으로 전체 뷰포트를 확장하여 사이트의 주요 내용을 보여줄 수 있습니다.
여기서 예를 볼 수 있습니다. 만약 우리가 점보트론을 사용하고 싶다면 정말 쉽습니다.
우리가해야 할 일은 div class jumbotron을 쓰는 것입니다. 그리고 나서 우리가 그 안에 넣는 것이 Jumbotron의 일부가 될 것입니다.
그럼 해보 죠.
Jumbotron jumbo tron ​​클래스가있는 div가있을 것입니다. 그리고 H1 또는 H-1이 jumbotron이라고 말하면 거기에 버튼이 추가됩니다. 여기에 버튼이 추가됩니다. 단락을 단락에 추가하면 단락이 복잡해질 것입니다.
지금은 충분히 좋습니다.
그리고 버튼과 우리 버튼은 단지 거기에서 인사 할 것입니다.
승인.
그런 다음 버튼 하나를 선택해야합니다.
우리는 버튼 성공을 할 것이고 나는 그것을 크게 만들고 구할 것입니다.
우리가 얻는 것을 보도록하겠습니다.
Jumbotron은 브라우저 윈도우의 전체 너비를 차지한다는 것을 알 수 있습니다. 이것은 보통 우리가 원하는 바가 아닙니다.
그리고 JumboTron은 내부에있는 모든 컨테이너의 100 %를 차지하도록 설정되어 있습니다.
이 경우에는 아무 것도 아닙니다.
그러나 곧 그리드 시스템과 부트 스트랩을 보여 드리며, 화면 중앙에 위치시키고 화면의 3 분의 1을 차지하고 싶다면 스크린의 크기를 정확히 제어 할 수 있습니다.
화면의 2/3는 화면의 1/4에 해당하며, 부트 스트랩 그리드 시스템을 사용하여 이러한 다양한 선택을 할 수 있습니다.
지금은 컨테이너와 동등한 클래스와 컨테이너가 수행 할 div가없는 다른 요소를 보여 드리겠습니다.
우리가 div 클래스 컨테이너 안에 물건을 넣는다면 주변에 약간의 간격을두고 그것을 중심으로 배치합니다.
그래서 컨테이너는 여기에있는 모든 공간을 차지하는 것을 확인합니다.하지만 여기에는 약간의 여유가 있습니다.
따라서 우리가 이야기하지 않은 그리드 시스템을 사용하지 않고도 빠른 개선을 원한다면 div 클래스 컨테이너를 추가 할 수 있습니다. 이제이 멋진 Jumbotron을 얻을 수 있습니다.
그리고 우리가이 코드를 컨테이너에 잘 넣었다면 Jumbotron 안에 넣지 않을 것입니다.
컨테이너에 의해 여전히 영향을받는 것을 볼 수 있습니다.
그래서 Jumbotron 바깥 쪽에서 컨테이너 안을 저장하고 새로 고침하면 컨테이너 안에 있다는 것을 볼 수 있으며 시각적으로 반영됩니다.
이제 구성 요소와 내가 보여줄 다음 항목으로 돌아가 보겠습니다.
우리는 정상에갑니다.
우리는 평가를 보러 가야하고, 나는 당신에게 그 형태와 방법을 보여줄 것입니다.
따라서 양식을 클릭하면 상당히 다른 유형과 다른 예가 있습니다.
그리고 우리가 무엇이든 입력하기 전에 먼저 스크롤 할 것입니다.
다음은 부트 스트랩 양식의 기본 예제입니다.
그것을 만드는 시장을 볼 수 있습니다.
그런 다음 우리는 인라인 형식으로 알려진 형식을 가지며 다른 유형의 인라인 형식과 다른 유형의 입력 및 다른 유형의 형식을 가진 또 다른 형식을 갖습니다.
이제는 지원되는 다양한 유형의 입력을 제어하는 ​​모든 유형의 양식에 대해 설명합니다.
그래서이 색들이 모두 당신입니다.
이메일 번호 주 시간 등 텍스트 영역에 따라 다른 확인란 사용 안 함 확인란 선택 취소 라디오 버튼 인라인 확인란 인라인 라디오 버튼 드롭 다운 메뉴는 계속 진행됩니다.
우리는 다른 포럼 국가를 가지고 있습니다.
우리는 초점 상태가 있습니다.
이 파란색 주위에서 강조 표시를 볼 수 있습니다.
기본 부트 스트랩 포커스 스타일입니다.
우리는 또한 무능하게 추가해서 입력을 무력화 할 수 있고 우리는 할 수있는 몇 가지 다른 것들을 얻었지만, 나는 다시 돌아가서 기본적인 예제 설치에 집중할 것입니다.이 전체 양식을 복사하는 것부터 시작하겠습니다. 그리고 나서 우리는 그것을 조금씩 해부 할 것입니다.
여기로 돌아가서이 양식을 다른 모든 것 다음에 추가합니다.
그러나 나는 그것을 용기 안에서 할 것이다.
이 풀 스크린을 잠시 동안 만들어 보도록하겠습니다.
우리는 우리의 형식을 가지고 있으며 그 안에는 상당히 많은 내용이 있습니다.
브라우저로 돌아가서 어떻게 생겼는지 살펴 보겠습니다.
그리고 가장 먼저 눈에 띄는 것은 우리 양식이이 컨테이너를 가로 질러 진행된다는 것입니다.
그것은 그 중 100 %를 차지하며, 우리가 통제 할 수있는 것입니다.
일단 우리가 부트 스트랩 그리드 시스템에 대해 이야기하고 나면 이것이 50 % 가량 나아갈 것이라고 쉽게 말할 수있을 것입니다.
부트 스트랩 그리드 시스템에 대해 말하면 쉽게 변경할 수있는 것이거나 아직 존재하지 않습니다.
그래서 우리는 그걸로 갈 것입니다.
지금은 100 %를 차지합니다.
그것은 거대한 이상한 찾고있는 포럼이지만 괜찮습니다.
우리는 그것을 어떻게 좋아합니다.
그래서 우리는 다시 숭고하게 돌아가서 한 번에 하나씩 해부하겠습니다.
그래서 우리는 포럼 태그 안에 포럼 태그를 가지고 있습니다.
div 클래스 폼 그룹이 있습니다. 부트 스트랩 문서로 돌아가 폼 그룹 검색을하면 최적의 간격을위한 랩 레이블과 컨트롤을 폼 그룹에서 볼 수 있습니다.
따라서이 첫 번째 그룹 클래스에서 그룹 클래스를 제거하면 첫 번째 클래스와 두 번째 클래스에서이를 수행하게 될 것입니다.
저장하고 새로 고침하여 입력 사이에 간격이 어떻게 변하는 지 확인할 수 있습니다.
그래서 우리는 돌아가서 양식 그룹을 추가 할 수 있습니다. 이것은 실제로 당신이 입력과 레이블을 가지고 그것을 그룹화하기를 원하는 곳에 사용하는 방법입니다.
여기서주의를 기울이십시오. 바로 약간의 공간이 여기에 추가됩니다.
단지 여기에 약간의 공간이 추가되어 시각적으로 효과적으로 이들 두 그룹을 그룹화 한 다음 그립을 시각적으로 함께 표시합니다.
그래서 폼 그룹입니다.
그런 다음 레이블은 정상입니다.
Boucek 클래스에 라벨을 붙이기 위해 멋진 것을 추가 할 필요는 없지만 입력에는 클래스 폼 컨트롤이 있습니다.
그래서 내가 그것을 없앨 때 어떤 일이 일어나는지 봅시다.
그래서 나는 처음에 그것을 할 것이고 이메일 입력을 넣고 돌아가서 새로 고침 할 것입니다.
이렇게하면 일반 기본 브라우저 입력으로 완전히 변경됩니다.
그래서 당신은 둥근 모서리를 얻지 못합니다.
우리는 같은 패딩과 사물 간격을 갖지 않습니다.
그리고 우리가 클릭했을 때 같은 윤곽 효과를 얻지도 않습니다. 파란색 윤곽선을 얻지 만이 윤곽선과는 다른 것입니다.
부트 스트랩 개요는 좀 더 미묘한데 두 점 사이의 즉각적인 시각적 변화 일 뿐이지 만 실제로 그리드 시스템과 함께 작업하고 다른 사람들과 행동하고 상호 작용하는 방식에 대해 더 중요한 차이점이 있습니다 집단.
돌아가서 양식 컨트롤을 다시 추가합니다.
그래서 정말로 우리가 이것을 원한다면 여기 모든 것이 종결되어 그룹과 폼 컨트롤을 형성합니다.
이 두 클래스는 실제로 상황을 좋게 만드는 책임이 있습니다.
이제이 단락 클래스 도움말 블록이 있으며 우리는 그 부분에서 얻은 것을 살펴볼 수 있습니다.
여기에이 텍스트가 있습니다.이 힌트는 폼의 일부분에 대한 포인터와 클래스 도움말 블록과 관련된 것들에 대한 힌트를 제공합니다. 그리고 나서 여기에 우리 버튼이 있습니다.이 버튼은 보통의 Pucelle 버튼이거나 a와 b 사이에 있습니다. 가을과 우리가 다른 작은 버튼처럼 크고 작은 작은 여분의 작은 색상을 변경할 수 있습니다.
자, 이제는 이것이 우리가 점보트론에 추가 할 수있는 레고 ​​버튼이있는 레고와 어떻게 다른지 볼 수 있습니다.
또한 자체적으로 추가 할 수도 있고 양식 대신 추가 할 수도 있습니다.
응용 프로그램의 다른 부분에 추가 할 수있는 작은 플러그 앤 플레이 구성 요소 일뿐입니다.
이제 돌아가서 인라인 형식 인 다른 유형의 양식을 살펴 보겠습니다.
그래서 이것은 약간 다르게 보입니다.
이 코드를 복사 한 후 차이점을 살펴보고 첫 번째 형식을 그대로두고 여기에 줄 형식으로 주석을 추가하고 올바르게 들여 쓰기를합시다.
좋아 보인다.
모든 것이 동일하다는 것을 주목하십시오.
양식 그룹을 가지고있는 입력에 대한 양식 제어가 여전히 있지만 큰 차이점이 있습니다.
모든 것은 클래스 형식으로 한 줄 안에 있도록 양식 안에 있습니다.
시작하는 모습을 보여 드리겠습니다.
나는 돌아가서 우리에게이 라인 형태로 좋은 것을 준다.
그리고 그걸 없애고 저장하자마자 이제는 우리가 여기있는 것처럼 정규 양식으로 돌아갑니다.
따라서 하나의 클래스에는이를 제어 할 모든 스타일이 포함되어 있습니다.
그래서 우리는 그것을 Form in Line으로 유지할 것입니다.
그리고 다시 간격은 이상적이지 않습니다.
우리가 그리드 시스템에 관해 말할 때 그것은 고정 될 것입니다.
부트 스트랩 형태에 관해서는 더 많은 이야기를 할 수 있습니다.
우리는 아마도 복잡한 조각을 만드는 부트 스트랩에 30 분 45 분의 강의를 할 수 있습니다.이 모든 다른 조각들과 우리가 할 수있는 여러 가지 스타일의 모든 종류의 사용자 정의를 검증 할 수있는 다양한 것들을 배우고 있습니다.
그러나 나는 그렇게하지 않을 것입니다.
우리는 중요한 기초를 다뤘습니다.
Boucek 양식의 빵과 버터 종류에는 두 가지 유형이 있습니다. 여기에는 기본 정규 양식과 인라인 양식이 있으며 양식 주변에서 사용하는 부트 스트랩의 다른 측면에 몇 가지 다른 기능이 있습니다.
하지만 지금 당장 시간을 보내지 말고 PRICHEP 양식의 모든 세부 사항과 작은 부분에 대해 늪지하기보다는 사실 우리가 실제로 부트 스트랩을 사용할 때 우리가 필요할 때 그 작은 조각들을 넣을 것입니다.
그래서 폼에 관한 두 가지 테이크 아웃은 정말 중요한 폼 컨트롤과 폼 그룹 폼 컨트롤 인 두 개의 클래스가 될 것입니다. 입력을 부트 스트랩으로 정제 된 폼 그룹에 그냥 좋은 간격을 추가하십시오.
그래서 당신이 무엇을 넣었는지간에 폼 그룹은 좋은 간격을 갖게되고 그다음에 하나의 클래스 폼 대시가 생깁니다.
전체 양식이 줄을 서서 양식을 감쌀 경우.
그리고 나서 점보 트론에 대해서도 이야기했습니다.
아주 간단한 클래스는 Jumbotron과 같습니다.
그래서 당신은 동료를 볼 수 있습니다.
그런 다음 모든 것을 컨테이너 안에 넣습니다.
그리고 만약 우리가 컨테이너를 제거하면 어떤 일이 일어나는지 보여줍니다.
좋은 여백이 없어지는 간격을 새로 고칩니다.
따라서 컨테이너는 앱에 간격을 두는 것만으로도 멋지게 보이게합니다.
좋습니다.이 비디오를 끝내기 전에 노드와 익스프레스와 몽고 및 몽구스와 수많은 기술을 사용하여 연결된 전체 백 엔드 데이터베이스가있는 응용 프로그램을 빌드 할 사이트를 보여주는 10 초를 보냅니다. 부트 스트랩을 사용하여 인터페이스를 프로토 타입 화하여 비교적 빠르게 보이게 만들 수 있습니다. 여기서 Jumbotron을 볼 수 있습니다.
우리는 나중에 설명 할 그리드 시스템을 사용하는 버튼 중 일부를 사용하고 있습니다.
그런 다음 로그인하면 양식이 있음을 알 수 있습니다.
그래서 이것들은 그리드 시스템을 사용하여 화면의 전체 너비를 차지하지 않도록 양식 컨트롤을 만들었습니다.
오히려 그것은 단지이 작은 중간 섹션을 차지합니다.
그리드 시스템에 대해 이야기하면 알게 될 것입니다.