Bootstrap one page scrolling site part 14 – Twitter Bootstrap

안녕하세요 여러분,이 비디오에 오신 것을 환영합니다 이것은 http://www

system22net의 Jamie입니다 design comm 우리는 한 페이지짜리 부트 스트랩 스크롤링 웹 사이트를 계속 사용할 것입니다 우리가 아래로 나아가서 우리의 연락처 섹션을 스타일링하기 시작할 것입니다 여기서 내가 생각해내는 것은 우리가이면에 대해 몇 가지 세부 사항을 가지고있을 것이라는 것입니다

우리의 주소 전화 번호와 이메일을 보내 주시면 연락 양식을 보내 드리겠습니다 여기 이메일 주소를 물어 주제와 텍스트 필드를 넣어 메시지와 분명히 보내기 버튼과 나는 우리가 그 좋은 붉은 색을 사용하는 것 같아요 우리는 백그라운드 섹션에 사용했습니다 이 동영상은 꽤 오래있을 수 있으므로 사전에 사과 드리겠습니다 우리는 포럼과 여기에서 오프라인으로 부트 스트랩에서 작동 할 모든 것을 설정할 것입니다 당신은 이것이 작동하지 않을 것이라는 것을 기억해야합니다

PHP 양식을 추가하여 보내고 온라인 서버에 업로드하십시오 PHP는 라이브 스크립트이며 로컬 컴퓨터에서는 작동하지 않습니다 동영상을 만들면 섹션 자체가 만들어지고 일단 사이트를 끝내고 PHP 폼을 추가하여 보내 드리겠습니다 라이브 서버에 업로드하고 작동 시키려면 어떻게해야합니까? 우리가하고 싶은 일은 우리 폴더에 가서 indexhtml을 여는 것입니다

내가 말한 우리의 브래킷 소프트웨어에서 우리가 여기서보고있는 문서 대괄호는 매번이 프로그램에서 무료입니다 대괄호는 자유 텍스트입니다 편집 소프트웨어 프로그램 및 아래 무료 링크에서 다운로드 할 수 있습니다 이 비디오는 여기에 있으며 우리 사이트의 스타일을 지정하기위한 CSS 파일을 열어 보겠습니다 여기에서 스크롤하는 nav one에서 작업하기 때문에 마우스 오른쪽 버튼으로 클릭하고 열기 만하면됩니다 괄호와 함께 우리가하고 싶은 첫 번째 일은 정확히 지난 몇 편의 비디오에서 우리가 한 일은 우리의 연락처 섹션을 찾았습니다 이제 우리는 그것을 머리에서 자르고 싶습니다

그래서 그것들 모두를 선택할 것입니다 Ctrl 키를 X 누르거나 마우스 오른쪽 버튼으로 클릭하고 축소하면 축소 할 수 있습니다 하단과 새로운 섹션을 시작 우리는 그것을 평소 연락 섹션으로 제목 줄거야 우리가 방금 잘라낸 CSS 코드를 붙여 넣기 만하면됩니다 거기에 높이 속성을 제거하려고합니다 높이는 무엇이든간에 화면 크기를보고있는 중이고 나는 또한 사촌 내가 이걸 알기 때문에 내가 알기 론 이걸 패딩으로 만들고 싶어

top 150 pix 상단과 하단이 모두 같도록 하단에 비슷한 것을 원한다 동일한 패딩 (padding)을 사용하여 복사하고 변경합니다 하단 텍스트 괜찮아요 난 지금 같은 상태로 머물 수있어 그 좋은 빨간색을 사용하고 싶습니다 우리가 사용하고있는 색은 E라고 생각했습니다 L 워시 또는 여기에 있습니다

있을 어딘가에있는 것은 회색이었다 거기 그것은 확실하다 나는 긍정이다 그것은 단지 이것들을 복사해라 나는 가지고있다 메모장에이 색상 목록 난 그냥 그것을 가지고하지 않았다 괜찮아요 넣어 거기에 우리가 실제로 가지고있는 indexhtml 문서에 가면 괜찮습니다

여기서 우리의 연락처 섹션을 얻었습니다 우리가 계속 복사하고 사용하고 사용하는 것입니다 그리고 사용하여 제목을 변경하여 우리에게 연락하십시오 그 빨간 배경을 사용해서 나는 그것에게 백색으로 향하는 클래스를 줄 것이다 나는 그것을 생각한다

우리가 해왔 던가? 나는 너에게 여기 몇 가지 다른 수업을 보여줬다 계속해서 우리는 내가 가지고 있다고 생각한다 아래에 밑줄이 그어져 있으므로 흰색으로 향하게하는 수업을 해봅시다 좋아요, 그렇게해야합니다 괜찮습니다

행운입니다 이제이 부분이 빨간색 배경이어야하고 제목은 아래 밑줄이있는 흰색이어야합니다 ctrl을 저장하십시오 우리가 150 위권에서 150 위를 차지할 것이기 때문에 너무 짧을 것입니다 밑바닥은 새로 고침을하고, 그렇지 않으면 우리가 간다

그 제목을 우리가 원하는 곳으로 가져 왔으면 좋겠어 여기에 작은 섹션을 만들면 여기에 두 개의 섹션이 생길 것입니다 이쪽에 주소 세부 정보와 연락 양식이 있으니 분할하겠습니다 그것은 아마 4와 8로 우리가 전에 설명했기 때문에 이것들 부트 스트랩이 섹션은이 전체 행이 여기에 12 개의 섹션으로 구성되어 있습니다 그래서 네가 그것을 나눌 때 네가 동등한 12가되게하고 싶을 테니 나는 네 개를 가질거야

그리고 4 개와 X 12이므로 8 개가 왼쪽에있는 더 작은 섹션이어야합니다 거기 오른쪽에 큰 섹션 그래서 우리가 다시 할 일을하자 대괄호 그래서 내가 할 일은이 줄 안에있다 여기 실제로 나는 내가 완전히 새로운 행을 할거라고 생각해 그렇게하면 더 쉬워 져서 복사 만하면됩니다

그리고 내가 말하고자하는 것은 이것이 연속적 일 것이고, 그 안에서 나는 우리에게 큰 열 4는 왼쪽 열이 될 것이고 이것을 복사 할 것입니다 다시 한번이 도로 귀 안에 보관 해둘거야 이것들은 분명히 우연히도 같은 줄에있을 것입니다 이 사람은 8 명이고 우리 첫 번째 사람은 우리 주소를 가질거야 그래서 다른 div를 여기에 넣을거야

그래서 첫 번째 열을 여기에서 알게 될 다른 div를 추가하고 그것을 줄거야 주소 클래스는 여기에 주소를 넣을 곳이기 때문에 그래서 그것은 다른 div를 만들고 그것에 주소 클래스를 제공합니다 여기에 주소와 여기에 주소를 넣을거야 여기에 우리가 갈거야 잠시 후에 양식을 작성하십시오

잠깐 후에 주소를 알려 드리겠습니다 여기에 가서 약간의 H threes를 사용하여 H 2가 아마도 그렇게 될 것이라고 생각합니다 큰 H는 숫자가 높을수록 글꼴이 작아지는 것을 의미합니다 우리가 원하는대로 글꼴을 만들기 위해 CSS를 추가 할 수 있으므로 우리의 사업 이름 그것을 1 페이지짜리 사이트라고 부르겠습니다 나는 이것을 여러 번 복사 할 것입니다

우리가 따라갈 때 세부 사항을 기입하십시오 나는 하나를 더 필요로 할지도 모릅니다 또는 모른다 할지도 모른다 우리가이 사진이라고 부르는 것이 중요하지 않은 주소를 알려 드리죠 도로와 우리는 그것을 엠파이어 스테이트에 줄 것이다 뉴욕에 주소를 두 번 지정 했으니 뉴욕에있을거야 외관상으로는 및 뉴욕을위한 그들의 지퍼는 1 0 1 8 8 다만이다 내가 엠파이어 스테이트 빌딩의 주소를 알아 냈어 옆집에 전화 번호를 알려주고 그냥 복사 해 봅시다 그 (것)들에게 또한 전자 우편을주십시오 비록 우리가 옆집에 양식을 가지고 있어도 우리는 가지고있다

또는 일단 우리가 거기에 넣었을거야 괜찮아 특히 재미있어 보이지는 않겠지 만 스타일을 지정하겠습니다 그것은 위로 옷을 입는다 그래서 명소에 되돌아 간다

우리가 무엇을 보는지에 관해 알자 희망적으로 여기에 나타나야한다 괜찮아 나는 거기에 두 개의 제목이있는 것 같아 그게 사촌이야

여기 포럼 섹션에서 바로 볼 수 있습니다 나는 그것을 복사하기 전에 그것을 복사했다 이제 우리는 이것을 스타일링 할 필요가있다 크기는 괜찮지 만 흰색으로 만들고 싶습니다 왼쪽 정렬을 원한다고 생각합니다

그녀에게 그 같은 라인을 보내고 싶다면 정말 쉽습니다 우리가 그 div를주었습니다 주소의 클래스 클래스 또는 주소를 사용하는 것이 좋습니다 h3으로 설정하면 왼쪽으로 바뀌고 텍스트는 흰색으로 왼쪽으로 정렬됩니다 우리의 HTML로 되돌아갑니다

실제로 여기에서 할 수 있습니다 텍스트의 속성으로 모든 텍스트를 왼쪽으로 만듭니다 이제는 온라인으로 남겨 두어야하는 모든 것들을 빠른 저장을 다시 확인해야합니다 사이트를 새로 고침하고 텍스트를 남겨둬 야합니다 왼쪽에 텍스트가 있고 오른쪽에 양식이 있으므로 흰색인데 인라인 스타일을 넣을 수는 있지만 더 나은 방법입니다

이 방법으로 주위를 이렇게 여기에 아래로 우리 CSS를 드롭 다운 탐색을 스크롤 그것 때문에 CSS는 비트의 공간 주소의 철자가 올바른지 클래스 올바른 주소를 입력하지 않으면 h3 태그가 작동하지 않습니다 저것은 h3이 아니었고 몇몇 중괄호를 열고 닫았습니다 우리가 원하는 모든 것 사이에 모피 3/8을위한 것 인 흰색을 넣습니다 모두들 지금은 실제로 6 FS이지만 css3를 사용하면 3을 넣을 수 있습니다 if 그들은 모두 신속하게 우리 사이트에 ctrl을 저장하고 잘하면 새로 고침 말하는거야 그 텍스트는 흰색으로 바뀌어야합니다

좋아, 여기에 우리의 양식을 만들어 보자 자바 스크립트 준비 양식하지만 내가 말했듯이, PHP는 라이브 스크립트를 가지고 있지 않습니다 실제로 온라인 상태 일 때 보내십시오 앞으로의 비디오에서 라이브 서버를 사용할 수 있습니다 이제 HTML로 돌아가서 시작하겠습니다

우리 가을을 지으자 이곳에있는이 건물에 들어가기를 원한다 열이 없어지면 우리는 새로운 형태의 악마를 시작할 것입니다 그들 사이에 약간의 공간이 있다는 것을 알았습니다 이거 깔끔하게 지키고 여기에 물건을 넣을거야

그 순간에 의미가 없지만, 내가 추가 할 때 반드시 필요합니다 나중에 PHP 폼을 작성하고 다른 div 클래스를 넣어야합니다 사이트에서 양식을 보내면 일반적으로 성공 메시지가 나타납니다 그래서 우리는 약간의 div를 넣고 숨겨야 할 것입니다 여기에있는이 내용은 나중에이 양식을 실제로 만들 때 나중에 모두 이해할 수 있습니다

살고 나는 그것을 상태 경고 경보 성공이라고 부를거야 우리가하고 싶은 말은 내가이 순간에 아무런 의미가 없다고 말하는 것과 같다 너에게 확신하지만 우리는 그것을 원한다 나는 여기에 인라인 스타일을 할 것이다 say display : none 왜냐하면 우리는 그것이 실제로 나타나기를 원하지 않기 때문입니다

버튼을 눌렀을 때 나타납니다 그게 끝날 거예요 내가 거기서 그랬던 것처럼 저를 위해 그것을해야합니다 이 비디오와 관련이 없다고 말하지만 나중에 필요하므로 우리가 하나 더 떨어 뜨리면 양식을 작성해 보겠습니다 건너편에 탭을 깔끔하게 보관하자 이제 양식을 만들거야

신분증이 있으니 연락 양식 연락하기 쉬운 형태로 충분히 재미있다 우리는 연락의 계급을 다시주고 간단하게 유지합니다 모든 것이 그것이 접촉 양식입니다 이제 연락하십시오 이름도 있으니 다시 한번 생각해 봅시다

아주 잘 작동해야하는 연락 양식이며 모든 것이 있어야하는 이유입니다 이 것들은 지금 당장은 분명하지 않지만 PHP 폼을 추가하면 그냥 그것을 얻으려고 내가 당신을 보여주지 내가 여기에있어이 PHP는 우리가있어 이걸 라이브로 만들 때 사용할거야 우리가 업로드 할 때까지는 아무런 요령도 없어 라이브 서버로 보내면 우리는 여기에이 이름과 것들을 가져야합니다 그렇지 않으면이 양식에 연결되지 않습니다 그래서 이것이 제가 추가하는 이유입니다

여기이 순간에 양식을 이해하지 못하는 것들이 있습니다 방법이 있어야한다 그 방법은 우편이다 이 행동이 무엇인지를 알기 때문에 실제 가장 큰 행동 인 행동 그것이해야 할 일과해야 할 일은이 PHP 폼에 연결하는 것입니다 몇 가지 동영상을 통해 소개 할 예정이며 실제로 보내고 그 PHP는 양식 때문에 내가 PHP를하기 때문에 메일을 보내서 전화를 했어 그래서 그것은 그 양식을 치고 그 양식을 실행해야한다는 것을 알려줍니다

모든 것이 이론에서 작동합니다 농담 할 것입니다 좋아, 그럼 그 양식을 닫자 우리는 그 양식을 내려 놓을 것이다 지금 우리는 우리 필드에 퍼팅을 시작해야합니다

전에 말한 것처럼 부트 스트랩을 알면 꽤 좋습니다 이 일을 정말로 빨리 할 수 ​​있다는 것을 알았습니다 이제는 div를 할 필요가 있습니다 변경을위한 클래스를 제공하고 우리가 사용할 클래스는 그룹을 형성합니다 이것이 우리의 텍스트 영역과 입력 상자이며, 방금 닫을 게 뭐니? 그걸로 우린 잠시 후에 속임수를 쓸거야

난 정말 바람 피운 게 아냐 그러나 우리는 많은 것들을 복사 할 것입니다 조금 더 빨라서 첫 번째 입력 유형은 여기에 있습니다 저는 시간을 절약하고 여기에 첫 번째 입력 유형은 텍스트 일 ​​것입니다 실제로 실제로는 그 어떤 이메일도 요청하지 않습니다

유형 그리고 이것이 체크 박스 날짜를 가질 수있는 모든 것들을 가지고 있다는 것을 알 수 있습니다 피커 색상을 선택하려면 날짜를 현지 시간으로 가져가 색상을 선택하십시오 파일 숨김 이미지를 업로드하려는 경우 전자 메일 파일로 보내지 만, bla bla bla bla I want 그 이메일이 실제로하는 일은 박스를 만들면 그들이 넣지 않으면 에서 서명 한 후 그것을 채택하면 오류가 발생하므로 귀하는 합법적 인 이메일을 받으려면 정크로 사람들을 막지 않을 것입니다 이메일을 보내지 만 @ 기호와 점을 넣어야합니다 그렇지 않으면 괜찮아요

미안 해요 수업 시간에 수업을 끝내야 해요 그리고 사촌 전자 메일이야 남성 필드 야 지금 우리는 그것이 필요하다고 생각하고 싶습니다 그렇게 생각하면 사람들의 이메일을 수집합니다

그게 네 것이라면 해결할거야 온라인 마케팅이나 그와 비슷한 어떤 형태로든 수행하는 사람 이메일 주소를 수집하는 것이 절대적으로 중요합니다 자리 표시 자란 무엇입니까? 우리 사서함에서 볼 수있는 텍스트입니다 우리가 이것을 끝내고 모든 것을 설명 할 때 잠시 후에 보여 드리겠습니다 당신이 원하는 말을 어디에 넣을 수 있느냐에 따라 우리는 당신의 이메일을 말할 것입니다

주소 또는 귀하의 이메일 괜찮을거야 난 괜찮아요 그리고 내가 뭘 할거야 나 괜찮아 질거야 뭔가 잘못 됐어 여기 우리 깃발있어 오, 내가있어 거기서 우리가 간다 그러나 나는 그 끝 태그를 확인한다 괜찮아 나는 우리가 원할 것이기 때문에 이것을 두세 번 복사 할 것이다 그들의 이메일 주소와 우리는 주제를 말하는 텍스트 필드를 원한다

물론 우리는 실제로 메시지 영역을 원할 것이고 그 후에 우리는 우리가해야 할 모든 것을 단추로 추가하려면 몇 가지를 변경해야합니다 하나는 제목이므로 텍스트입니다 그리고 우리는 그것을봤을 뻔한 주제의 이름을 주겠다 우리는 거기에 이름을 써야합니다 죄송합니다

이름을 적어 놓는 것을 잊었습니다 우리는해야 할 것입니다 이 클래스의 속성보다 먼저 복사해야합니다 거기에 틈이 생겼어 이 이름들은 모두이 전자 메일 양식과 관련이 있습니다

PHP로 양식 제어 가능합니다 예 이메일 주소가 필요하기 때문에 메일이 필요하지 않습니다 아직 우리는 곡물을 요구하고 우리는 그것을 주제로 삼고 다음 곡은 하나는 실제 텍스트 영역이되고 싶은 곳입니다 메시지가 단지 텍스트 영역이고 텍스트 영역에는 공백이없고 그 이름은 메시지 ID 모든 이름은 말해야하는 메시지이며 ID가 있습니다 ID 또는 메시지를 제공 계속해서 따라 다니는 사람들에게 너무 걱정하지 마세요

이 모든 코딩과 함께 HTML의 PDF와 우리가 사용하는 CSS는이 비디오 아래에서 다운로드 할 수 있습니다 그래서 우리는 ID를 얻었습니다 우리는 메시지를받습니다 우리는 그것을 유지하기를 원합니다 그것을 계속 유지할 것입니다

저는 폼 컨트롤을 넣을 것입니다 요구 한 후에 그것을 두십시오 폼 컨트롤과 경찰은 분명히 이것에 대한 것입니다 우리가주고 싶은 텍스트 영역으로 메시지를 보내주십시오 그 (것)들에게 너는 얼마나 깊이 있 었는가 너는 실제로 그것을 원하고 그것을 한 행의 낱단 우리는 그것에게 여분의 클래스의 클래스를 줄 것이고 그것은 당신이 더 적은 것을 원한다면 더 많은 것을 원한다 이런 종류의 일들은 거기에 여분의 갭을 가지고 있습니다 바로 텍스트 영역에 있어야합니다

그래서 텍스트를 닫아야합니다 지역 그것은 사슴과 조금 같아요 그래서 당신이 원하는 것은 사슴입니다 벌금 텍스트 영역 이제 우리는 다른 div하자 그냥 시간을 절약하기 위해 이것을 다시 복사하십시오하지만 이것은 곧있을 것입니다

실제로 메시지를 보내기위한 버튼 자체 그래서 다시 우리가 이미 가지고있는 형식 그룹이며, 모든 것을 없애자 이 텍스트 영역 비즈니스 및이 처음부터 시작하고 그것은 될거야 버튼은 버튼 유형이므로 버튼이 될 것입니다 그리고 타이프합니다 제출 버튼이되어야하고 그 스타일을 위해 나는 우리가 사용한 버튼을 사용할 것입니다 우리는 버튼이 어두워서 작동해야하는 사이트에서 이미 사용했습니다

거기에 우리의 빨간색 배경에 멋지게 클래스 및 버튼 버튼 어둡고 버튼이 어두울 때를 대비해서 기억이 안납니다 버튼이 어두워지면 그 빨간색 배경이 상당히 보일 것 같아요 캐싱 또는 눈길을 사로 잡는 방식으로 코드를 다시 살펴 보겠습니다 to say 나는 그것이 단지 약간의 지루한 죄가 있다고 생각합시다, 우리가 갈라졌습니다 분명히 당신이 넣고 싶은 것은 무엇이든 괜찮습니다

우리를 위해 밖으로 버튼을 올려 놓았습니다 괜찮습니다 거기에 틈을 주다 대부분의 옷은 그게 내가 가지고있는 일이라면 우리가 거기에 여분의 차이가 있기 때문에 그것은 정말로 중요합니다 나는 단지 노력하고 있습니다

여기에 물건을 깔끔하게 정리해서 말하면 어떻게 생겼는지 보자 우리는 3 개의 필드를 가지고 있어야하고 하단에 제출 버튼이 있어야합니다 그것을 올바르게했다 그것은 모양이다 그래서 우리 사이트는이 사이트를 새로 고침한다 여기에 여기에 3 번 표시되고 이메일 제목 텍스트가 있어야합니다

영역 및 버튼을 새로 고침하여 어떤 일이 발생하는지 확인합니다 거기서 우리는 괜찮아 졌어 그건 정확히 우리가 원했던 것과 당신이이 형태를 볼 수 있기 때문이다 실제로 물건을 입력 할 수 있습니다 보내기를 누르면 JavaScript 오류가 발생합니다

우리는이 양식을 작성하지 않았으므로 그것이 작동해야합니다 그러나 그것은 살아 있지 않습니다 우리가 이전에 말했던 PHP를 추가 할 때까지 이 동영상은 너무 오래 걸릴 수 있으므로 다른 동영상으로 저장합니다 그렇지 않으면 벌써 30 분이 지났으니 조금 내려 놓으십시오 조금 그렇게 그것과 일치하고 그게 바로 내가 생각하는 것 같아 연락처 그게 바로 바로 그 부서에 연락하는 것 같아요

나는 루트에 대한 더 깊은 길을 갈거야 그 수업은 당신이 그것이 맞다는 연락을 참조하십시오 거기서 나는 20 픽셀의 패딩을 줄 것이다 CSS와 우리가 그 접촉을 보았던 것에 따라 학급은 연락 받았다 그리고 나는 말하기의 덧대는 것 정상을 원한다 약 20 픽셀이 어떻게 작동하는지 볼 수 있습니다

사이트에 빠르게 저장 그게 더 닮았어요 이제 선이 더 좋아요 좋아요 그래서 생각합니다 우리는이 특정 비디오가 만들 수있는 몇 가지 아이콘을 추가 할 수 있기 때문에 거기에 남겨 둘 것입니다

좀 더 재미있게하자 다음 비디오에서 그렇게 할 것이다 거기에 우리의 한 페이지 스크롤 사이트에 연락처 섹션을 추가하는 방법입니다 다시 한번 이것은 http : //wwwsystem22

net 및 http://web-design-and-tech-tipscom에서 jamie입니다 if 이 비디오를 즐겼다면 youtube 채널을 구독하십시오 웹 사이트 구축에 관심이있는 것은 아래의 코스 중 하나를 선택하십시오 우리의 코스를위한 쿠폰을 90 % 할인해주는이 부트 스트랩 코스 부트 스트랩 템플릿을 편집하고 사이트를 매우 빨리 전자 상거래 상점을위한 몇 가지 워드 프레스 코스와 방법 가정용 로컬 컴퓨터에서 WordPress 사이트를 개발하여 관심이 있다면 링크를 클릭하여 시청 해 주셔서 감사합니다

좋은 하루