이 부대에 오신 것을 환영합니다. 부트 스트랩이라는 새로운 도구를 소개 할 예정입니다. 부트 스트랩 홈 페이지에는 부트 스트랩 된 닷콤이 있습니다.
그리고이 소개 비디오에서 부트 스트랩이 무엇이며 왜 우리가 그것을 사용하는지 설명하기 위해 몇 분이 걸릴뿐입니다.
또한 부트 스트랩을 사용하는 사이트의 몇 가지 예를 보여줍니다.
공식 부트 스트랩을 읽는 것으로 시작해 봅시다.
부트 스트랩은 자바 스크립트 프레임 워크에서 가장 인기있는 TMLC SS로서 웹에서 반응 형 모바일의 첫 번째 프로젝트를 개발합니다.
그걸 좀 어기 죠.
부트 스트랩은 대단히 인기가 있습니다.
사실 그것은 기본적으로 가장 많은 사람들이 그것을 사용하는 것을 의미하는 허브를 얻는 데있어 가장 많은 별표가 있고 분기 된 저장소입니다. 대부분의 사람들이 도움을 얻고 부스터를 얻는 것은 사실 성공의 단일 파일이고 자바 스크립트의 단일 파일입니다. .
이제 C S S와 그 파일에 많은 자바 스크립트가 있지만 두 파일 일 뿐이므로 우리의 응용 프로그램에 포함시킬 수 있습니다.
기본적으로 우리는 다른 사람의 코드를 가져 와서 Bootstrap에서 우리 자신의 응용 프로그램을 추가했고 반응이 좋은 좋은 사이트를 만드는 데 도움을 주며 우리 자신의 코드를 작성하지 않고도 빠르게 만들 수 있습니다.
이 과정에서 제가 여러분에게 보여줄 두 가지 주요 이유가 있습니다.
첫 번째는 매우 인기있는 것입니다.
많은 장소에서 사용합니다.
많은 회사에서 많은 개발자들이 사용하고 있으며 가치가 있습니다.
그러나 두 번째는이 과정에서 우리가 멋진 웹 사이트를 빠르게 만들 수 있도록 도와 줄 것입니다.
그래서 우리가 노드와 익스프레스와 몽고와 몽구스와 무릎 깊숙이에 초점을 맞추고있을 때 우리가 배움을 배우고있을 때, 우리는 여전히 한 시간이나 두 시간을 바치지 않고도 좋은 것처럼 보이는 것을 만들 수 있습니다. 비디오를 스타일링 할 때 뭔가 붓 스트랩을 끼워 넣으면 10 분 15 초가 지나면 잘 볼 수 있습니다.
다음에 할 일은 당신에게 부두에 대한 간단한 둘러보기를 제공하는 것입니다. 그러나 부트 스트랩은 좋은 예제를 많이 포함하고 있으며 실제로이 웹 사이트에서 부트 스트랩을 사용합니다.
그래서 C Ss를 클릭하여 시작해 봅시다. 부트 스트랩은 CSSA 파일 내에 하나의 CSSA 파일과 자바 스크립트 파일로 구성되어 있습니다.
우리가 무료로 얻을 수있는 것들이 많이 있습니다.
이제 Buttons를 살펴 보겠습니다.
따라서 우리가 버튼을 만들고 싶다면 우리의 애플리케이션에 부트 스트래핑을 포함시켜 클래스에이 클래스를 추가 할 수 있습니다. 실제로 Beati와 PTEN 기본값이며 우리는이 버튼을 얻습니다.
우리는 다른 색깔을 할 수 있습니다.
형태에 대해 살펴 보겠습니다.
우리는 여기서 좋은 의견을 얻습니다.
또한 모든 것이 사이트에서 반응적임을 알리는 것이 중요하므로 화면 너비에 반응하는 것을 볼 수 있습니다.
우리는 또한 다양한 형태의 형태를 가지고 있습니다.
당신은 다른 조각을 결합 할 수 있습니다.
그래서 그들은 여기에 폼이있는 버튼을 사용하고 있습니다.
따라서 레고 조각 부트 스트랩과 많은 방법이 있습니다. 레고 조각으로되어있어 적합하다고 생각할 때 함께 넣고 사이트에 추가 할 수 있습니다.
우리는 이러한 구성 요소의 대부분을 살펴볼 것입니다.
우리가이 작업을 시작하고 부트 스트랩 코드를 작성하기 시작하면 대부분의 큰 조각들.
이제 우리는 다음 단계로 넘어가 자 다음 탭을 보게 될 것입니다. 구성 요소 구성 요소는 우리가 사용할 수있는 부트 스트랩의 더 큰 부분 중 일부를 포함하며 여기에는 탐색 모음과 같은 항목이 포함되어 있습니다.
그리고 이것은 아마 약간의 코드로 볼 수있는 많은 사이트가 사용하는 부트 스트랩 중 가장 인기있는 부분 중 하나 일 것입니다.
그것은 많이 보입니다. 그러나 우리가 처음부터 NAV 바를 쓰고있을 때보 다 훨씬 적습니다.
그리고 이것은 드롭 다운 양식과 함께 여러 종류의 막대 다른 색상이 일부는 스크롤됩니다 페이지의 상단에 고정되어 있습니다.
점보 트론 (Jumbotron)과 같은 다른 구성 요소는 웹 사이트 진행률 막대의 일부 내용을 보여주는 방법입니다.
이것들은 모두 부트 스트랩과 함께 제공됩니다.
따라서 부트 스트랩이이 모든 조각에 포함되는지 궁금해 할 것입니다. 부트 스트랩을 사용하는 모든 사이트가 똑같이 보인 스타일이 이미 미리 지정되어 있습니다.
그리고 대답은 '예'입니다.
사이트에서 부트 스트랩을 사용하는 방법에 따라 다릅니다.
나는 부트 스트랩을 잘 사용하는 회사 나 프로젝트가 부트 스트랩을 사용하고 있다는 사실을 알기 어렵다고 주장 할 것이다. 왜냐하면 부트 스트랩이 주요 컴포넌트를 사용하기 때문에 실제로 들어가서 자신 만의 스타일을 쓸 수 있기 때문이다.
색상을 변경하면 글꼴이 호버 효과 중 일부를 변경합니다.
부트 스트랩과 동일한 색상과 모든 것을 사용할 필요는 없지만 부트 스트랩 스타일을 사용하는 것이 본질적으로 나쁘다는 것을 의미하지는 않습니다.
그리고 우리는 확실히 둘 다 할 것입니다.
그래서 우리가 사이트를 만들 때 포커스가 실제로 프론트 엔드에 있지 않다면, 우리는 단지 빠르게 볼 수있는 무언가를 만들고 싶습니다.
기본적으로 프로토 타입 프런트 엔드는 부트 스트랩을 사용하며 많은 부분을 실제로 수정하지는 않습니다.
그러나 우리가 조금 더 큰 무언가에 대해 작업하고 있다면, 부트 스트랩을 전혀 사용하지 않고 사용하는 것처럼 보이기를 원하지 않는다면 우리는 들어가서 우리 자신의 스타일을 추가 할 것입니다. 기본적으로 스프레이 페인트 부트 스트랩 맨 위에.
다음으로하고 싶은 일은 부트 스트랩으로 구축 된 사이트 중 일부를 소개하고 Buddh 여행은 실제로 해당 사이트 중 일부를 선보이는 공식 웹 사이트입니다.
엑스포를 클릭하면 이미 열어 놓았습니다.
아름답고 고무적인 쇼케이스가 부트 스트랩을 사용함을 알 수 있습니다. 따라서 이들 중 일부를 열어 새 탭을 열 수 있습니다.
그리고 이것들은 가장 최근의 것입니다.
이 사이트에는 수백 명이 있습니다.
당신은 그들 중 톤과 톤을 볼 수 있고 스크롤과 스크롤링을 유지할 수 있습니다. 그리고 나서 우리는 몇개 더 오래된 곳으로 갈 수 있고 그것을 사용하는 많은 다른 사이트가 있습니다.
그리고 그들은 모두 똑같은 것처럼 보이지 않습니다.
네, 아마도 그들 중 많은 사람들이 nav bar를 가지고 있습니다.
어쩌면 그들 중 많은 사람들이이 풀 스크린 대형 이미지 레이아웃을 가지고 있을지도 모르지만 그것은 순수하게 책임 져야하는 것보다 더 많은 디자인 트렌드입니다.
그럼 이들 중 일부를 살펴 보겠습니다.
이 웹 사이트 템플릿을 실제로 만드는 회사 인 Creative Tim입니다.
그리고 우리는이 멋진 이미지 격자를 볼 수 있습니다.
그것은 매우 반응 적입니다.
내가 이것을 축소하면 여기에 작은 항법 바가 생깁니다.
따라서 이것은 모든 것을이 그리드에 배치하는 방식 인 부트 스트랩 구성 요소입니다.
부트 스트랩은 부분적으로 그 책임이 있지만 부트 스트랩 버튼을 기본으로 사용하고 있지 않음을 알 수 있습니다.
그들은 그들을 바꿨습니다.
상황이 다르게 보입니다.
그래서 이것은 정말 멋진 사이트 인 부트 스트랩을 사용하는 것이 정말 좋다고 생각합니다.
잘 작동하고 부트 스트랩을 사용하지만 100 % 부트 스트랩에 의존하지 않습니다.
하나 또는 두 개 더 살펴 보겠습니다.
그래서 이것은 Indicus라고 불리우며 그와 같은 것을 가리 킵니다.
분명히 사람들이 사용하는 디지털 제품을 설계하고 제작합니다.
여기 아래로 스크롤 해 봅시다.
우리가 가지고있는 것을 보아라.
따라서 Pearcey SS에는 이전에 언급했듯이 정리하고 정리하는 데 도움이되는 부트 스트랩 그리드 시스템으로 구축 된 일부 콘텐츠가 있습니다.
점점 더 좋아지고 있지만 부트 스트랩은 응용 프로그램에 물건을 배치하는 데 정말 유용합니다.
그리고 여기에 작은 꼬리말 바가 있습니다. 여기에 탐색 바가있어서 정말 재미 있습니다. 엑스포는 부트 스트랩을 사용하여 프로젝트를 사용하는 방법과 회사가 수정하는 모든 다른 방법을 확인하는 데 시간을 할애합니다. 자신의 글꼴을 자신의 색으로 추가하고 많은 사이트가 사용하는 핵심 구성 요소가 무엇인지, 왜 부트 스트랩을 사용할지 결정해야합니다.
그리고 제 의견으로는 우리가이 장치의 비디오와 탐색 막대 및 모든 것에 대한 응답 성을 높이기 위해 그리드 시스템에 실제로 도달하게됩니다.
승인.
끝내기 위해 우리가 만드는 간단한 사이트를 보여 드리겠습니다.
이것은 무거운 애 태우기라는 우리의 신생 기업입니다.
그것은 완벽한 고양이 동성애자를 찾는데 도움을 주며 부트 스트랩을 사용합니다.
모르간 (Morgan) 버튼을 등록한 것과 마찬가지로 여기에 탐색 바가 있습니다.
우리는이 작은 아이콘들을 얻습니다. 그리고 우리는 여기에 텍스트와 작은 꼬리표 줄 그리고 우리의 단추를 갖습니다.
그런 다음 모든 것이 크기가 조절되면 모든 것이 반응합니다. 주변을 돌아 다니며 움직이는 것을 볼 수 있습니다.
그리고 가장 중요한 것은 우리는 그 작은 햄버거를 얻습니다. 우리는 모바일 친화적 인 nav bar를 가지고 있습니다.