Tip:
Highlight text to annotate it
X
>> NEEL 메타 : 그래서 인사에 여기에보고 모두,
또는 온라인보고, 또는 원격으로.
내 이름은 닐이고,이 CS50입니다.
그리고 오늘의 세미나는 응답 부트 스트랩과 웹 디자인.
그것은의 대상이다 내 마음에 매우 가깝습니다.
바라 건데, 그것은 것입니다 당신의 심장에 가까운
뿐만 아니라 오늘의 세미나의 말.
그래서 부트 스트랩.
얼마나 많은 당신이 수행 한 모든 웹 개발 가지 전에?
좋은 양?
조금.
>> 그래서 부트 스트랩은 세계 대부분의 인기, 프런트 엔드 프레임 워크입니다.
내가 선택한 by-- 그것은 사용되는 임의 websites--의 커플
Lyft, 뉴스 위크, 보그.
그것은 웹 사이트의 숫자에 의해 사용됩니다.
그것은 웹 디자인 프레임 워크의 그 당신이 당신의 웹 사이트를 만들 수있게된다
아름답고 반응 모두.
그리고 나는이 이상 갈거야 여기에 두 가지 개념.
아름다운.
그래서 당신은 정상적인 웹 사이트가 단지 HTML에 의해 이루어집니다 왼쪽.
당신은 수업 시간에 HTML을 배운 길이의 섹션.
부트 스트랩은 만드는 방법 당신의 웹 사이트는 아름다운.
당신은에 무엇을 취할 수 화면의 왼쪽
과에 무엇으로 바꿀 아주와 화면의 오른쪽,
아주, 아주 작은 코드입니다.
>> 당신은 좋은 파란색 버튼을 얻을, 당신은 얻을 공상은, 화면에 모서리를 둥글게
목록보기를 얻을, 당신이 얻을 카드, 그래서 약간의 코드에.
더 CSS는 실제로 없다 그 사용자가 직접 작성해야합니다.
그래서 부트 스트랩을 수행 할 수 있습니다 이러한 사전 구축 된 CSS를
당신은 넣을 수있는 구성 요소 웹 페이지의 내부
이없이 아름다운 보이게 자신에 아주 많은 일.
정말 부트 스트랩이다, 시작점,
웹 개발 모험.
그래서 그냥있을 때 웹 사이트를 조롱,
그것은 시작하는 아주 좋은 장소입니다.
당신은 좋아 보이는 웹 사이트를 얻을 수 있습니다 아주, 아주 약간의 작업으로.
그리고 실제로, 우리는거야 이에게 자신을 수행하는
같은 다섯 가지의 과정에서 minutes-- 10 분 이내에.
그래서 꽤 쉽게 훌륭한 웹 사이트를 확인하십시오.
그래서 첫 번째 부분입니다.
>> 두 번째 part-- 반응.
사람들은 현재뿐 아니라 할 자신의 노트북 컴퓨터에 웹에 액세스 할 수 있습니다.
사실, 2014 년으로, 더 많은 사람들이 모바일 기기를 통해 웹에 액세스,
전화, 또는 정제, 또는 같은 서비스, 등등 웹 사이트보다.
그리고 웹 사이트는 전통적으로왔다 노트북이나 데스크탑 설계
마음에.
그래서 웹 사이트가 종종 있습니다 아주 잘 휴대 전화에 적합.
혹시 방문하는 경우 휴대 전화에 harvard.edu,
그것은 성가신 가지의 경험, 맞죠?
이 반응이 아니다 때문이다.
우리가 만들려고 노력하고 있습니다 반응하는 웹 사이트,
그 사람의 화면 크기에 대응.
>> 이 전화의 경우 그래서, 그것은이다 휴대 전화에 갈.
이 정제 인 경우에, 그것의 태블릿에 갈.
이 일치하도록 조정 사용되는 화면.
그래서 부트 스트랩도 일부 제공 그 매우, 매우 유용한 유틸리티.
그리고 우리는뿐만 아니라 그 논의 될 것입니다.
그래서 다시, 두 부분이 있습니다 아름답고 책임 Bootstrap--.
우리는 이들에 대해 이야기하는 것입니다.
첫째, 아름다운.
그리고 반응.
>> 우리가있어 그래서 모든 코드 today--에 대해 이야기 할 것
우리는 예를 많이 할 겁니다, 많은 도전, 그리고 그것은 on--
모두 여기에이 웹 사이트에 살고있다.
이 슬라이드는 우리가 보낸 것입니다.
당신이 여기 있다면, 당신은 느낄 수 있습니다 무료는 아래 작성하지합니다.
원격으로보고있는 경우에, 느낌 컴퓨터에이를 끌어 무료
게다가.
당신은 아마 동안이 필요합니다 이 세미나의 과정.
>> 그래서 우리는을 사용하는거야 CodePen라는 웹 사이트,
이는 공동 코딩입니다 이 세미나 기간 동안 환경,.
그리고 CodePen-- 나는거야 실제 fast-- 당신을 보여
당신이 쓸 수 있습니다 HTML 협력.
나는 그것을 보낼 수 있습니다, 그것을 쓸 수 있습니다 너희들은 너희들을 편집 할 수 있습니다.
당신은 원격있어하더라도, 당신을 아직도 그런 식으로 액세스 할 수 있습니다.
당신은에서 HTML 코드를 입력 할 수 있습니다 상단과 자동거야
로 변환 될 맨 아래에있는 웹 페이지를 참조하십시오.
그래서 당신을위한 방법 빨리 코드를 시도
물건의 종류를 할 필요없이 당신의 IDE, 또는 자신의 웹 사이트에,
또는 무엇이든.
>> 그래서 가서이를 끌어 웹 사이트, 당신은 원격 있다면
또는 당신이 여기 있다면, 특히 원격 경우.
is.gd/cs50boostrap.
어떤 모자도없고, 밑줄, 아니 아무것도.
분들을 따라서 여기에, 그냥 나에게 엄지 손가락을주고
당신이 끌어 때까지 해당 웹 페이지입니다.
좋다?
>> 청중 : 네.
>> NEEL 메타 : 그래서 우리는거야 단지 두 번째에 해당한다.
그래서 첫 번째, 우리는에받을거야, 어떻게 당신은 당신의 웹 사이트 아름다운해야합니까?
우리는 지루한하는 방법을 배울거야 오래된 HTML, 내가 전에 당신을 보였다처럼,
과에 그 설정 정말 좋은 구성 요소,
좋은 위젯처럼, 니스, 컬러 버튼, 레이블 및 테이블,
모든, 부트 스트랩을 사용.
그래서 우리는 모든에 가서 수 있다면 방금 뽑아 CodePen.
그것은이와 비슷한 모양입니다.
그것은 모두를 위해 다음과 같이 보입니까?
>> 청중 : 네.
>> NEEL 메타 : 당신은 원격 인 경우에, 그것을 뿐만 아니라 다음과 같아야합니다.
그렇지 않으면, 곧 방법을 보여줍니다 당신은 같이 얻을 수 있습니다
비디오의 미래 부에.
그래서 여기에 우리가 쓴 아주 기본적인 HTML,
종류처럼 당신했습니다 수업 시간에 사용하고있다.
그것은 아주 기본입니다.
노 프릴 스.
그리고 우리는 몇 가지 물건을 가지고있다.
우리는 매우를 설계했습니다 아주 기본적인 시작
Yalp 전화! 있는 당신은 할 수 지역의 레스토랑을 찾아,
및 리뷰를 찾아 그 모두에 대한 지침.
그것은 매우 좋은 개념이다.
그것은 해본 적이 있어요.
너무, 매우 독특한 이름이다.
>> 그래서 우리가 시도하는거야 소유자 도움이 할 일은
Yalp의! 자신의 웹 사이트를 만들 정말, 정말 근사.
그래서,와의 소유자를 시작합니다 Yalp! 조금 검색을했다
상자, 그리고 약간의 버튼, 그리고 아마 조금
에 대한 강조 영역 강조 레스토랑, 다음
다른 레스토랑의 목록 지역에있는 그.
그래서 우리는 그냥 통과 할 수 있습니다 HTML 코드 정말 빨리.
당신은 HTML과 사람은 어떻게 편안?
우리는 조금 짓을했는지 부와 또한 클래스.
어지간한?
>> 그래서 그냥 요점을 되풀이으로, HTML은 것에 대한 모든 것입니다
말할 태그 또는 요소 컴퓨터가 어떻게 웹 페이지를 배치합니다.
그래서이 H1은 오신 것을 환영합니다, H1을 시작 here-- Yalp에! 컴퓨터를 알려줍니다 h1-- 끝,
큰 헤더를 그리는 것이 Yalp에 오신 것을 환영합니다,라고!
이 내부.
우리는 또한 형태가있다.
우리는 다음과 같이 입력 할 수 있습니다, 텍스트 입력, 텍스트 상자로 렌더링되는
당신의 쓰기.
또한 버튼이 있습니다.
당신은 좋은, 클릭 가능한 버튼을 얻을.
그것은 바로 아무것도하지 않습니다 지금,하지만 당신은 버튼을 얻을.
당신은 div에, 또는 분할에있을 수 있습니다 여러 그룹으로 페이지를 휴식.
>> 당신은, 단락을 가질 수있다 당신은 버튼이 있습니다.
당신은 다음 단락을 가지고있는 경우 당신은, UL를 정렬되지 않은 목록이
그리고, 리튬의 내부 목록.
그래서 이것들은 아주 기본적인 웹 페이지의 빌딩 블록.
그리고 실제로, 거의 당신이 보는 모든 웹 사이트
건설 될 예정이다 이러한 도구를 사용하여 동일.
물론, 그들은 모든 할 우리가이기 때문에이 나쁜 모양
조금 그것을 양념 것.
그래서이 지루한 옛 HTML과 시작하자 아름다운 사이트로 변환
것을 우리는 단지 몇 분 전에 보았다.
>> 그럼 아주 간단한 시작하자.
그래서 우리는 여기에이 버튼이 있습니다.
우리가 본대로 부트 스트랩에서, 우리는 할 수 좋은, 아름다운, 푸른 버튼이 있습니다.
그리고 사용자 정의 CSS를 수행하여하지 이루어집니다.
여기에는 사용자 정의 CSS가 없습니다.
즉 클래스를 추가하여 이루어집니다 당신의 HTML 요소에.
당신은 클래스, 또는 HREF의를 시도했을 경우 앵커, 또는 유형 = inputs--에 대해 "텍스트"
HTML 요소는 이러한 속성을 가질 수있다.
그들은 추가 정보를 가질 수있다 당신이 그들을 줄 수도있다.
>> 그리고,이 경우, 클래스 속성이다.
당신이 쓰는 것 그래서, 버튼 클래스 = 문자열 안에 뭔가.
그리고 그 속성은 말할 것 컴퓨터는,이 모든 오래 버튼 아니다.
그것은에있는 버튼의 버튼의이 클래스.
그래서 부트 스트랩은, 경우에 당신은 그것을 줄 당신의 요소에 특정 스타일,
그것은 그것을 어떤 방법을 그릴 것입니다.
그래서 BTN-차 BTN "물품.
BTN은 버튼의 약어 인.
이제 것을 알 수 있습니다 나의 추한 버튼 설정
좋은, 아름다운, 파란색 버튼으로.
우리가 그것을 클릭하면 그것은 아주 좋은 보인다.
>> 그래서 우리는이 무슨 일입니다 BTN 클래스와 BTN-기본 클래스
우리의 요소.
그리고 부트 스트랩 나는, 확인, 가서 말할 것이다 이들 두 개의 클래스가 존재한다는 것을 알고있다.
이 두 관계가있는 요소 클래스는 다음과 같이 그려해야합니다.
그래서 당신이 부착 방법의 핵심이다 부트 스트랩의 요소에 스타일.
당신은 단지 그들에 클래스를 첨부 는 적합한으로 그것을 밖으로 가중됩니다.
그래서 여기에 또 다른 예입니다.
입력, 우리는 추가 할 수 있습니다 클래스 = "폼 컨트롤".
어디 그리고 나는 곧 보여줄 것이다 어떤 클래스를 찾을 수 있습니다
요소의 각 종류의 사용할 수 있습니다.
하지만 클래스가 우리 단지 라이트 박스, 좋은, 둥근 모서리를 가지고
그것은 그것을 가지고 좋은 패딩을 가지고 그것에 좋은, 푸른 빛.
>> 우리는 또한이 형태로 갈 수 있습니다.
그리고 클래스 = "폼 인라인"할 것 우리의 양식, 당신이 상상할 수 있듯이, 인라인.
그래서 찾고 조금 더 우리는 이미 전에 한 무슨있다.
우리의 나머지 부분을 스타일을에 가기 전에 그래서 페이지, 무엇에 대한 질문이 우리
했습니까?
우리는 단지 연결 클래스 우리의 다양한 요소에.
그리고 나중에 보여 줄게 당신은 어떻게 할 수 클래스가 사용할 수있는 알아낼.
우리는 클래스를 연결하는 특정 스타일을 가지고있다.
그리고 브라우저를 알려줍니다 사용하여 페이지 레이아웃하는 방법
부트 스트랩의 제공 스타일.
청중 질문?
>> 좋은 지금까지?
시원한.
많은 도전 부트 스트랩은 그냥와
구성 요소가 무엇인지 알기 가능한 방법 당신이 그들을 사용합니다.
그리고 그 모든 학습한다 또한 경험과 함께
설명서를 읽기를 통해, 이는 곧 얘기하자.
그래서 우리는이 사업부가 있습니다.
그냥 지루한, 오래된 물건입니다.
우리는 어떻게 든 그것을 강조하고 싶다.
부트 스트랩에 그래서,가 사용 가능한 구성 요소의 많은.
그리고 이것은 getbootstrap.com입니다.
그것은 매우 유용한 참고 자료입니다.
그것은 일을 포함 그때 엔 여기에 당신이 버튼을 할 방법은 다음과 같습니다.
그리고 당신은 탐색 막대를 할 수있는, 당신은 할 수 라벨, 당신은 진행률 할 수 있습니다,
당신은 목록 그룹을 할 수 있습니다.
기본적으로, 모든 종류의 의 당신은 웹 페이지를 볼 수 있습니다.
>> 여기에 우리가 지금하려고합니다 하나입니다.
그것은 패널이라고.
혹시 구글을 사용하는 경우 지금, 그들은 카드를 가지고있다.
또는 안드로이드 장치는 카드를 가지고있다.
그들은 작은 흰색 상자가 즉, 내부에 물건이있다.
그래서 우리는 시도 할거야 자신은 여기에 물건을 사용하는 것이
패널했다.
그래서 우리는 클래스를 첨부 할 경우 = "패널 우리의 외부 DIV에 패널 기본 "
우리는 = DIV 클래스를 첨부 -하자 그냥 설명서를 참조하십시오.
DIV 클래스 = "패널 제목"과 다음 DIV 클래스 = "패널 몸".
다시 말하지만, 걱정하지 마 이 코드를 기억.
그것은 온라인으로 제공됩니다.
>> 그래서 우리는 지금 우리의 지루한을 이런 짓을하고, 이전 DIV이 좋은, 작은 카드에 돌았 다.
그것은 좋은 패딩을 가지고, 그것을 국경을 가지고, 그것은 눈에 띄는
페이지의 나머지 부분에서, 이는 꽤 멋지다.
그럼에 가자이 받기 변경 버튼 방향이 좋은 모양입니다.
청중은 누구에게 싶어 나 나는 버튼에 무엇을 할 수
이 부트 스트랩을 사용하여 좋은 보이게?
네?
>> 청중 : 우리는 클래스를 추가 할 수 있습니다.
그리고 우리는 = "BTN BTN-기본"클래스를 할 수 있습니다.
NEEL 메타 : 예.
다른 한 무리가있다 buttons--에 사용할 색상
또는 그 문제에 관해서는 아무것도합니다.
우리는 BTN-위험을하고 빨간 만들 수 있습니다.
우리는 거기에 갈.
우리는 녹색 할 BTN-성공을 할 수 있습니다.
무리가있다 BTN-info-- 우리는 할 수있다 당신이 사용할 수있는 것들.
그래서 나는 지금 당신을 위해 약간의 문제가 있습니다.
그래서 한 가지 더있다 내가 남아있는 것을 해제를 스타일.
이 최고 레스토랑.
>> 그리고 우리는 물건을 사용하려면 그 스타일을 목록 그룹을했다.
그래서 당신에게 나의 도전이다 getbootstrap.com--로 이동
난 여기를 끌어 있습니다.
getboostrap.com.
찾아 getbootstrap.com로 이동 그들이 목록 그룹을 통해 이동 섹션.
그리고 당신은 여기를 볼 수 있습니다 예를 들어 오른쪽 클래스
당신은 확인하는 데 사용할 수있는 당신의 이러한 좋은 목록 그룹으로 목록.
이러한 예를 근무하고 있습니다 코드 예제, 어떤
코드 당신은 어떤 HTML 코드를 사용 당신이 사용하고, 그 출력 무엇.
>> 그래서 내 문제는 너와 getbootstrap.com에 이동
여부를 당신은 여기에서 또는 집에서하고 있으며, 시도하고이 UL에 스타일을 추가하는
그것이 좋은 보이게한다.
그리고 목록 그룹 스타일을 사용합니다.
당신은 몇 분 정도 걸릴 싶어 그리고, 문서를 검색
이 자신을하려고?
당신은 웹 개발을하고있는 것처럼 때문에, 당신은 당신의 많은 작업을 실현합니다
독서 할 것입니다 이 문서.
그래서 나는 그것이 익숙해 좋은 생각 문서를 읽는 방법과,
어떻게 어디에서 무엇을 알아 내기 위해, 어떤 코드를 사용할 수있는 예,
당신이 활용할 수있는.
>> 그래서 다시, getbootstrap.com, 구성 요소 탭으로 이동,
다음 그룹을 나열하려면 아래로 스크롤합니다.
그리고 당신은 코드의 예를 볼 수 있습니다 그 당신은 당신의 HTML가 적합하게 사용할 수 있습니다.
그래서 몇 분을 가지고 시도하고 스스로 탐구,
당신이 여기에서 또는 집에서하든.
당신이 집에 있다면, 비디오를 일시 정지, 아마도, 자신을 그것을 밖으로 시도.
경우에 가면 당신은, 여기 우리의 website-- 페이지를 새로 고칠 경우,
당신은 거기에이 표시됩니다.
이 바로 그 코드는 그냥 바로 거기에 새로운 스타일을 추가.
그래서 몇 분 정도 걸릴.
내가 당신이 좋은 느낌 때 알려 그 때 또는 대해 완전히 잃어버린 것입니다.
좋은 소리?
시원한.
빠른 제외하고 당신의 사람들을 위해 집에서, 우리는 기다리는 동안,
당신은 GitHub의 사이트에 가면 그게 내가 몇 슬라이드 전에 올려
비디오의 시작 부분쪽으로 나는, GitHub의의의 repo, 저장소가
이 이야기합니다.
우리가 알 수있을 것입니다 이러한 모든 코드 예제 바로 여기에 저장됩니다 얘기.
그래서 당신은,이-1.html 도전에 가면 지금 우리가 가지고있는 모든 코드는
우리의 CodePen에.
그래서 그냥 가서하고, 복사 할 수 있습니다 이, 그리고 자신의 CodePen에 붙여 넣습니다.
그리고 그 방법은, 당신은 유지할 수 있습니다 우리가 여기서 무슨 일을하는지와.
그래서이 페이지를 열어이뿐만 아니라 우리 세미나의 나머지 부분을 통해 이동합니다.
다시 말하지만, 당신은 당신이 무엇을 같이 할 화면 하단 아래 참조
그곳에.
좋은 느낌?
고체.
의 정보는 다음의 제품에 다른 사람을 기다리는하자 그들이 무슨 일을하는지와 함께 마무리.
>> 네?
>> 청중 : 내가 원하는 것을 가정 home--에서 부트 스트랩을 사용하는
NEEL 메타 : 예.
청중 : 나는, 웹 사이트에 참조 이 페이지를 시작하기.
그들은 나에게 옵션을 제공 부트 스트랩, 소스 코드, 또는 말대꾸.
나는이 어떤을 원하세요?
>> NEEL 메타 : 예.
그래서 질문은, 당신은 어떻게받을 수 있나요된다 우리 자신에 의해 부트 스트랩 사용하기 시작?
그것은 단지에 발생 마술 바로 여기에 작동합니다.
우리가 시간이 있다면 세미나의 끝,
어떻게 당신이 할 수있는 당신을 보여 드리죠 자신의 웹 페이지에 그것을 얻을.
여기처럼, 나는 실제로했습니다 일부 설정을 넣어 그
자동으로해야합니다 로드,하지만 난거야
당신이에서 그것을 할 보여 자신의 웹 페이지에 흠집.
>> 청중 : 감사합니다.
>> NEEL 메타 : 예.
좋은 질문.
좋은 느낌?
좋은 느낌?
시원한.
그럼 누가 나를 그들이 만든 방법을 이야기하고 싶어 이 것은 좋은 Boostrappy 있습니까?
우리는 UL에 추가 첫 번째 클래스는 무엇입니까?
청중 : 클래스 = "목록 그룹".
NEEL 메타 : 예. 목록 그룹.
그리고 우리는 LIS에 어떻게 연결합니까 후?
다른 사람?
청중 : 다음 그리고, 후 즉, 클래스 = "목록 그룹 항목".
>> NEEL 메타 : 예.
>> 청중 : 그리고 그것의 다음 하나 같은.
>> NEEL 메타 : 리 클래스 = "목록 그룹 항목".
거기 당신은 간다.
우리는 우리의 좋은 목록 그룹이, 우리가 기대했던 것처럼.
그래서 당신이 이동합니다.
10 분, 우리가 만든 이 지루한 오래된 Yalp! 페이지
좋은 및 전문 본다.
그리고 그것은 시작에 불과합니다.
그래서 지금 당신이 느끼는 그것에 대해 좋은,하자
그냥 가서 이야기 몇 가지 이상의 성분이
당신과 같이 편리하게 할 수 모험을 통해 이동합니다.
>> 물론, 여기에 많은 사람들이있다.
그리고 지금 당신이 배운 것을 목록 그룹을 수행하는 방법,
당신은 꽤 많이 가르 칠 수 자신은 어떻게 이들 중 하나를 수행합니다.
하지만, 물론, 그냥 해보자 그리고, 더 자신을 몇을
당신에 대한 느낌을 얻으 있도록 어떻게 당신이 그들을 사용할 수 있습니다.
난 그냥 갈거야 여기 예.
다시, 코드는 그냥 붙여 그 여기에 바로 여기에 사용할 수 있습니다.
그래서를 올려 주시기 바랍니다.
>> 그래서 우리는 이미 겪었어요 이러한 몇 가지 예.
그래서 우리는, 버튼이있는 우리 이미 수행하는 방법을 보았다.
우리는 버튼을 더 크게 만들 수 있습니다.
버튼은 그 수업으로는, 간다 BTN-LG BTN 과 BTN 기본은 흰색합니다.
그래서 이것은 우리의 버튼을 더합니다 보다 그것을 그렇지 않으면 수 있습니다.
당신이 가지고있는 경우는, 편리 수 있습니다 큰 버튼 또는 무언가를 제출합니다.
우리는 목록 그룹의 예를 보았다 우리는 양식 예를 보았다.
>> 하나의 매우 중요한 하나의 아이콘이다.
그리고 아이콘을 추가 할 수있는 방법 체크 체크와 같은 흥미로운 것들,
상표 또는 흑자, 또는 친구 아이콘, 또는 다시 시작 아이콘,
웹 응용 프로그램 또는 무엇이든.
그래서 다시, 여기에 만약 우리, 구성 요소, glyphicons,
부트 스트랩에 사용할 수있는 아이콘입니다.
철저한이있다 여기에 모든 것들의 목록입니다.
따라서 단지 예로서, 의 시도하고 하나를 추가 할 수 있습니다.
>> 그래서 페이스 북과 같은, 우리는 노력에있어 추가 친구 버튼이 있습니다.
의 처음 몇 가지 스타일을 추가 할 수 있습니다.
버튼 클래스 = "BTN-성공 BTN".
그리고 거기 우리는 간다.
의 여기에 아이콘을 추가 할 수 있습니다.
무엇 아이콘, 당신이 생각 여기에 넣어 의미가 있을까요?
당신은 아마에 본 적이 일부 웹 페이지 또는 무엇 이건,
그러나 아이콘의 예 무엇을 그 이 버튼 내부에 잘 갈 수 있는가?
이보기를 찾아 주시기 바랍니다 당신은 어떤 영감을 필요로하는 경우.
도움이 많이있다 여기에 가능한 것.
네?
>> 청중 : 아마 glyphicon 사용자 하나?
NEEL 메타 : OK.
이 하나.
그건 꽤 좋은입니다.
네.
페이스 북에, 나는 그것을 생각 그렇게 조금 보일 것이다.
그래서 여기에 우리가 갈 방법 우리의 페이지에 아이콘을 추가.
우리는 단지 span-- 기간이있다가 뭔가 중립 컨테이너.
사업부 뭔가의 컨테이너입니다, 범위는 다른 컨테이너입니다.
div에 줄 바꿈이 그들 주위, 스팬하지 않습니다.
그래서 다른 방법을있다 일반 용기를 가지고.
그것은 이해가되지 않습니다처럼 넣어 단락 또는 아무것도의 내부.
우리는 그것을 넣어있어 하지만 뭔가 내부,
그래서 우리는 단지 범위 안에 넣어.
그래서 스팬 클래스 = glyphicon glyphicon 사용자 "가까운 기간.
그리고 우리는 지금이 버튼 내부의 아이콘입니다.
>> 그래서 완전히 달리 보이지 않는 당신은 facebook.com에 무엇을 볼 수 있습니다.
그리고 그것은이 할 수있는 그 좋은 데요 실제로 어느 곳에 당신이 원하는 될 수있다.
당신의 헤더 바에서, 목록의 그룹.
도대체 무엇이.
그럴 필요는 없다 버튼의 내부.
예로서, I가 수 있도록 여기에 같은 클래스를 넣어.
"glyphicon의 glyphicon 사용자".
그리고 그것은 단지 같은 나타납니다.
그래서 이들은 당신이 범위를 사용할 수 있습니다 icons-- 클래스 = "glyphicon의 glyphicon - 무엇이든".
그리고 당신이 추가 할 것 당신이 원하는 목적지 아이콘.
아이콘은 매우 중요 웹 사이트의 모양을 만드는 부분
전문적이고 잘.
그래서 과장,하지만 그건하지 않습니다 종종 좋은 것은 알고 있습니다.
>> 패널, 다시.
난 그냥 요점을 되풀이으로 다시이 작업을 수행 할 수 있습니다 그들이 종류의 관여하고 있기 때문이다.
당신은 그에서 알 수 있습니다 일반 HTML을 선회
부트 스트랩 - afied에 사이트 사이트, 당신은 할 수 있습니다
웹 사이트에 별도의 구조를 추가 할 수 있습니다.
예를 들어, 우리는이 엑스트라 여기에 div를 바로 그 때문에
패널을 만들 필요가있다.
그래서 그냥 마음에 계속 그 당신이 여분의 구조를 가지고해야합니다.
그래서 "패널 패널 기본".
아마 패널 헤더입니다.
나는 그것의 패널 제목을 생각합니다.
네.
우리는 거기에 갈.
그래서, 다시, 우리의 패널이 있습니다.
>> 한 가지 더 그 우리 아직 테이블을 포함하지 않았다.
추한의 기본 모양의 종류에 의해 테이블.
이처럼.
그러나 테이블은 물론이다 매우 중요한 부분
당신은 웹 개발에 무엇을 할 것인지의.
Pset7, 예를 들어, CS50에서 곧 나올 것입니다 금융,
당신은 테이블을 많이 사용합니다.
웹 DEV 많이 많이 사용 정보를 표시 할 테이블,
주식, 또는 점수, 또는 무엇이든있다.
>> 그래서 테이블을 스타일링하는 것은 실제로 매우 간단합니다.
당신은 당신의 테이블에 테이블 클래스를 추가 할 수 있습니다.
그리고, 나는 꽤 좋은 모습, 말을 감히.
당신은 여분의 일을 할 수있다, 같은 "테이블 테이블 스트라이프".
그리고 당신은 여기에 결과를 볼 수 있습니다.
당신은 테이블 경계 할 수 있습니다.
당신이 할 수있는 선택의 여지가있다.
그러나 기본적으로 추가 테이블, 테이블 클래스,
테이블이 꽤 좋은 보이게됩니다.
그래서 간단한 개요입니다 더 중요한 스타일 중 일부
및 구성 요소는거야 부트 스트랩에 사용할 필요가있다.
그래서 랩 생각 우리의 아름다운 부분입니다.
방법에 대한 지금 질문 당신의 웹 사이트 아름다운 만들려면?
당신은이를 사용할 수있는 방법 당신의 이점에 구성 요소?
좋은 느낌?
네?
청중 : 아마이 바보 같은 질문은,
하지만 당신은 위키 백과에 부트 스트랩을 사용할 수 있습니까?
당신은 위키 피 디아의 페이지를 편집하는 경우?
NEEL 메타 : 예.
질문은 그래서, 내가 해요 위키 백과 페이지를 편집,
나는 거기에 부트 스트랩 스타일을 포함 할 수있다?
>> 청중 : 네.
>> NEEL 메타 : 그리고 그래서 부트 스트랩입니다 기본적으로 큰 CSS 스타일 시트.
CSS 스타일 시트는, 때마다 말한다 나는,이 클래스가 이러한 스타일을 첨부합니다.
부트 스트랩의 CSS 스타일 시트 그래서 .btn과 같이 될 것입니다,
버튼 클래스는, 같은 얻을 것이다 둥근 모서리 테두리 또는 무엇이든.
그러니까 기본적으로, 단지 그것을 부트 스트랩 클래스의 무리와 스타일의 무리
이러한 클래스에 지정된.
그래서 한 당신이 CSS를 가지고, 페이지의 규칙이 목록,
당신은 부트 스트랩 스타일을 얻을 것이다.
즉, 물론에 우발적 인 페이지에서 부트 스트랩 스타일을 가진
우선 첫째로.
>> 그리고 위키 백과에, 당신은 아마 수
그렇게 위키 백과 때문에 거기에 부트 스트랩이 없습니다.
그러나이 부트 스트랩을했다면, 당신은 아마 그렇게 할 수 있습니다.
당신이 원하는 경우에, 당신은 할 수 을 포함하지만, 그 수도
페이지의 레이아웃을 깰 기존.
그러나 아주 좋은 질문입니다.
당신은 부트 스트랩을 사용할 수 있습니다 그것은 포함 된 곳,
하지만 기본적으로 내장 아니에요.
>> 청중 : 감사합니다.
>> NEEL 메타 : 예.
더 이상의 질문?
네.
당신이 여기에서 또는 집에있어 여부 그래서, 다만 getboostrap.com-- 다시 기억,
당신의 친구는 getboostrap.com--입니다.
때마다 당신이 사용하는 부트 스트랩이 당신에게 줄 것이다
얻는 방법에 대한 지침 시작 구성 요소를 사용하는 방법에 대해 설명합니다.
멋진 자바 스크립트가있다 플러그인 우리가 여기에 가지 않을 것이다,
하지만 그들은뿐만 아니라 체크 아웃 가치가있어.
그래서 이것은 당신의 친구입니다.
그것은 얻을 단지 중요 이를 사용하는 방법을 사용했다.
>> 그럼에 대해 조금 채팅하자 응답 웹 사이트를 만들기.
내가 전에 말했듯이 그래서, 사람들이 사용 자신의 노트북, 그들은 자신의 휴대 전화를 사용합니다.
당신이 잘 상상으로 그리고,이다 보다 매우 다른 화면 크기.
그래서 동일한 웹 사이트 그 내 휴대 전화에 좋아 보인다
좋아 보이지 않을 것입니다, 반드시, 컴퓨터.
그래서 당신이해야 할 것입니다 귀하의 웹 사이트에 적응합니다.
이것은 다양한 적응해야 화면이 켜져 있다고 크기.
>> 그것은 내가에있어 알고, 말할 수있다 컴퓨터, 큰 노트북, 내가 확장해야합니다.
내가 전화를 해요 알고, 나는 수축한다.
그리고 부트 스트랩 몇 가지를 제공합니다 매우 유용한 도구는이 작업을 수행 할 수 있습니다.
그래서 부트 스트랩은 당신의 휴식을 보자 (12) 컬럼에 웹 사이트.
당신은 행을 12 열을 가질 수 있습니다.
그리고 당신은 분할 할 수 있습니다 사람들은 그러나 당신이 원하는.
당신은 하나의 큰 일을 할 수 있습니다 이는 12 열 넓다.
당신은 두 가지 일을 할 수 있습니다 여섯 각각됩니다.
당신은 네 가지의 하나 일을 할 수 두의 하나, 또는 6의 하나.
세, 세, 세, 세 가지 작업을 수행 할 수 있습니다.
당신이 할 수있는 무엇이든 당신이 원하는 고장.
>> 그래서 어쩌면 당신의 웹 페이지가 있어야합니다 세 번째 폭의 왼쪽 열입니다.
그래서 네 개의 열 것 넓고 나머지 페이지
여덟 열 폭이 될 것이다.
그래서이 한 예이다.
의 또 다른 예를 당겨 보자.
>> 청중 : 항상합니까 도 분할해야?
그것은 일곱, 다섯 분할 될 수 있을까요?
>> NEEL 메타 : 예.
그것은 일곱, 다섯이 될 수 있습니다.
네.
한은은 12에 추가로, 그것은 괜찮습니다.
그래서 여기에 다시 가자.
또, 코드는 그 여기, 여기도 가능합니다
응답 예를 아래에.
그래서 난 그냥 뽑아 일부 여기에 예 응답 코드.
그래서 당신은 사용하여이 작업을 수행 할 행이라는 것.
행은 또 다른 클래스입니다.
그것은 당신이에 추가 할 다른 스타일의 당신의 그들에게 자신의 구성 요소를 만들기 위해 div를.
>> 그래서 당신은 DIV 말 클래스 = "행"행을 만들려면
자신의 공간 (12) 컬럼을 제공합니다.
그리고 당신은 그 내부에 열을 넣어.
그래서 여기에 우리가 내지 컬럼 --6 XS는.
XS 대해 걱정하지 마십시오.
우리는 초에 대해 이야기 할 것입니다.
그러나 기본적으로, 우리는 하나가 넓은 여섯입니다 것.
우리는 왼쪽으로 호출합니다.
그리고 그 왼쪽 상자가 여기에 있습니다.
우리는 한 가지이 폭 12 열 여섯.
그리고 그 하나는 오른쪽에 있습니다.
>> 잘 단지 브랜드를 제공합니다 당신의 사업부는 회색을 채울.
그래서 지금 우리가 할 수있는 단지 그들은 별개의 것 것을 알 수있다.
그래서이 첫 번째 예.
그것은 당신이 방법에 대한 매우 간단한 예제 여기에 행과 열을 사용합니다.
당신은 클래스 = "행"을 사용하여 행을 정의합니다.
그리고 당신은 클래스 = "COL-XS-6"이해야 할 절반, "COL-XS-6"나머지 절반을 할 수 있습니다.
다음은 더 복잡한 예입니다.
,의는 작은 보자 거대한, 나머지 하나.
>> 우리는 작은 두 개의 열이 넓은 만들 수 있습니다, 우리는 거대한 여섯 열이 넓은 만들 수 있습니다,
폭 나머지 네 개의 열.
즉 12까지 추가합니다.
그리고 이들에 걸친 결국 페이지 폭.
다시 말하지만, 우리는 외부의 열이 있습니다.
그 다음 우리는 DIV 클래스 = "COL-XS-2"가 다음 6 다음 4.
그리고 그 제공 우리의 구조.
그래서 우리는 넣을 수 있습니다 어떤 도대체 우리는 여기에 내부합니다.
대신 작은, 우리는 버튼을 넣을 수 있습니다.
버튼 클래스 = "BTN-차 BTN".
그리고 알 우리의 버튼 모든 폭을 차지하지 않습니다,
하지만 적어도이 제한이야 그 많은 공간.
>> 그래서 모두 잘 좋다.
그래서 우리는 지금 우리의 웹을 분리 할 수 있습니다 덩어리로 페이지, 현명한 폭.
우리는 우리가 왼쪽을 갖고 싶어 말할 수있다 열 및 우측 열 등.
그러나 우리는 이상 사라하지 않은 당신은 응답 할 방법에 대해 설명합니다.
그래서 부트 스트랩의뿐만 아니라 그렇게 할 수 있습니다.
그것은 브레이크 포인트라고 이런 일이있다.
그래서 여부를 알 수있는 방법이 당신은, 당신이 태블릿에있어, 노트북에있어
당신은 전화 수평에있어, 또는 당신은 전화에 수직입니다.
이것은 스크린 사이즈를 알고있다.
그리고 네 categories--이 점을 나누기 일반적으로 노트북입니다 크거나 LG 전자,.
정제이다 MD 또는 매체.
SM, 작은.
또는 XS, 작은 여분.
그래서 당신이 지정하는 경우 열, 당신은, 말
그것은 여섯 열 넓은해야 여분의 작은 장치.
우리는 COL-XS-6했던 이유입니다.
우리는해야 말을하는지 폭 12 열 여섯 수
여분의 작은 장치.
그것이 무엇이든 더 큰 경우에, 우리는 단지거야 매우 작은 크기를 기본값으로 사용.
그것보다 아무것도 더 큰 경우 매우 작은, 그것은 여섯 폭을 알 수있을 것입니다.
그래서 우리가 활용할 수 있습니다 이러한 우리의 열로 만들려면
다른 양을 차지 화면 크기에 따라 열.
의이 응답 크기 조정에 가자.
그래서 우리는 우리의 열이 있습니다.
그리고 "COL-LG-6 COL-XS-12", 말한다.
그래서 당신은 무엇을 알고 주어진 지금까지, 당신이 무엇을 할
거라고 생각 큰 화면에서 일이?
음, 가지의 방법 주어진하지만 무엇
당신은 모양을 생각 큰 화면에 좋아?
그리고 그 이유는 무엇입니까?
>> 청중 : 그것은 그게 큰 화면에, 그것은이다
단지 걸릴 것 전체 공간의 일부?
그것의 절반처럼, 그런 것 같아요?
>> NEEL 메타 : 예.
>> 청중 : 작은에 화면, 그것은거야
전체 화면, 12을 차지합니다.
NEEL 메타 : 예.
권리.
예를 들어,하자 그래서 여기 아래로 본다.
네.
그래서 아무것도에 LG가 그 또는 커지 네 그래서 내 컴퓨터에 문제가 발생합니다
이 때문에 LG한다 꽤는 것 wide--
옆에 그것은 측이 COL-LG-6이기 때문에.
그 때문에 대형에, 그것을 만드는 그래서 넓은 여섯 기둥과 넓은 여섯 열.
의이 나는 경우 어떻게되는지 보자 작은 하나에이 작업을합니다.
난 그냥 취소 전체 화면이 갈거야.
그리고 화면을 축소하는거야.
나는 화면을 축소하는 것, 그래서있어 그것 내가 작은 장치입니다처럼 보인다.
그래서 이런 식으로 축소거야.
>> 그리고 짜잔.
지금 적층 지금 우리가 갔을 때문에
큰 이러시면에서이 아마 여분의 작은 화면 크기.
그리고 지금은 좋아, 우리가하지 않은 말한다 큰, 우리는 매우 작은 땅에있어.
그래서 우리가 사용하는거야 여분의 작은 크기입니다.
그리고 우리는 XS-12, XS-12에가는거야.
따라서 적층 될 것입니다.
그리고 바로이 있다는 것을 알 수 일이 중단 점을 불렀다.
브레이크 포인트는 어디 당신은 전환을 만든
작은에 매우 작은에서 등 대형 및 소형.
>> 그래서 그냥 내가이 슬라이드로 통지 아웃, 결국, 당신은 지점에 도착합니다
그들은 어디 나란히 할 점프합니다.
거기 당신은 간다.
그래서 바로 거기에 브레이크 포인트가있다.
그래서 우리는 훨씬 더 복잡 할 수 있습니다.
이제 우리는 이러한 말할 수 일이 네 넓은해야합니다.
즉, 그들이해야한다 세 번째에 대해 차지
매우 큰 장치에서 연설.
매체 장치에, 그것은해야 반 화면 위로 그것은 MD-6 있기 때문에.
아주 작은 장치에서, 그것은 (12)를해야한다.
그리고이 꽤 자연 보인다.
그냥 자신이을 해보자.
>> 큰 화면에 그래서, 그들은 네 넓은입니다.
그것을 조금 축소.
그리고 그들은 지금 여섯 폭이다.
그래서이 여섯, 여섯, 여섯입니다.
그 후 더욱 수축 그들은 완전히 적재됩니다.
이 따라서, 예를 들어, 의미하는 경우가 있습니다 당신은, 뉴스 카드 같은 카드를하는 데있어
예를 들어, 어디에서 그것은 매우 큰 화면에서의
당신이 옆에 여러 측면이있는 경우는 괜찮습니다 그들은 모두 충분한 공간을 얻을 것 때문이다.
그러나 그들은 충분한 공간이 필요합니다.
, 작은 화면에 따라서 당신이 그들을주고 싶어
페이지의 비례 적으로 더 많은 공간,,.
>> , 실제 예를 정도로 의 우리가 트위터에 있다고 가정 해 봅시다.
그리고 우리는 그렇게, 텍스트 상자를 당신은 측면에 트윗 할 수 있습니다.
그리고 우리는 추세의 목록을 가지고 오른쪽에있는 항목을 참조하십시오.
그래서 큰 화면에, 우리는해야 그들이 측이 곁에있다,
그래서 당신은 유리에서 그들을 볼 수 있습니다.
하지만 작은 화면에, 우리는 12, 12해야
그래서 동향 주제 트윗 영역 아래에 있습니다.
트윗 지역이기 때문에 중요한 것은 작은 화면에,
추세 주제는하지 않습니다 문제가 아주 많이.
그래서 우리는 그렇게 바로 아래에 넣어 그들은 모두 충분한 공간을 얻을 수 있습니다.
지금까지 이해?
>> 청중 : 네.
>> NEEL 메타 : 고체.
그 모든 예제 그래서 내가 여기에있다.
의 시도하고 도전 해 보자.
그래서 다시,이 도전-2.html은입니다 집에서 함께 다음과 같은 당신의 그.
그래서 내 친구, 마크 주커 버그, 일전에 나에게왔다.
그리고 그는 내가 가진, 같은 닐있어 웹 디자인에 꽤 좋은 얻었다.
나는 HTML을 할 수 있습니다.
나는이 작은을 만들었습니다 페이스 북에 새로운 편집.
나는 방법에 대한 새로운 아이디어를 가지고 우리는 페이스 북 스타일을해야합니다.
그리고 여기있다.
바로 여기에.
여기에 몇 가지 예제 코드입니다.
그래서이 Fancybook을 불렀다.
>> 우리는 어떤 상태 업데이트를해야합니다.
우리는, 니모, 마이크 Kosowski이 ***-- 세 가지 상태 업데이트.
그리고 우리의 목록을 가지고 바로 아래의 온라인 친구.
그래서 그는 자신의 숙제를합니다.
그는 대해 조금 알고있다 부트 스트랩, 그는 목록보기를 만든 것,
그는 HTML의 조금을했다.
그래서 그는 웹 페이지가 있습니다.
그러나 그는이 같은 닐을, 난하지 않습니다 전혀 반응 디자인을 이해합니다.
당신은 어떤 전문가가 있습니까 사람 그와 함께 나를 도울 수 있을까?
그리고 다행히, 당신은 지금 응답 디자인 전문가.
>> 그는 나를 그가이었다 말했다 그래서 Fancybook는 다음과 같이하고자합니다.
아주 작은 장치에서, 전화, 모두 같은
여기처럼 쌓아해야합니다.
그래서 당신은 타임 라인이 , 선행 맨 위로 다음
당신은이 있어야합니다 하단의 채팅 바.
그러나 태블릿 또는 매체에 장치는 또한, 반반되어야
타임 라인에서와 같이해야한다 반 채팅 친구 목록
나머지 절반에 있어야합니다.
>> 그런 다음 노트북, 타임 라인 사분의 삼을 차지한다
다음 채팅 헤지은해야 또 다른 4 분의 1 차지합니다.
그래서 그는, 같은 닐있어,이이 코드 여기 있지만 응답 아니다.
그것은이처럼 행동 할 필요가있다.
당신에게 나의 도전 이 코드를 부여 here--
당신은 새로 경우 CodePens, 당신은이를 볼 수 있습니다.
아니면 그냥 코드에 붙여 경우 도전-2, 당신은이를 볼 수 있습니다.
>> 다음은이 예제 코드입니다.
당신은 어떤 xxxs를 볼 수 있습니다.
난 당신이되도록, xxxs을 변경하려면 타임 라인 및 친구 목록
여기에 이러한 사양을 따릅니다.
무엇에 대해 걱정하지 마십시오 지금은 타임 라인 내부.
우리는 다음 단계에서 그를 얻을 수 있습니다.
하지만 지금은, 우리가 얻는 경우에 보자 이런 일이처럼 분할합니다.
그래서 말이됩니까?
그래서 만약 당신이 집에 있다면, 비디오를 일시 중지하고 시도
당신의 웹 페이지를 만들려면 이 같은 반응 보인다.
당신이 여기 있다면, 가지고 둘, 삼분 등.
, 이웃과 대화를 나눌 주시기 바랍니다 씨 주커 버그의 시도 및 수정
반응 설계 문제.
당신은 질문이있는 경우, 알려 주시기 바랍니다.
좋은 느낌?
끝난?
좋은.
>> 청중 : [들림].
NEEL 메타 : 무엇?
>> 청중 : 내가 잘 해요.
>> NEEL 메타 : 오, 좋아.
좋은.
청중 : 약 일 (12)는, 그 부트 스트랩 그것입니다
12 주어진 화면 공간을 취급 다음에 걸쳐 단위와 그를 분할?
정확히 어떻게합니까 이에 대한 작업을 포셔?
>> NEEL 메타 : 예.
그래서 질문은, 어떻게 비례 않습니다
오른쪽 부트 스트랩 작동?
>> 청중 : 네.
NEEL 메타 : 그래서 때마다 당신은 사업부 클래스 = "행"이,
아무리 큰 화면입니다, 부트 스트랩은 12 단위를 제공합니다
동일한 크기의 그 정도 크기를 차지합니다.
그래서 COL 1에서, 이는 8.33 % 항상 화면의 크기,
즉,이 전체를 여부 또는 그 폭이 있습니다.
그리고, 물론,에 작은 화면은, 각 열은 작다.
당신은 여전히 12 열이 넓은, 또한 작다.
그래서 그것은 당신에게 달려 것은 확인의 일을 더 열을 차지한다는,
비례 보상합니다 공간의 부족.
말이 돼?
>> 청중 : 네.
고맙습니다.
NEEL 메타 : 좋은 질문입니다.
청중 : 큰에서 화면, 당신은 할 수 있습니다
타임 라인은 세 4 분 소요?
>> NEEL 메타 : 예.
NEEL 메타 : 어떻게 사람 기분은?
좋다?
시원한.
그래서 다시 오게.
그리고의 시도하자이 부분을 수정 씨 주커 버그의 웹 사이트.
그래서 타임 라인에서, 여기 있습니다 상단과 친구들의 목록
아래쪽이다.
그래서 우리는 단지 지정해야 비례 크기와 열,
이들 각각에서.
그래서 첫 번째 ***는 타임 라인입니다.
어떤 수업은 우리가 여기에 배치해야합니까?
무엇 너희들은 여기에 있었습니까?
그래서 큰 화면에, 그것은 필요 기억 너비의 4 분의 3까지 걸릴 수 있습니다.
그래서 어떤 스타일이 당신에게 그것을 줄 것이다?
큰 화면에서 세 폭의 분기.
우리가 어떤 클래스를 사용합니까?
청중 : 그래서 우리는 단지이 될거야 클래스의 첫 번째 인스턴스를 편집.
NEEL 메타 : 지금.
네.
>> 청중 : 우리는 각을 편집하지 않을 타임 라인의 개별 기능?
NEEL 메타 : 지금은, 적어도.
그래서이 모든 것은 블록이다.
우리는 단지 변경하고 블록의 설계.
그래서 여기에 우리가 내지 컬럼-LG-9 할이 있기 때문에 큰 화면에 12 폭의 아홉.
그리고 중간 화면에, 나는 얼마나 많은 열을 얻어야한다?
청중 : 그것은 뜻이야 절반과 절반을합니다.
NEEL 메타 : 오른쪽.
그래서 얼마나 많은입니까?
>> 청중 : 그래서 여섯.
NEEL 메타 : 여섯.
그리고 매우 작은는 경우 이따가한다 행의 전체 폭을 차지
그것은 얼마나 많은되어야 하는가?
청중 : 12.
NEEL 메타 : 12.
네.
그리고 지금 우리는있어 이 다른 사람으로 변경
그래서 공간의 나머지를 차지한다.
그래서 COL-lg--
청중 : 그것은 것 전체 화면을 차지?
NEEL 메타 : 그것은 분기를 차지 대형 장치의 화면,
우리는 여기에 켰을 때.
>> 청중 : 세.
>> NEEL 메타 : 세.
그리고 COL-MD-6 취할 나머지 공간입니다.
COL-XS-12.
그래서 지금 우리는 타임 라인이 4 분의 3 차지
큰 화면에서 페이지의 다음 측 사분.
그리고 화면 아래 크기의 경우, 그에 따라 크기를 조정한다.
그래서, 지금 쌓여있어 매우 작은 화면.
그리고 우리는 조금 그것을 크기를하는 경우, 그들은 정확히 반반해야한다.
그래서 우리는 지금까지했습니다.
아주 멋진.
그래서 우리는하지 않을 것이다 도전의 다른 부분.
당신은 자신이 그렇게 할 수 있습니다.
그러나 기본적으로, 당신은해야 시도하고 이러한 반응을
저기 ... 타임 라인을로 항목 자체 반응.
그래서 지금 우리가 겪었어요 당신이 알아야 할 모든
부트 스트랩의 반응 측면에 대한.
반응에 대한 질문 부트 스트랩 디자인
어떻게 당신은 그 일에 대해 갈 수 있을까요?
네?
>> 청중 : 경우 비슷한인가 우리는 임베디드 비디오를했다
우리는을 제어하고 싶어 규모있는 비디오 전 ... -에서
영상의 크기 휴대 전화에 노트북에서 진행.
NEEL 메타 : 예.
더 많거나 적은.
당신의 비디오를 이야기해야 할 것이다 이 주어진 것만큼 많은 공간을 차지,
이는 때때로 조금 짜증나.
그러나 핵심 아이디어는 동일하다.
다른 개체에 같은 비디오, 페이지, 버튼 또는 무엇이든 같이,
만큼 당신이를 사용으로 열 및 행
당신은 그것을를 제공 할 수 있습니다 공간의 일정 금액.
그리고 그것은 그 명예되어지고 때문에 유튜브 같은 다른 질문
특정, 적절한 사이즈를 포함합니다.
그러나 이론적에서 적어도, 그것은 작동합니다.
시원한?
>> 청중 : 나는 다음 가정 이미지, 실제로 당신을
다른 버전이 필요합니다 서로 다른 크기의 동일한 화상
아이폰 대 노트북을 검색 하시나요?
네 문제가있다 할 우리가 필요 뿐만 아니라 반응하는 이미지를 가지고있다.
그리고 실제로, 당신은 할 수 있습니다.
나는 CSS에서 생각합니다.
그러나 부트 스트랩 허용 당신은뿐만 아니라 그렇게 할 수 있습니다.
당신은 응답 이미지를 가질 수 있습니다.
당신은 당신의 이미지 크기를 조정 할 수 있습니다 페이지의 크기에 따라.
그리고 아주 새로운 일이있다 HTML5, HTML의 최신 버전,
와 CSS3, 최신 CSS의 버전, 어떤
서로 다른 이미지를 요청 드릴 것입니다 당신이에있어 화면 크기에 따라.
일반적으로, 그냥 충분히 좋은 이미지는 단지 축소하거나 성장이
그러나 큰 그것을 할 필요가있다.
하지만 당신은, 당신이 원하는 수있는 경우 , (32)에 의해 한 (32)을 가지고
매우 작은 화면 및 대한 큰 화면 (64)에 의해 64,
다음 선택적으로들을 제공하고 있습니다.
넌 할 수있다.
그것은 어떤 사람들에 의해 이루어집니다.
그것은 아직도 꽤 최첨단이다.
그러나 짧은 대답, 응답 images-- 부트 스트랩이 하루에 저장할 수 있습니다.
시원한?
>> 청중 : 감사합니다.
>> NEEL 메타 : 그래서하자 방법에 대한 정말 빨리 이야기
자신의 웹 페이지에이를 얻을 수 있습니다.
의 당신이 당신을 원하는 가정 해 봅시다 부트 스트랩을 사용하여 자신의 웹 사이트.
그래서 그냥하자 함께 그것을 통해 도보.
의 방금 만들어 봅시다 일반 HTML 페이지.
에 따라 해 주시기 바랍니다 무엇이든 좋아하는 편집기입니다.
그래서 우리는 단지 약간의 HTML 페이지를 가지고있다.
우리는 할 수있다! DOCTYPE html로합니다.
이것은 또한 HTML, 우리의 페이지입니다.
새로운 것은 없다.
우리는 전에이 일을했습니다.
그래서 여기에 우리가 우리의 HTML을 가지고 우리는 여기에 내부에 물건을 넣을 수 있습니다.
우리는 우리의 단추를 가질 수 있습니다.
그리고 내가 전에 말했듯이,이 반드시 작동하지 않을.
왜이 작동하지 않을 수 있습니다?
왜 우리는 우리를받지 않습니다 좋은, 화려한 버튼?
>> 청중 : 우리는 그것을 연결하지 않았기 때문에 부트 스트랩 프로젝트 나 파일에?
NEEL 메타 : 예.
옳은.
Bootstrap-- 때문이다 단지 멋진 CSS 파일.
이 스타일의 시리즈의 그 당신의 요소에 부착된다.
여기에서 우리는 우리 것을을 말 했어요 이러한 스타일을 사용하고 싶습니다.
나는 크기가 최대 조금 있습니다.
우리는 우리가 사용하려는 그것을 말 했어요 이러한 스타일,하지만 결코
스타일이 무엇인지를 말했다.
그리고 무엇 당신이야 이전의 질문이었다.
즉, 그에 대한 대답입니다.
우리는 스타일을 얻을 수있는 방법을 찾을 필요 어떻게 든 우리 페이지에 포함.
그래서 부트 스트랩의 뜻 어떻게 그렇게 우리에게 보여줍니다.
>> 그래서 당신은 정상에 가면 여기에, 시작하기.
다운로드 여러 가지 방법이있다.
이 반드시 이해가되지 않을 수 있습니다.
Bootstrap--이 드릴 것입니다 당신은 CSS 파일 자체를 잡아.
그리고 당신은 당신의 자신의 페이지에 포함되어 있습니다.
당신이 원하는 경우 소스 코드입니다 스스로 그것을 해킹.
당신은 정말이 필요하지 않습니다.
사스는 언어이다 즉, CSS로 컴파일합니다.
전처리이라고 생각.
PHP와 같은 대부분의 프리 프로세서입니다 HTML은, 말대꾸는 CSS에 대한 처리기입니다.
당신이 그것을 할 싶다면 그 방법은, 당신은 할 수 있습니다.
>> 가장 쉬운 방법은, CDN을 사용하고 있습니다 또는 콘텐츠 전송 네트워크.
이 웹 사이트의 그 단지 부트 스트랩의 복사본을 제공
에 당신을 위해 매우 빠른 자신의 페이지에 포함.
그래서 여기에 예입니다.
그것은 당신이 링크 요소를 줄 것이다.
링크 요소는, 브라우저를 알려줍니다 여기에 저장됩니다 어떤 파일을 가지고
우리의 웹 페이지에 포함.
그리고이 경우의 부트 스트랩 CSS 파일.
그래서 우리는 그 URL을 복사하거나 것 텍스트는, 우리는 내부에 그것을 던져 것
우리의 머리.
>> 그리고 나는이에 대한 페이지를 시작하지 않을 것이다, 하지만이 작동하는지 신뢰할 수 있습니다.
링크는 당신에게 CSS를 얻을 것이다.
그것을에 포함하여 페이지와 당신은 수 있습니다
부트 스트랩을 모두 사용할 수있게 당신이 알고있는 클래스와 사랑.
당신은 로컬로 유지하려면 및 자신의 파일 시스템에있는
대신에 갈 필요의 인터넷은 잡아,
같은 당신이 원하는 경우 사이트를 오프라인으로 사용,
당신은 다운로드 옵션을 사용할 수 있습니다.
그러나 대부분의 경우를 사용 CDN은, 그렇게 때문에 꽤 빠른
그것은뿐만 아니라 당신을 위해 업데이트 유지합니다.
수동 중 하나를 업데이트해야합니다.
이해가?
>> 그래서 많은 공구이 구축 한 것 기본적으로있다. 당신의 Pset7과 Pset8에서,
나는 부트 스트랩이 생각 자동으로 포함되어 있습니다.
그리고 CodePen에 대한 예를 들어, 그것은 이미
포함 나는 때문에 추가 된 해당 설정을 추가합니다.
혹시 놀러 싶다면 그것으로, 당신은 단지 CodePen에 갈 수 있습니다,
또는 당신의 ID, 또는 어떤 이동합니다.
그리고 당신은 할 수 있습니다 이 액세스 부트 스트랩,
하지만 항상 내장 아니에요 에 기본적으로 웹에.
이해가?
>> 네.
단지 우리가 recap--로 왼쪽 오분있다.
그러나 요점을 되풀이으로, 새로운 웹 페이지에, 이 같은 부트 스트랩을 포함 할 수 있습니다.
당신은 일단 그것은 포함, 당신은 여기에 모든 재미 물건을 할 수 있습니다.
당신은 갈 수 있고, 당신은 정독 할 수 있습니다 CSS는, 당신은 멋진 스타일을 추가 할 수 있습니다,
당신은 구성 요소를 가질 수 있습니다 버튼처럼,
그리고 표,리스트 우리가 언급 한 항목.
멋진 자바 스크립트 플러그인이있다, 이는 당신이 탐험 할 수 있습니다.
그들은 멋진 추가 웹 페이지에 상호 작용.
이 같은 모달 대화를한다.
>> 그래서 재미있는 물건이있다 당신은 부트 스트랩과 함께 할 수 있습니다.
그래서 당신에게 내 조언은 진행입니다 당신의 자신의 프로젝트에 사용,
지침에 따라 우리 다만, 그것을 얻는 방법에 대한 한
그냥 부트 스트랩 때문에 읽기 당신은 무엇을해야하는지에 대한 자세한 내용을 알아 보겠습니다.
그래서 우리는 갔어요 이상, 오늘은, 사용하는 방법
문서, 어떤 건물 블록이 있고, 그 방법은 개념적이다.
그래서 지금 당신에게 나의 도전이다 부트 스트랩을 사용하여 웹 사이트를 확인하십시오.
워드 프로세서로 이동합니다.
그리고 우리는했습니다 도구를 사용하여 시도를 구문 분석하는 데 지금까지 배운
그들을 이해합니다.
그리고 그 스타일과 도구를 사용하여 당신은 당신의 웹 사이트에이 참조하십시오.
그리고 그것은 단지 크다 실험 과정.
>> 특정 스타일을보십시오.
작동합니까?
합니까 아닌가요?
함께 물건을 넣어보십시오.
무슨 일을 참조하십시오.
그것은 매우 자기의 안내, 검색 프로세스.
그러나 오늘 우리가 배운 부트 스트랩 무엇의 아주 기초?
왜 작동합니까?
그것은 어떻게 작동합니까?
우리는 사용을 시작하려면 어떻게 그것은, 첫 번째 장소에서?
그리고 지금 당신이 걸 그 혹을 통해, 당신
그것을 할 수 있어야 꽤 원활하게 혼자서.
>> 그래서 다시 한 번, 모든 우리가했던 코드는 여기에있다.
만약 당신이 원한다면 최대에 브러시를 얻으려면
같은, 무엇 빠른 속임수이다 스타일의 모든 시트?
현재이 샘플로 갈 수 있습니다.
우리는 여기에 몇 가지 예를 들어 스타일을 가지고있다.
당신은 시도 할 경우 다시 혼자서 도전,
여기를 시도 할 수 있습니다와 솔루션을 확인하십시오.
그래서이 링크가있을 것입니다 슬라이드에 포함 된
물론 당신에게 발송됩니다.
그러나 여기까지도있다.
원하는 경우, 비디오를 일시 정지 할 수 있습니다.
당신이 필요로하는 모든 정보는 이 사이트에 바로 여기에있을 것.
사람이 어떤 질문이있는 경우, 우리는 할 수 있습니다 다음 몇 분 동안 데리고.
그렇지 않으면, 여러분 모두 감사합니다 시청 아주 많이.