이 강의로 돌아와서 여러분에게 NFR 인 모든 부트 스트랩에서 가장 중요하고 널리 사용되는 구성 요소 중 하나를 보여주기 위해 Boucek dotcom을 실제로 볼 수 있습니다.
여기서 충분한 바 구성 요소를 사용합니다.
우리는 또한 Yelp 캠프 응용 프로그램과 Nav 막대의 크기를 조정할 때 하나를 사용하려고합니다.
얼마나 반응이 좋았는지주의하십시오. 그리고 TAB을 눌렀을 때 곧 알아 차릴 수 있습니다. 우리는이 크기의 햄버거를 휴대 전화 크기로 얻습니다.
그래서 우리는이 공과의 모든 것을 향해 노력할 것입니다.
그러나 우리는 더 쉽게 시작할 것입니다.
가장 먼저해야 할 일은 구성 요소로 이동하여 탐색 바를 사용하는 것입니다. 코드를 많이 작성하기 때문에 새 파일을 만들었습니다.
늙은 사람이 어지러워졌습니다.
나는 그걸 부르짖고있다. Bar H T M L.
그들 안에는 타이틀을 바꾸지 않는 부트 스트랩 링크가 있습니다.
그냥 부스트 바브라고 부르겠다.
그냥 그렇게.
이제 문서로 이동하여 기본 탐색 모음을 살펴 봅시다.
여기이 예제는 브랜드 링크가있는 모든 중요한 기능을 보여줍니다.
메뉴에 드롭 할 수있는 다른 링크가있을 수 있습니다.
우리는 네비게이션 바 형태와 버튼을 가질 수 있습니다. 우리는 왼쪽에있는 오른쪽에있는 것들을 가질 수 있습니다.
이것은 정말 모든 것을 보여줍니다.
그것은 부트 스트랩 너프 바 (bootstrap naff bars)의 부엌 싱크대이며 결과적으로 마크 업은 조금 길다.
이 비디오가 끝날 때까지이 모든 작업을 진행할 것입니다.
그러나 나는 더 간단하게 시작하기를 원하며, 나는 당신에게 숫자를 만드는 가장 간단한 방법을 보여줌으로써 시작할 것입니다.
그래서 우리는 nav 요소를 만들 필요가 있습니다. 그리고 NAV 요소는 우리가 nav bar와 nav bar를 원하는 두 개의 클래스를 가질 필요가 있습니다. 그리고 Dasch default로 시작할 수 있습니다.
이제 브라우저에서 파일을보고 새로 고침 해 봅시다.
내가 가로 질러지기를 바라며 거기에 충분한 바가 있다는 희미한 바가 맨 위를 가로 질러가는 것을 볼 수 있습니다. 그것이 우리가 실제로 NF 바를 초기화하는 방법입니다.
이제 몇 가지 내용으로 채우자.
가장 먼저 살펴볼 것은이 브랜드에서 어떻게 추가 할 수 있는지입니다.
기본적으로 회사 이름.
대부분의 경우에.
그리고 그것은 nav bar header를 사용하고 나서 NFR header 안에서 nav bar brand를 사용합니다.
div 클래스를 nav bar 대시 헤더와 동등하게 추가 한 다음 앵커 태그 인 nav bar 브랜드에 추가 할 것입니다.
일반적으로 회사 이름을 클릭하면 홈 페이지로 돌아갑니다.
그래서 우리는 그것을 앵커 태그로 여기에서 할 것이고 우리는 소프와 같은 트래픽으로 시작할 것입니다. 그래서 그것은 우리를 어디로 든 데려 가지 않습니다.
클래스는 nav bar dash 브랜드와 같을 것이고 우리는 단지 회사 이름을 만들 것입니다.
내가 커피 컵을 가지고 주변에 있는지 보자. 그래서 커피를 마시자.
그러나 실제로 그것을 진정한 시작으로 만들기 위해 우리는 철자를 조금 바꿔야합니다.
알렉스.
나를 위해 충분하다.
커피와 K.
가자.
새로 고침을하고 NAV 바 브랜드가 링크로되었습니다.
나는 그것을 클릭한다.
지금은 아무데도 안 걸리지 만 결국에는 응용 프로그램에 들어 있으므로 회사 이름을 클릭하면 다음 번 홈 페이지로 돌아갑니다.
연락처와 같은 다른 링크를 추가 할 수 있는지 봅시다.
등록을 위해 등록하십시오.
술집에있는 모든 공통 링크.
여기 페이지 링크에 대한 추가로 시작하겠습니다.
그래서 우리는 되돌아 갈 것이고 그 다음 nav div 바깥 쪽에서 우리는이 div에서 다른 div를 만들려고합니다. 적어도 NAV 바의 왼쪽에있는 모든 내용을 수집 할 것입니다.
그래서 우리는 헤더를 가지고 있고 우리는 약간의 내용을 가지게 될 것입니다. 그리고 우리가 오른쪽에 뭔가를 원한다면 또 다른 클래스를 가진 다른 div를 갖게 될 것입니다.
여기 수업이 있습니다.
실제로 우리는 nav과 nav bar 대시 nav를 원합니다.
탐색 표시 줄 대시 탐색에 대한 이름을 묻지 마십시오.
부트 스트랩의 큰 비판 중 하나는 약간 추한 것이고 때로는별로 의미가 없다는 것입니다.
시맨틱 UI라고 부르는 경우 부트 스트랩의 의미 론적 의미에 대한 응답으로 만들어진 CSSA 프레임 워크가 실제로 있습니다.
그리고 그것은 제가 실제로 즐기는 것입니다.
그리고 나는 가르침에 대해 토론했다.
그러나 결국에는 널리 사용되지 않는 훌륭한 자습서가 아직 없습니다.
그래서 여기에 우리의 diff에.
클래스 탐색 막대 탐색과 클래스는 그 두 가지를 탐색합니다.
그리고 나서 우리가이 NFR에서 원하는 각 항목에 대해 우리는 동맹군을 추가해야하고 우리가 우리가 방금 앵커 태그를 가지고 있었으면 연결하고 싶다면 Y 내부에 추가해야합니다.
그래서 이것은 아무데도 가지 않을 것입니다.
다시 한번 이것은 About 페이지에있을 것입니다.
그리고 내가 돌아가서 새로 고침하면 우리는 지금 하나 더 연락을 다시 저장에 추가하자에 대한 링크가 있습니다.
이제 우리는 두 개의 링크가 있습니다. 이제 페이지의 오른쪽에 뭔가를 추가하겠습니다.
등록 또는 등록을 위해 두 개의 링크를 추가하고 바의 오른쪽에 로그인을 위해 두 개의 링크를 추가합시다.
우리는 여기에 nother 컨테이너가 필요합니다. divs를 사용하는 대신 divs를 사용하는 것이 더 일반적입니다. 똑같은 방식으로 작동하지만 div로 잘 작동 할지라도 우물 대신 동맹국을 원합니다. UL 대신에 조금 더 의미가 있습니다.
그래서 우리는 또 다른 UL을 추가 할 것이고이 UL은 Nav가 될 것입니다. nav bar 대쉬 nav 그리고 nav bar 대쉬.
권리.
그리고 우리는 그 철자가 틀림없이 철자가 틀림없이 이루어 지도록해야합니다.
따라서이 작업을 수행하면 해당 탐색 바의 오른쪽에 새로운 콘텐츠 그룹이 만들어집니다.
이제 우리는 단지 그것을 채울 필요가 있습니다.
그래서 나는 양쪽 가장자리에 두 개의 링크를 추가 할 것입니다.
첫 번째 것은 아무데도 갈 것이고 가입이 끝나면 로그인 만하는 또 다른 로그인 창이 나타납니다.
한 번 보자.
페이지를 새로 고치면 오른쪽에 내용이 있음을 알 수 있습니다.
그러나 가장자리에 맞춰서 주 컨테이너에 약간의 공간을 추가하는 것처럼 컨테이너에 충분한 바를 추가 할 수 있다고 수정했습니다.
탐색 막대 대신 하나를 추가 할 수 있습니다.
그래서 저는 용기 대신에 모든 것을 네 바에 넣었습니다.
따라서 클래스는 컨테이너와 같습니다.
이걸 내려 놔.
모든 것이 제대로 들여 쓰기되었는지 확인하십시오.
우리는 거기에 갈.
그것을 시험해 봅시다.
좋은.
이제 모든 것이 훌륭하고 정확하게 중심에 위치합니다.
nav 바깥에 컨테이너를 추가하고 전체 nav 바를 안에 넣으면 보여 드리겠습니다.
뭐가 어떻게되는지보십시오.
이제 내가 충분히 신선한 술집이라면 나는 사실 잘라내어 거리를 가로 질러가는 길의 일부만을 가야합니다.
그래서 컨테이너는 우리가 그 내부에 넣는 모든 것에 그것을 할 것입니다.
이 경우 우리는 네비게이션 바 내부에있는 콘테이너를 원합니다. 따라서 실제 네오 파트를 스스로 제약하지는 않지만 내부의 내용을 제한하고 있습니다.
승인.
그래서 우리는 우리의 헤터 (Hetter)를 가지고 있습니다. 우리는 왼쪽에 물건을 가지고 있고 오른쪽에 약간의 내용이 있습니다. 그래서 여기에서 볼 수 있습니다.
이제 조금 더 나아가서이 기본 탐색 모음이나 기본 탐색 모음을 문서에서 사용하고이 전체 내용을 복사하고 바로 아래에 놓겠습니다. 이제는 약간의 공간을 만듭니다.
더 명확하게하기위한 많은 의견.
기본 탐색 막대.
새로 고침 해 봅시다.
여기에이 탐색 바가 있습니다. 강조하고 싶은 몇 가지 사항이 있습니다.
하나는 우리가 메뉴에 떨어 뜨 렸지만 실제로 작동하지 않는다는 것입니다.
그리고 창 크기를 조정할 때 여기 햄버거 메뉴가 있습니다.
링크가 사라집니다.
양식이 사라지고 여기를 클릭해야하는 내용이 표시됩니다.
그러나 그것도 작동하지 않습니다.
그럼 먼저 작동시켜 보도록하겠습니다. 그런 다음이 모든 다른 부분들과 그것이 작동하도록하기 위해 무엇을하는지 이야기하겠습니다.
우리는 가서 부트 스트랩 자바 스크립트 파일을 포함시켜야합니다.
부팅 스트랩 문서로 돌아 가면 다운로드를 클릭합니다.
우리가 필요로하는 javascript 파일도 있습니다.
Cdn 버전을 사용할 것이지만 다운로드 한 폴더 안에도 들어 있습니다.
그냥 부트 스트랩이라고합니다.
예.
또는 최소화 된 버전이 Mencius를 부트 스트랩했습니다.
그리고 그것을 추가하자. 그러면 우리는 우리 몸의 맨 아래에서 그것을 끝내고 구할 것이다.
그리고 나는 우리가 자바 스크립트에 대해 말하지 않았다는 것을 안다.
스크립트가 무엇인지 알지 못하며 여기서 소스는 중요하지 않습니다.
부트 스트랩에 꽂을 것입니다.
그리고 이제 우리의 새로 고침.
우리가 여기서 보여줄 하나의 작은 문제를 해결할 수 있습니까? 자바 스크립트 부트 스트랩은 쿼리가 필요하다는 것을 알려줍니다.
이것이 무엇인지,이 메시지에 어떻게 도달했는지 걱정하지 마십시오.
그러나 나는 단지 당신에게 그것을 보여주고 싶습니다. 그래서 우리가 얻는 실제 메시지를 볼 수 있습니다.
우리는 J 쿼리를 요구할 필요가 있습니다.
그러나 가서 쉽게 얻을 수 있습니다.
우리는 자바 스크립트를 작성할 필요가 없습니다.
자바 스크립트를 알 필요가 없습니다.
우리는 단지 그것을 포함해야합니다.
그래서 우리가해야 할 일은 Jay dot com과 그 아래에서 가장 최근 버전을 선택하고이 URL을 복사해야하는 코드에있는 Jay queries CDN을 검색하는 것입니다.
이것은 Querrey 파일입니다. 그리고 우리는 여기서 다시 돌아올 것입니다.
이 스크립트 태그 중 하나를 추가 할 것입니다.
기본적으로이 정확한 코드를 복사합니다.
실제로 나는 그 정확한 줄을 복제하고이 URL을 당신이있는 jey 질의로 바꾸기가 쉬워 지도록 할 것입니다.
그 밖의 모든 것이 실패하면 그냥 이것을 입력하면됩니다.
그것은 나쁘지 않아 만약 내가하지만 제이 queery CDN에 대한 검색 하여이 저장하고 이것은 부팅 스크립트 파일을하기 전에 자바 스크립트 파일에 의존하기 때문에 쿼리에 의존합니다.
그래서 한번 더 Jay 쿼리가 어떻게 작동하는지에 대해 너무 걱정하지 않아도됩니다.
그게 지금부터 몇 분 남았 어.
하지만 부트 스트랩을 최대한 활용하려면 특히 탐색 모음과 드롭 다운 메뉴를 사용해야합니다.
우리는 지금이 두 줄을 사용해야 만 언제든지 다시 돌아가서 새로 고침 할 것입니다.
먼저 드롭 다운 메뉴가 있음을 알 수 있듯이 우선 메뉴가 드롭되었습니다.
우리는이 비디오에서 그것에 대해 이야기하지 않을 것이지만, 크기를 조정할 때 햄버거를 얻습니다.
이제 햄버거를 클릭하면 작동합니다.
숨겨진 자료를 토글합니다.
그래서 바로 여기에서 작동하는 방식으로 여기에이 작은 중단 점이 있습니다.이 모든 내용은 숨기고 우리가 보는 모든 것은 머리말과 버튼입니다.
그리고 나서 버튼을 클릭하면 이전에 숨겨진 콘텐츠가 모두 다시 나타납니다.
이제 우리를 위해서.
그러나 우리는이 4 개의 링크를 숨기고 크기를 조정할 때 숨겨진 4 개의 링크가 표시되도록 훨씬 덜 복잡한 버전을 수행 할 것입니다.
그렇게하려면이 기본 버전에서이 거대한 몬스터 인 nav bar를 어떻게 수행하는지 살펴 봄으로써 시작하십시오.
여기 중요한 라인을 지적 할께.
div 클래스 붕괴 nav bar 붕괴 우리가이 div의 내부에 넣은 것은 무엇이든간에 우리가 Mobile size를 치면 붕괴되어 버튼을 만들 수 없습니다.
숨기기에서 다시 나타나기에 토글 링을하지는 않지만 태블릿과 모바일 크기를 때릴 때 내용을 숨길 수 있습니다.
그래서 우리는 이것을 복사 할 것이고 우리는 우리가 숨기고 싶은 컨텐트 주위에 그것을 감쌀 필요가 있습니다. 그리고 우리는 이것을 여기 숨기고 싶습니다.
이 두 Juelz 그래서 우리는 작은 화면 크기를 때 우리가 숨기려면 4 개의 링크.
그래서 닫기 태그를 추가하고 저장하면 여기에 선이 있으며 이것은 중요하며 잠깐 후에 나옵니다.
아직 우리에게 영향을 미치지는 않을 것입니다.
당신은 볼 수.
이제 크기를 조정하면 축소 된 div의 모든 콘텐츠가 사라지는 지점이 바로 여기에 있습니다.
이제는 다시 나타나지 않습니다.
우리는이 햄버거를 얻지 못합니다.
우리는 아무 것도 클릭하지 않고 붕괴되어 사라졌습니다.
그리고 그것은 div 클래스 붕괴 nav bar 붕괴를 여기에 추가했기 때문입니다.
다음으로해야 할 일은 햄버거를 넣는 것입니다. 코드는 아주 간단합니다.
불행히도 우리가 스스로해야만하는 것보다 여전히 훨씬 낫습니다.
하지만 햄버거는 실제로이 모든 것입니다.
그래서 나는 그것을 복사하여 우리의 커피가 접촉하기 전에 낮잠이나 헤터의 내부에 붙여 넣을 것입니다.
그리고 우리는 내가하는 일로 돌아갈거야.
그냥 새로 고쳐 보자.
그리고 지금 내가 크기를 조정하면 나는 햄버거를 얻는다.
우리는 거기에 갈.
이제 어떻게 작동하는지 조금 설명해 드리겠습니다.
따라서 버튼이 있고 그 버튼 안에 3 개의 스팬이 있고 각 막대는이 막대 중 하나를 만드는 데 책임이 있습니다.
그래서 우리가 여기에서 볼 수있는 이미지가 아닙니다. 사실이 햄버거를 만들기 위해 좁은 막대 모양으로되어있는이 작은 막대를 만들고있는 것은 각 팀입니다.
그리고 나서 우리가 그것을 클릭 할 때 내용을 보이고 숨기는 한,이 데이터 대상 속성과 우리의 경우 B-S 예제에서 설정 한 것이 무엇이든 상관없이 우리는이 속성을 가지고 있습니다.
이제 우리의 붕괴를위한 부트 스트랩 예제 넷이 우리 클럽을위한 것입니다.
Nav. 데모처럼.
그런 다음 실제로 축소하고 싶은 콘텐츠의 ID를 변경해야합니다.
그래서 vs nav 데모와 일치하도록 변경하겠습니다.
중요한 차이점 하나를 주목하십시오.
우리는 북극 토르 (Arctic Thor)에 추가하지 않을 것입니다. CSI와 마찬가지로 C로 뭔가를 선택할 때 Octa Thorpe를 사용하여 ID를 대상으로 지정해야하므로 ID를 텍스트 이름으로 남겨 둡니다.
이제 여기에서 데모를하면 Thorpe에 추가하여 새로 고침을 저장합니다.
이제 크기를 조정하면 햄버거를 얻고 클릭하면 표시 및 숨기기를 전환 할 수 있습니다.
큰.
마지막으로 당신에게 보여줄 것은 우리가이 붕괴를 벗어나 뭔가를 움직이는 것입니다.
여기에이 링크를 가져가 봅시다.
계정 또는 about 및 연락처와 우리는 축소 된 div 바깥에서 바로 여기로 이동하고 새로 고침하면 실제로 붕괴하지 않고 볼 수 있으며 그 다음에는 붕괴 대신 다른 두 가지를 클릭합니다. 토글됩니다.
지금 나는 이것이 좋게 보인다는 것을 말하고 있지 않다 그러나 그것은 붕괴 div의 중요성을 설명한다.
따라서 붕괴가 일어 났거나 그와 관련된 다른 링크가있는 경우에는 왼쪽에있는 권리가 있습니다.
우리는 그 작은 모바일 크기에 도달 할 때마다 모두 붕괴 될 것입니다.
다시 버튼을 클릭하면 버튼이 데이터 대상 속성을 가지며 해당 ID가 숨겨져 있고 해당 버튼을 클릭하면 표시됩니다.
그리고 그것이 여기서 일어나는 아이디어입니다.
OK 마라톤의 종류.
부트 스트랩 탐색 모음을 만드는 데 필요한 많은 것들.
그러나 다시 우리가 거기에 도달하는 방법은 바로 이것을 파일에 복사하고 조각을 해부하는 것입니다.
이것이 바로 예제 코드를 가지고 필요할 때마다 우리가 필요로하는 부분을 파악할 때마다 충분하게 만듭니다.