Footer Section Bootstrap Consultant Website – Part-3

안녕하세요 매일 수업료를 다시받을 수 있습니다

이전 비디오에서는 콘텐츠 1, 콘텐츠 2 및 콘텐츠 3 섹션을 만들었습니다 이 튜토리얼에서는 섹션 4와 웹 사이트의 바닥 글 섹션을 작성합니다 이 튜토리얼 시리즈의 마지막 부분입니다 나는 당신이 학습을 즐기기를 바랍니다 그래서 우리가 떠나기 전에 let�s가 시작됩니다

앞으로 콘텐츠 만들기 4 그러므로 클래스 내용으로 div를 생성하십시오 이 div에서 행을 만듭니다 그리고 col-6의 두 열을 삽입하십시오 이제 첫 번째 열에서 행을 추가하고 두 개의 열을 다시 삽입합니다

그래서 우리는 col-2와 col-7을 추가 할 것입니다 col-2에서 우리는 질문 아이콘의 이미지를 추가 할 것입니다 두 번째 열에서는 텍스트 센터 클래스로 div를 만듭니다 그리고 h4 제목 태그를 텍스트와 함께 삽입하십시오 그래서 여기에 텍스트를 추가 할 것입니다

그리고 닫는 div 바로 뒤에 p 태그에 데모 텍스트를 추가 할 것입니다 따라서 단락 태그에 텍스트를 복사하여 붙여 넣습니다 우리는 약간의 패딩을 추가하려고합니다 따라서 패딩 윗부분과 패딩을 왼쪽에 추가합니다 또한 내부 행에 패딩 4를 추가하십시오

콘텐츠 4 클래스에서 경계 상단과 경계 하단 클래스를 추가합니다 그 다음, 콘텐츠 4의 두 번째 열에 행을 추가합니다 이 줄에서는 col-2와 col-7 두 열을 추가합니다 col-2에서는 이미지 태그에 다운로드 아이콘을 추가합니다 그리고 col-7에서는 div를 텍스트 센터로 추가합니다

이 div에서 텍스트를 추가 할 것입니다 그래서 몇 가지 텍스트를 추가하겠습니다 그 다음에는이 코드를 다시 입력하는 것을 제외하고 단락 태그를 삽입합니다 이 p 태그를 복사하여 여기에 붙여 넣으십시오 그런 다음 행에 패딩 4를 추가합니다

나는 여기에 약간의 문제가 있다고 생각한다 승인 여기에 h4 태그를 삽입하여 삽입하겠습니다 이제는 완벽합니다 이제는 바닥 글 섹션을 만드는 것입니다

그래서 우리는 바닥 글 태그를 추가 할 것입니다 이 태그에서 클래스 내용으로 div를 추가합니다 5 앞으로 나아 가기 전에 콘텐츠 4에 약간의 마진을 추가 할 것입니다 컨텐츠 5에서는 div를 컨테이너 및 패딩 5 클래스로 추가합니다 이 div에서 div를 텍스트 흰색으로 채우고 상단 4를 채 웁니다

여기서 우리는 d flex 표제어 태그에 d flex 인라인 클래스를 추가 할 것입니다 이 클래스는 한 줄에 h2 제목을 표시합니다 구독 뉴스 레터 텍스트를 추가하십시오 텍스트를 볼 수 없으므로 Stylecss 파일에 컨텐츠 5 클래스를 삽입합니다

그리고 배경색을 적용하십시오 이제 콘텐츠에 배경색을 추가했기 때문에 텍스트를 제대로 볼 수 있습니다 5 수업 그 다음 입력 텍스트에 자리 표시 자 입력 이메일 주소를 입력합니다 그리고 클래스 패딩 2 margin left 3과 border zero를 추가하십시오

그 후이 텍스트 상자에 크기 50을 지정하십시오 입력 태그 바로 다음에 버튼을 추가합니다 그 사이에 공백을 추가하지 않으므로 입력 태그와 버튼 이 공간을 제거하기 위해 입력 태그 바로 뒤에 버튼을 만듭니다 그러면 버튼을 만들고 클래스를 추가합니다

y btn-info 텍스트 – 어둡기 및 경계 0을 채우는 것과 같습니다 이 버튼에 텍스트 제출을 지정하십시오 그 후에 우리는 바닥 글과 경계 최상위 클래스를 만들 것입니다 행과 함께 div를 만듭니다 그리고 col-3의 4 개의 열을 추가하십시오

그래서 첫 번째 열에서 d-flex 플렉스 컬럼 클래스로 div를 만듭니다 Flex-column 클래스는 수직 방향을 설정하는 데 사용됩니다 그 다음 텍스트 흰색 클래스와 함께 h6 제목 태그를 추가합니다 그리고 회사 텍스트를 추가하십시오 이 열에 패딩 4를 추가합니다

stylecss에서 바닥 글 클래스를 만듭니다 그리고 마진 상위 8 %를 추가하십시오 완벽 해 그 후에 우리는 몇 개의 링크를 추가 할 것입니다

그래서 앵커 태그를 추가 할 것입니다 그리고 가정 텍스트를 지정하십시오 us 텍스트가있는 다른 앵커 태그를 만듭니다 더 많은 링크를 만들려면 여기에 복사하여 여기에 붙여 넣으십시오 style

css에서 앵커 클래스를 만들고 텍스트 장식 없음을 지정합니다 색상과 패딩을 2 % 지정하십시오 다른 3 개의 열에도 패딩 4를 추가합니다 두 번째 열에서는 d flex와 flex column 클래스로 div를 생성합니다 이 div에서 텍스트 흰색 클래스로 h6 태그를 생성합니다

서비스 텍스트를 지정하십시오 그런 다음 여기에 링크를 추가하십시오 그래서 중개, 가치있는 서비스, 뮤추얼 펀드 및 보험 링크를 추가 할 것입니다 세 번째 열에서 플렉스 컬럼 클래스를 추가하고 div에 텍스트 흰색 클래스를 추가합니다 그리고 우리에게 텍스트를 지정하십시오

그런 다음 Gmail 링크를 지정하고 전화 번호를 지정합니다 네 번째 열에서는 h6 태그를 텍스트 흰색으로 만듭니다 그리고 우리와 텍스트로 연결을 지정하십시오 이 후 우리는 d flex와 flex 행 클래스로 div를 생성 할 것입니다 이 클래스는 요소를 가로 방향으로 설정합니다

페이스 북 png 이미지가있는 이미지 태그를 삽입하십시오 클래스 폭을 25 % 높이 25 %로 지정하고 패딩 1을 지정합니다 그런 다음이 이미지 태그를 복사하여 붙여넣고 트위터 png 이미지로 이미지를 변경하고 PNG 이미지에 링크되어 있습니다 그런 다음 세 개의 닫는 div를 남기고 텍스트 중심의 흰색 폭을 가진 다른 div를 추가하십시오 100 및 패딩 톱 4 클래스

여기서 우리는 저작권 정보를 지정하여 p 태그를 추가하고 저작권 정보를 추가 할 것입니다 이리 span 태그에서는 일일 수업료 텍스트의 색상을 지정합니다 좋아 이제 모든 것이 만들어집니다

시간은 프로젝트를 실행하는 것입니다 회전 목마와 놀라운 디자인으로 매우 아름답게 보입니다 그래서이 튜토리얼 시리즈에서는이 모든 것을 다룰 수 있습니다 이 튜토리얼을 좋아한다면이 튜토리얼에서 유용한 것을 찾으면 같은 버튼을 클릭하십시오 나를 위해 무언가를 만들 것을 제안하고 싶다면 비디오 댓글에서 나를 말하십시오

나는 당신을 위해 그것을 만들거나, 가능한 한이 일을 창조 할 아이디어를 줄 것이다 최신 채널 인 경우이 채널을 구독하고 벨 아이콘을 누르면 내 채널의 알림을받습니다 모든 새로운 비디오 그게 오늘이야 다음 비디오에서 만나요

그 때까지 행복하게 지켜봐주십시오

Bootstrap 4 Working contact form with php Bootstrap 4 and Brackets Text Editor

안녕 얘들 아,이 부츠 컷 4에 오신 것을 환영합니다 시스템 22의 jamie와 웹 디자이너의 기술 팁 PHP를 추가하거나 PHP 문의 양식을 작성하여 문의 양식을 얻을 수 있습니다

실제로 메일을 보내는 작업으로 사이트를 만들었거나 템플릿이 있고 구독 양식과 문의 양식이 있으며 모두 멋지게 보이면 그들을 채울 수 있습니다 연락처 버튼을 누르면됩니다 가장 쉽고 당신이 그들을 채울 수있는 일들이 일어 났지만, 물론 당신이 때 아무것도 제출하지 않으면 잘 될 것입니다 왜냐하면 저는 이것이 라이브에 있지 않기 때문입니다 서버 및 B가 라이브 서버에 있더라도이 양식 제출을 명중 할 때해야 할 일을이 양식에 알려주지는 않습니다

버튼을 클릭하면이 작업을 수정하기 위해 약간의 PHP를 사용하게 될 것입니다 이제는 PHP에 관해 알아야 할 것을 시작하기 전에 그것이 생방송이라는 것입니다 스크립팅 언어이므로 라이브 서버에서만 작동합니다 그렇다면 로컬 컴퓨터에이 사이트를 구축하면 라이브로 업로드해야합니다 서버가 PHP 작업을 수행하거나 PHP를 실행하는 로컬 호스팅 환경을 갖습니다

그래서 나는 그것을 업로드의 모든 것을 통해 당신을 데려 갈 것이라고 말했고 우리는 모든 것들이 우리 괄호를여십시오 소프트웨어 괄호는 자유 텍스트 편집기입니다 그리고 그것은 절대적으로 굉장합니다이 비디오 아래 링크에서 다운로드 할 수 있습니다 새 문서를 만들어 파일로 이동하고 새로운 문서를 작성해 보겠습니다

여기에 몇 가지 물건을 입력 시작 그것은 당신에게 익숙하지 않을 수 있습니다 PHP의 괜찮아 따라 와서 대괄호를 열어 보통 PHP 용 태그를 여는 물음표를 넣은 다음 PHP를 닫고이 형식을 더 읽기 쉽게 만들어 보겠습니다 저장하고 PHP로 저장해야하므로 같은 위치에 저장합시다 부트 스트랩 파일을 저장하여 다른 이름으로 저장한다고 말하면서 여기에 부트 스트랩이 있습니다

폴더 안에있는 모든 파일들 CSS 이미지 비디오 자바 스크립트 인덱스 도트 HTML 그냥 차가운대로 저장하자 전화해서 원하는대로 부를 수있다 그러나 당신이 그것을 부른 것을 기억하고, PHP를 그 뒤에 넣어야합니다 어떤 형태의 형식을 알았는지 알고 있으므로 약간의 글을 쓰기 시작합니다 PHP는 우리 사이트를 가져 와서 우리가 어떤 형식을 가지고 있는지 보도록하겠습니다

우리가 이름을 알아내는 방식으로 그 쓰레기를 얻는 것은 상쾌합니다 우리는 전자 메일을 받았으므로 메시지 필드가 있으므로 전자 메일로 이름을 지정하지 않습니다 우리는 실제로 우리의 구독자를 위해 동일한 PHP 폼을 사용할 수 있습니다 이름 입력란과 이메일 입력란은 나중에 별도의 입력란을 지정하기로 결정할 수 있지만 우리는 당분간 양쪽 모두에 대해 동일한 것을 사용할 수 있습니다 그래서 우리는 이메일과 메시지 필드에 이름을 붙였습니다

우리 대괄호로 돌아 가기 좋아, 지금은 달러 기호로 시작해서 시간이 갈거야 하나는 이메일이었고 다음은 메시지가 아니 었습니다 좋아, 지금은 이름 우리가 뭘 잘하길 바래 우리 모두가 똑같이하기를 바란다 포스트 인 것은 Dolph Sonic이 자본 P OST를 강조하고 실제로 중요한 건 당신이이 모든 일을 똑같이한다면 당신도 문제가있을거야 과 우리는 이것을 복사 할 수 있습니다

그 컨트롤 저장하기 이제 우리가해야 할 일 우리는 우리의 이름 필드를 가져야한다 전자 메일 필드와 메시지 필드는 실제 이름을 가지고 있으므로 우리가 색인 도트 HTML 우리가 만든 사이트는 내려갑니다 우리의 형태로 여기에 당신 우리가 가지고있는 첫 번째 버전은 두 가지 버전이 있습니다 모바일 용, 데스크톱 용으로 모두 4 가지가 있습니다 실제로 볼 때 거기에 일반적인 page

php가 있습니다 아무 것도하지 않아서 아무 것도하지 않아서 이름을 넣고 싶습니다 거기에 우리의 PHP 양식의 연락처는 PHP이며 이것은 모두 될 것입니다 나중에 더 명확 해지고 나는 그것을 우리의 복제 된 형태로 복사 할 것이다 아래에 있어요 우리가 그것을 클릭했을 때 우리는 그것이 PHP를 날려 버리거나 PHP 문의 지금 우리의 각 분야는 여기에 우리가 잘하고 싶은 것입니다

여기에 첫 번째 텍스트 필드가 있는데 이름을위한 것입니다 이름은 간단하게해라 나는 그걸 복사 할거야 이것이 전자 메일 또는 전자 메일이므로 전자 메일의 이름을 지정합니다 이메일 나는 가능한 한 간단하게 유지하려고 노력하고있다

우리는 필요 없다 그걸로 아무것도 할 수는 없지만이 아래에있는 우리의 복제 양식은해야합니다 똑같은 이름과 이메일 필드 필드 이름을 제공합니다 이메일은 괜찮습니다 메시지 필드가 없습니다

구독자 발은 내가 여기에 있지만 우리가 거기에서 일하고있는 것을 보여줍니다 이 인라인 가입자 형태 그래서 우리는 그곳에 이름과 이메일 필드를 가지고 있습니다 이제 우리 연락처 양식으로 이동하여 여기에 우리는 여기에 연락 양식을 가지고 다시 행동을 형성합니다 우리가 방금 시작한 우리의 접촉 PHP로 가기를 원합니다 건물과 다시 우리는 우리의 필드에 두 개의 이름을주고 싶습니다

이것이 John이라는 이름입니다 Doe 그래서 나는 그 이름의 이름과 그 다음의 것을 넣을 것입니다 전자 메일 주소가 내려 가고 전자 메일이므로 이름을 입력하고 전화를 걸어 봅시다 나는 당신이 원하는 것을 이것들이라고 부를 수 있다고 말한 것처럼 이메일을 보낸다 그러나 나는 그것을 지키려고 노력하고있다

여기 간단하고 여기에 우리의 메시지가 들어 있습니다 이 메시지를 지금 우리의 모든 필드에 이름이 붙어 있다고 가정 해 봅시다 각 필드와 연결되어 있으므로 저장했습니다 이메일이라 불리는 이름으로 불리는 연락 양식으로 미끄러 져 들어가면 전자 메일이라고하는데 바로 거기에서 메시지라고합니다 우리의 PHP에 우리가 그 이름과 우리는 그 이름을 그 필드라고 불렀던 이름으로 줄 것입니다

그냥 대괄호를 열고 거기에 반전 된 쉼표를 넣고 싶습니다 우리는 지금 쓰고 있습니다 아래에서 똑같은 것을 할 것입니다 세미콜론은 CSS와 마찬가지로 각 후 하나와 대괄호 이 이메일을 이메일이라고 부르 자면, 같은 이름으로 부름을 보았습니다 여기 꽤 간단하고 이건 메시지라고 불리는거야

알았어 그 사람들을 채우기 위해서 우리는 저 밑에 세미콜론이 있는지 확인해야합니다 우리는 내려 가고 싶습니다 이메일을 받으면 우리는 무엇을 말하고 싶습니까? 이메일을 보내면 이메일을 통해 뭔가를 말하고 싶어 할거야 거기에 밑줄이있어서 우리가 말하기를 원한다면 거꾸로 쉼표는 Styles 식당에서 우리가 지금 사용하고 있던 사이트 자체는 이제 우리가 말하고자하는 부제목입니다

우리는 다른 말을해야 할 것입니다 다시 우리가 말하고 싶은 이메일 주제가 될 것입니다 우리가하고 싶은 말 여기서 나는 표준이나 새로운 메시지를 의미한다 웹 사이트에서 또는 단일 역전 된 말 새 메시지를 사용합시다 Styles에서 좋아요 그 다음 이메일 본문에있는 이름으로 이것이 우리가있는 곳입니다

우리의 사용자가 예를 들어 자신의 이름으로 알고있는 정보를 원합니다 그들의 이메일 주소와 그들이 보낸 메시지 전자 메일 본문이 몸을 강조하므로이 점이 동일 할 것입니다 실제 이메일 입력란에 나타나기 때문에 이름과 그 이름 옆에 우리는 그들이 여기에 그들의 이름으로 채워 넣을 것이 무엇이든 가질 것입니다 코트를 입은 다음 그 이름을 바로 여기에 넣고 그들이 그들의 이름 안에 넣은 것을 채워야합니다 나는 시대를 칠 것입니다

그리고 IMAX 위대한 사양 오른쪽 그레이스 백 스페이스와 새로운 라인에 대한 N 그 후에는 일정 기간이 지나면 이것을 닫을 것입니다 우리가 추가하고 싶은 다른 것들을 이제 내가 거기에 마침표를 넣을거야 우리가 이메일을 작성하고 싶었던 이름, 그래서 우리는 똑같은 짓을 할 것이다 메시지 자체는 우리가 전자 메일로 말하기를 원했기 때문에 우리가 알고있는 것입니다 이메일 주소는별로 분명하지 않고 물론 파운드가 아닙니다

이메일에 서명하여이 세부 정보를 채울 것입니다 다시 말하자면 우리는 백 슬래시를 넣고 새로운 페이지를 넣기를 원합니다 거꾸로 쉼표를 쓴 후에는 다른 기간을 추가합니다 하나 더 여기 물론 메시지이며 이것이 조금 보일 수 있습니다 지금 당장 이상한 일이지만, 우리가 이것을 할 때 분명히 드러날 것입니다

확신합니다 우리가이 메시지를 그들이 사용하는 메시지와 함께 사용할 거라는 걸 알 잖아요 그들의 메시지는 달러 기호 메시지이므로 거기에 있는지 확인하십시오 정확히 똑같은 철자가 붙어 있지 않다면 대문자를 쓰지 마라 고양이는 대소 문자를 구분하지 않기 때문에 작동하지 않을 것이므로 PHP와 백 슬래시 (backslash)와 거기에있는 개행 문자를 치면 거기없이 빠져 나갈 것입니다

이건 어쨌든 이제 할거야 왜냐하면 우리는 세미콜론을 넣을거야 계속 나아가고 우리의 다음 일은 지금 가고 있습니다 우리는 그들이 당신이 그들의 주요 이메일 메시지를 채울 거라고 말했어 여기에 우리가 스타일 (Style)에서 원하는 이메일을 우리에게 보냈을 때 우리는 그것을 말했습니다

레스토랑 사이트와 별에서 오는이 새로운 메시지를 원하는 제목 줄 그 아래에서 우리는 그들이 여기에서 채웠던 것이 무엇이든지 원한다 그러나 우리는 그것을 말하지 않았다 어디로 가야할까요? 우리가 보내고 자하는 곳에 넣으십시오 메시지를 좋아할만한 이메일 주소가 될 수 있습니다 약간의 여유 공간이 있고이 일을 제대로 수행해야합니다

평등하게 가고 나서 우리가 살 때 당신의 이메일 주소를 넣으십시오 내 진짜 이메일 주소를 거기에 넣어 분명히 괜찮아 그래서 세미콜론 사촌 우리는 조금 더 추가 할 것입니다 이제 우리는 어디로 가야할 지 말하십시오 이 물건을 넣고 머리글에 전자 메일의 머리글을 넣으면 헤더가됩니다 우리는 누구로부터 왔는지 말할 수 있기를 바란다

쉼표는 바로 그 다음에 우리는 스크롤을 통해 이메일에 넣을 것입니다 그리고 다시 우리는 이번에 그것을 돌려받을 것입니다 우리는 달러 백 슬래시 R을 사용할 것입니다 그리고 백 슬래시 N과 거기에 약간의 세미콜론이 있습니다 쉼표가 있으면 지금 다음 헤더가 많이 있습니다

그들에게 우리는 거의 정확한 이메일에 회신하지 않을 것입니다 이번에는 머리글을 다시 붙이십시오 다른 사람은 혼란스럽지 않고 열리고 닫히는 것과 같습니다 쉼표로 회신 – 그리고 우리는 답장을하기 때문에 이메일을 보냅니다 이 전자 메일 값을 위해 여기에 넣은 것이 든간에 그들의 이메일 주소 우리는 그것이 돌아오고 개행하기를 원한다

그래서 괜찮아 보인다 이제 우리는 남성에게해야 할 일을 실제로 말해야합니다 같은 남성이 둥근 브래킷을 열고 내부에 두 개를 추가하여 전자 메일 주소로 보내려고합니다 우리는 쉼표를 넣는 전자 메일 제목을 추가하려는 전자 메일을 추가하려고합니다 이 공간과 전자 메일 본문 사이에 전자 메일이 있으므로 제목과 전체를 포함하는 이메일 본문 이 정보는 여기에있다

더하기 우리는이 두 헤더를 원한다 그리고 우리가 대답 할 때 우리는 그 이메일에 답장을 보내십시오 그래서 헤더를 추가하고 다시 헤더를 추가 할 수 있습니다 일반 Word 문서를 입력 할 때 쉼표 뒤에 공백을 넣지 마십시오 우리가 거의 이것 한 번 해본 다음에는 한번 제출 했어

물 우리가 당분간 잘 해내 길 원한다 우리는 그들을 다시 보내야한다 페이지 상단으로 머리말이 둥근 괄호 하나에서 열립니다 더 많은 시간 우리가 가고 싶었던 위치를 말할 거에요 우리 페이지 이름 인 이튼 index

html에 가보겠습니다 그냥 페이지의 상단에 갈거야 그래, 거기에 뭔가를 넣어 그 후에 오만처럼 다른 것을 추가하고 싶은 경우에 대비해 거기에 작은 틈새 거기에 우리의 연락 PHP는 지금 어떻게 우리가 할거야 이 모든 일을 잘 할 수있는 일은 내가해야 할 일이 있다면 지금 저장하는 것입니다 우리의 부트 스트랩 폴더를 살펴보면 우리가 지금 가지고있는 부트 스트랩 4 폴더가 있습니다 일반 색인화 된 또는 HTML 페이지 및 우리는 그냥 우리가 우리의 연락처 PHP 파일을 가지고있어 지금 처음에 내가 기억 하건데 이것은 이것이 당신이 라이브 서비스를 제공하지 않는 한 일하는 것은 라이브 코드이기 때문에 라이브 호스팅이 필요합니다

서버를 사용하므로 우리 웹 사이트가 온라인 상태인지 확인하고 싶습니다 이 모든 것들이 내 웹 서버에 이르기까지 FTP 클라이언트의 무료 비트를 사용하려고합니다 FileZilla라는 이름의 소위 괜찮은 것부터 시작하겠습니다 할머니처럼 우리는 모든 것을 올바르게 꿰뚫어 야합니다 괜찮 으면 괜찮아

괜찮 으면 세미콜론 버퍼가 없어 세미콜론을 놓치면 그 시점에서 멈추고 오, 그래, 괜찮아 내 이메일을 넣어 줘야 돼 거기에 잠시만해도 괜찮아 보여서 안된다 이제는 밑줄을 써야합니다

전에 말했던 것처럼 정말 중요합니다 모든 것이 자리에 있어야합니다 그렇지 않으면 상황이 올바르게 작동하지 않습니다 괜찮아 내가 그걸로 행복하다는 걸 믿어

그래서 내가 구할거야 내가 할일은 내가 할거야 내 이메일 주소를 입력하면 업로드됩니다 당신 좋아요 모든 준비가되었습니다

대신 이메일 주소를 입력 해주세요 귀하의 이메일 주소가 이제이 전체 사이트를 라이브 서버 여기에 우리의 모든 웹 사이트 파일이 들어있는 부트 스트랩 폴더가 있습니다 CSS 이미지 우리가 방금 작성한 JavaScript 비디오 접촉 PHP와 우리의 indexhtml 그 (것)들을 움켜 잡고 생활 서버에 올려주기하는 것은 어떻게 당신은 그것을 하는가? 당신은 그것이 정말로 쉽다는 것을 말하고 있습니다 나는 약간의 자유 소프트웨어를 사용할 것입니다

FileZilla라는 이름으로 FTP 클라이언트와 여기에 링크를 달았습니다 여기서 내 컴퓨터 파일의 왼쪽에 계속해서 내 컴퓨터의 디렉토리와 여기에있는 폴더가 여기에 있습니다 이 폴더와 나는 그저 오른쪽에있는 우리 웹 사이트 파일들을 보여 줬어 옆에 호스팅 제공 업체에 연결되어 있습니다 이제 우리는 수백 개의 웹 사이트에 있습니다

나는 방금라는 하위 디렉토리를 만들었습니다 당신이 단지 하나를 호스팅하는 중이라면 그 순간을위한 부트 스트랩 웹 사이트를 방문한 사람은 아무 것도 얻지 못했을 것입니다 공용 HTML을 사용하지만 호스팅 제공 업체와 확인하십시오 정말 쉽습니다 왼쪽 클릭하고 드래그하여 선택해야합니다

왼쪽 버튼을 클릭 할 것입니다 내 손가락을 아래로 유지하고 내 호스팅 제공 업체 디렉토리 바로 여기에 복사가 시작되면 교차 할 것입니다 부트 스트랩 (bootstrap)과 관련이있는 이유가 너무 좋아서 너무 가볍기 때문입니다 정말 쉽습니다 WordPress와는 다릅니다

설치하지 않아도됩니다 말 그대로 데스크탑에 설치하고 라이브 서버를 가로 질러 드래그하십시오 그것은 나를 틀리게하지 않는다 나는 단어를 사랑한다 WordPress – 멋진 종소리와 휘파람이 있지만 건물을 만들 때 기업 사이트 또는 한 페이지짜리 사이트 또는 스플래시 페이지와 같은 페이지 방문 너무 가볍기 때문에 매번 부트 스트랩을 사용하겠다

빨리 그리고 정말 쉽습니다 이제 끝났습니다 합리적인 속도로 여기에 업로드가 오래 걸리지 않았습니다 저희 사이트를 온라인에서 실시간으로 보러 가서 이메일을 보낼 수 없는지 확인하십시오 그래서 나는 그것의 하위 도메인이기 때문에 나는 나의 정규적인 사이트에 갈 것이다

거기에 하위 도메인 ds4라는 이름이 붙어있어서로드가 얼마나 빨리 완료 되었습니까? 첫 번째 문의 양식을 작성하고 이것이 작동하는지 확인하십시오 가입 양식과 난 그냥 거기에 임의의 이메일을 넣어 내 이메일 통신에 내가 사용하는 일반적인 테스터는 페이지의 맨 위로 돌아가는 점을 클릭하자 그 이유는 그것이 우리 PHP 폼의 바닥에 있기 때문에 우리가 가라고 말했기 때문입니다 바로 여기 indexhtml에 있습니다

따라서 기본적으로이 페이지의 맨 위입니다 이번에는 우리의 연락 양식으로 가자 여기에 살고있어 난 그냥 연락해 너 감히 그렇게하지 않을거야

이메일 주소와 여기에 좋아요 제출 버튼을 누르면 다시 페이지 상단으로 팝업됩니다 거기에 우리가 가서 1 ~ 2 분 기다릴거야 그럼 내 Outlook 이메일로 이동합니다 고객과 내가 그걸 받았는지 확인해 이메일 당신 알았어 약 2 분 후예요

우리는 그 두 메시지를 모두 가지고 있습니다 맨 위 하나를 통해 나는 우리가 보낸 마지막 것이 무엇인지 추측한다 양식이 있고 이메일에 메시지가 있습니다 Styles 레스토랑 사이트에서 가져온 헤더가 있습니다 그것은 우리가 주제에 넣기 위해 말한 Stiles 접촉으로부터의 새로운 메시지입니다

필드를 입력하고 지금 답장을 보내면 이메일 주소로 답장해야합니다 그래, 훌륭 했어 좋아, 이제는 그럴 필요 없어 물론 가입 양식의 하위 양식이 될 것입니다 메시지가 없습니다

왜냐하면 거기에 메시지 필드가 없으므로 이름과 메시지가 있습니다 이메일이있어서 모든 것이 잘 작동하고 있습니다 이걸 한 걸음 더 나아가서 PHP 폼을 만들 수 있다는 것을 의미합니다 이것들 각각은 당신이 원한다면 그들은 다른 주제를 가지고 있습니다 그러나 나는 단지 가려고합니다

그것을 그대로두고 우리가 한 일을 정확하게 수행하십시오 당신이 구독자 양식이나 뭐 그런 말을하고 싶다면 여기에 메시지를 올려주세요 그런 다음 이메일 주소를 만들어서 자신의 이메일 주소에 넣을 수 있습니다 MailChimp Constant와 같은 당신의 메일 클라이언트는 그들 자신의 것을 가지고 있습니다 양식을 자동으로 사이트에 올릴 수 있습니다

하지만 우리가이 양식을 보낸 대신에 다시 위로 갑자기 튀어 나와 보자 나는 그것을 원한다 나는 당신이 당신의 메시지를 보내 주신 것을 고백하는 페이지로 간다 그래서 우리의 괄호로 돌아가 보자 나는 이것이 조금씩 진행되고 있음을 알고있다

이 비디오는 가치가있을 것입니다 여기에 우리의 인덱스는 HTML 페이지에 있습니다 근본적으로 나는 그것으로부터 약간의 재료를 훔칠 것이다 머리글이 있고 그게 그 다음에 우리는 뭔가를 가질 수 있습니다 이 말은 당신의 메시지를 보냈습니다

당신 그게 아마 바닥 글에있는지도를 보자 우리가 제거 할 수있는 모든 것, 그래서 우리 사이트를 우리의 인덱스 점으로 가져 가자 HTML과 줌 백업 위로 그리고 그의 카사 아래로 가자 우리는 이걸 맨 아래까지 가져 가고 싶지 않아 그 Jumbotron 아마도 과거의 와인 선택 와인 메뉴를 확대 해 보겠습니다

점보 트론 (Jumbotron)은 그 모든 것을 삭제합니다 이제이 비트를 Google지도로 가져갑니다 당신 그것이 비디오 섹션이나 아직 갈 길입니다 Google지도와 바닥 글 호스트는 해당 항목을 삭제하므로 우리는 우리의지도 표시 줄에 그 작은 Jumbotron이 있습니다 문의 해 주셔서 감사합니다

당신 나는 당신에게 메시지를 박수 치기 시작할 것이다 당신 집으로 돌아 가기 위해 버튼을 쳤다 그리고 우리는 단지 내가 거기에서 추측하는 Stiles를 말할 것이다 기존 색인 도트 HTML HTML 페이지를 덮어 쓸 것이기 때문에 그렇게 말하지 마십시오 네가 그렇게 말하면 네가 그걸 백업했으면 좋겠어

indexhtml로 저장하면됩니다 여기에 부트 스트랩 폴더가 있습니다 HTML이 성공했다고 가정합니다 좋아, 이제 우리가 여기에 우리 페이지에 가면 우리는 다른 페이지를 가지고 있다고 말할 것입니다

HTML을 성공이라고 부르며 열어 보겠습니다 우리가 간다 우리가 가지고있는 것이 우리를 홈페이지로 다시 데려 갈 것이다 내가 말하지 않았기 때문에 나는 그의 팬 페이지를 가져 가지 않을 것이다 여기에 버튼이있다

진실한 마음에 드는 것이 어디에서 지금 가고있는가? 그곳에 가기위한 아무런 즐겨 찾기가 없기 때문에 HTML 페이지의 인덱스를 바로 잡을 수 있습니다 괜찮아 그걸 다시 시도하자 그 페이지를 새로 고침해라 그리고 거기에 우리가 우리가 지금 원하는 것을 다시 홈 페이지로 가져갔습니다

우리가 연락 양식을 보낼 때 연락 양식으로 돌아가고 싶습니다 이번에 우리가 성공 페이지를 치라고 말하고 싶은 위치에 성공 HTML 우리가 거기에서 부르는 것이 바로 거기에 있습니다 이제 우리의 새 페이지와 업데이트 된 연락처 PHP 파일을 서버를 새로 고침합니다 히트 새로 고침에서 마우스 오른쪽 버튼을 클릭하면됩니다 우리의 성공 페이지가 왼쪽 클릭으로 서버로 업로드됩니다 PHP에 연락하면 그것을 드래그해야하며, PHP를 업데이트하라는 메시지가 표시됩니다

그게 바로 이상이야 우리가 원하는대로하는거야 괜찮아 괜찮아 다시 보내겠습니다

그것은 우리의 라이브 페이지가 아니며 우리의 것입니다 라이브 페이지를 확인하십시오 위로 돌아가서 위로 올라가십시오 여기에서 보내자 그 시간에 괜찮 았어

나가 주셔서 감사합니다 당신이 당신의 하위 구독에 대해 다른 것을 가질 수 있다고 말하는 것 같은 당신의 메시지 거기에 다른 PHP와 당신의 연락처에 대한 다른 하나 무엇을하고 싶은지 바꿨다 다른 것을 쓰다 구독 해 주셔서 감사합니다 당신 또는 귀하의 성공 페이지에 귀하가 말할 수있는 가입 페이지가있을 수 있습니다

가입 또는 우리 모두가 귀하를 우리 메일 링리스트에 추가하기 위해 그걸 세이버라고 부르기를 원한다면 나는 다음 접촉에로드 한 또 다른 페이지이다 하나는 이걸 복사해라 HTML 또는 그 페이지를 호출 한 내용을 구독하고 메시지를 변경하십시오 새로운 가입자 작업 완료 알았어 연락 양식을 보자 그게 또 다른 일을 할 수 있는지 보자

여기에 하나를 반올림하고 모자를 쓰지 않으면 유효성을 검사합니다 그때 당신은 그것을 시도하고 보내면 약간의 오류가 나옵니다 시도해 보시고 보내주세요 그걸 포함 해주세요 원하는 경우이 필드를 필수 필드로 만들 수 있습니다

만약 그들이 그것을 채우지 않는다면 그것은 매우 쉽습니다 바로 이것을 보내십시오 다시 성공 페이지로 이동하여 버튼을 눌러 집으로 돌아갑니다 그 방법으로 사람들은 그들의 메시지가 때때로 전달되었다는 것을 알게된다 그들이 생각했던 페이지 상단에있는 위로 올라간다

보냈는지, 아니면 그냥 흐트러 뜨 렸는지 다행스럽게도 우리가 선고 한 첫 번째 문장이 몇 분 더 있습니다 저의 이메일 주소는 저기 있습니다 괜찮습니다 메시지와 어쩌구 저쩌구는 많은 Z가 거기에가는 모든 것이 좋기 때문에 PHP를 사이트에 추가하여 연락처 양식을 사용하는 방법 가입 양식이 유용 할 것입니다 YouTube 채널을 좋아하고 공유하고 YouTube 채널을 구독하십시오

웹 개발에 관심이있는 아래의 웹 개발 코스 중 하나를 선택하십시오 YouTube 가입자에게 큰 할인 혜택이 있습니다 위대한 무료 코스가 다시 한번 시스템 22와 웹에서 온 제이미입니다 디자인 및 기술 팁 시청을위한 com 감사는 좋은 하루 보내세요

Container in Bootstrap 4

얘들 아 내 채널 Ndev tuts에 오신 것을 환영합니다 컨테이너에 대해 이야기 해보 죠? 컨테이너는 부트 스트랩 컨테이너에서 가장 기본적인 레이아웃 요소입니다

반응 형 컨테이너는 센터링 할 수있는 수단을 제공하며 가로로 사이트의 콘텐츠 컨테이너는 중첩 될 수 있습니다 여기에서의 이미지를 볼 수 있습니다 부트 스트랩 컨테이너

컨테이너 유형 컨테이너에는 두 가지 유형이 있습니다 1 고정 폭 컨테이너 및 2 컨테이너와 유체

보자 그 (것)들과 사용하는시기가 다릅니다 너비가 고정 된 것에 대해 이야기 해 봅시다 컨테이너 응답 픽셀 너비에

container를 사용하십시오 그것의 최대를 의미한다 각 중단 점에서 너비가 변경됩니다 고정 된 너비의 이미지를 볼 수 있습니다 컨테이너

고정 너비의 데모를 보자 컨테이너 예제 시각적 인 스튜디오 코드를 여는 것 먼저 새로운 HTML을 작성하십시오 파일

여기에 동일한 초보 템플릿 코드가 재사용됩니다 이미 설치가 완료되었습니다 내 HTML 파일에 초보자 사원 코드가 있습니다 코드를 작성하는 body 태그에 fixedhtml

In 고정 폭 컨테이너는 컨테이너 클래스를 사용하여 설정됩니다 행은 적절한 정렬을 위해 고정 너비 컨테이너 내에 배치되어야하며 심 행과 그리드 시스템 다음 강의에서 설명하겠다 이미지 태그의 이미지 태그는 이미지에 표시 할 이미지 경로를 설정합니다 출력 화면 이미지 너비와 높이도 설정하십시오

그 다음에 파일을 저장하십시오 코드를 실행 해 봅시다 이것은 출력 화면입니다 우리는 여러 장치 또는 여러 화면이 필요하지 않습니다 웹 사이트 응답 성을 테스트하십시오 Chrome을 사용하여 직접 확인할 수 있습니다

개발자 도구 컨테이너의 응답 성을 확인합시다 부스터 고정 폭 컨테이너의 각 중단 점이 있습니다 이제 Chrome을 엽니 다 개발자 도구는 첫 번째 방법으로 수행 할 수있는 두 가지 방법이 있습니다

요소를 마우스 오른쪽 버튼으로 클릭하면 크롬 브라우저에서 마지막 옵션 요소를 검사하고 클릭하십시오 크롬 내부에 새로운 창이 열립니다 브라우저 이 작업을 따르지 않으려면 크롬 개발자 도구입니다 모든 단계를 누른 다음 단축키 ctrl + shift + I를 사용합니다

다른 단축키는 f12입니다 Chrome 개발자 도구를 직접 엽니 다 장치 도구 모음을 전환하려면 클릭하십시오 초대형 화면 크기에서 볼 수있는 현재 이러한 종류의 화면보기 1 3 3 0 픽셀이므로 부트 스트랩에서 화면 크기 해상도를 볼 것입니다 그리드 부분 튜토리얼

컨테이너 너비의 크기를 조정 해 봅시다 첫 번째 중단 점은 1 1입니다 7 5 픽셀 대형 장치 크기가 다시 화면 크기를 줄이면 두 번째 중단 점은 9 9 1 픽셀입니다 그것은 중간 장치입니다

그런 다음 다시 화면 크기와 세 번째 중단 점은 7 6 1 픽셀입니다 소형 장치 크기마다 화면 크기를 줄이는 시간이 생기면 새로운 중단 점이 생깁니다 컨테이너의 반응을 볼 수 있습니다 유체 폭 컨테이너 그것은 항상 100 % 폭을 의미합니다

여기 유체의 이미지를 볼 수 있습니다 폭 컨테이너 용기 컨테이너 용 유체 : 100 % 너비 뷰포트와 장치 크기의 전체 너비에 걸쳐 있습니다 유체 레이아웃에서는 크기가 픽셀 단위가 아닌 백분율로 지정됩니다 요소의 화면은 그대로 유지됩니다

그것은 매우 유연한 레이아웃 다음 고정 너비 레이아웃 데모 유체 너비 컨테이너 예제를 보겠습니다 모든 것을 반복하다 고정 폭 컨테이너 프로그램과 같은 단계는 코드 작성을 시작합니다 컨테이너 유체 클래스를 사용하여 설정된 컨테이너가있는 유체 저장 후 코드를 실행하자 이것이 출력 화면입니다

Bootstrap Card Image Zoom in Zoom out Effect – Must Watch

안녕하세요 일일 수업료로 돌아 오신 것을 환영합니다

이 튜토리얼에서는 멋진 카드를 만드는 방법을 보여줍니다 이미지를 축소합니다 호버 효과 카드 이미지 위에서 마우스 커서를 움직이면이 이미지가 확대되어 보입니다 커서를 움직이면 축소 효과가 나타납니다

이 비디오를 시작하기 전에 구독 버튼을 누르고 있는지 확인하십시오 벨 아이콘은 내 모든 새로운 비디오를 알리고 버튼을 누르는 것을 잊지 마세요 이 비디오에서 유용한 것을 찾을 수 있습니다 그래서 우리가 늦기 전에 시작하자 비주얼 코드 편집기를 열고 새 프로젝트를 만듭니다

해당 프로젝트에서 주식 폴더를 삽입하고 해당 폴더에 세 개의 이미지를 삽입하십시오 이제 인덱스 도트 HTML 파일을 작성하고 stylecss 파일을 작성하십시오 indexhtm 파일에서 간단한 HTML5 스 니펫을 만들고 title을 지정하십시오

그런 다음 제목 태그 링크 stylecss에서 라이브 서버에서이 파일을 엽니 다 이제는 부트 스트랩을 프로젝트에 추가하여 부트 스트랩 웹 사이트를 만들고 여기에서이 CDN을 복사하여 indexhtm의 머리 부분에 붙여 넣습니다 body 태그에서 컨테이너 클래스를 만들고이 클래스에서 내용을 합친 행을 삽입합니다

센터 클래스 컨텐트 정당화 Center 클래스는 모든 요소를 ​​가운데 정렬하는 데 사용됩니다 이 수업에서는 col MD 4 개의 세 열을 만듭니다 각 열에 부트 스트랩 카드를 삽입합니다 카드를 만들려면 부트 스트랩 웹 사이트로 이동하여 구성 요소를 클릭하고 카드를 선택하십시오

이 카드를 선택하고이 코드를 복사하여 첫 번째 열에 붙여 넣습니다 원본 속성에서 이미지의 일부를 지정합니다 여기서는 이미지의 저장 폴더와 이름을 지정하겠습니다 그런 다음 카드 폭을 늘리고 20rem을 지정합니다 카드 제목과 단추 텍스트를 변경하십시오

다음을 지정하십시오 카드 단락에서 일부 데모 테스트 그래서 일부 텍스트를 복사하여 여기에 붙여 넣을 것입니다 그런 다음 기본 버튼을 성공으로 변경하십시오 우리가 텍스트를 추가하는 텍스트의 가운데에 센터 클래스 그게 다야

이제 카드 준비가되어 있지만 배경에 그림자를 추가하고 싶습니다 그래서 우리는 카드에 Shadow 클래스를 추가합니다 이제 카드에 적용된 그림자가 보입니다 두 번째 및 세 번째 카드를 만들어 첫 번째 카드를 복사하여 붙여 넣습니다 두 번째 열과 세 번째 열에 있습니다

이제 이미지 태그의 소스 속성을 변경하고 카드 제목을 변경하려고했습니다 두 번째 및 세 번째 카드의 이미지 및 카드 제목 텍스트를 변경합니다 이제 카드 준비가 표시됩니다 stylecss 컨테이너 클래스를 선택하고 8 %에서 margin-top을 지정하십시오

그러면 모든 카드가 가운데에 배치됩니다 이제이 카드에 이미지 호버 효과를 만들고 싶었습니다 이 이미지 확대 / 축소 효과를 만들기 위해 우리는 부분에 img 태그를 래핑하고 클래스를 지정합니다 안의 이미지 태그를 잘라내어 내부 클래스에 붙여 넣으십시오

두 번째와 세 번째 카드에도 똑같이하십시오 그 후 stylecss 파일에서 내부 클래스 선택 overflow 속성을 숨김으로 지정합니다 이미지 태그를 선택하고 전환 속성을 모두 지정하여 지속 시간 15 초 및 애니메이션 용이성의 흐름을 지정하십시오

그 후 내부 클래스에 호버 효과를 만들고 이미지 태그를 선택하고 변환을 지정합니다 특성 척도 15 스케일 기능을 사용하여 크기를 늘립니다 이미지의 이제 이미지 위에서 마우스를 가져 가면 확대 / 축소 효과가 나타납니다

그래서 이미지 위에 커서를 올려 놓으면 줌이 적용되고 움직일 때 볼 수 있습니다 커서가 축소 효과를 볼 수 있습니다 오버 플로우 속성 내부 클래스를 제거하면 어떤 일이 일어 났는지 보여 드리겠습니다 그래서 당신이이 속성을 제거하면 당신은 이렇게 보일 것입니다 오버플로 속성을 사용하여 마우스 커서를 움직일 때 오버플로 콘텐츠를 숨 깁니다

이미지에 이미지는 여전히 크기가 커지지 만 나머지 내용은 숨겨집니다 그게 다야 우리의 이미지 확대 축소 기능이 생성됩니다 이 비디오에서 유용한 것을 발견하면 좋아하는 버튼을 눌러야합니다

가입 버튼을 클릭하면 모든 새로운 비디오를 알릴 수 있습니다 그것은 또한 지금입니다 우리는 다음 튜토리얼에서 당신을 볼 것입니다 그때까지 행복하게 지켜보고

Introduction of bootstrap 4 part-2

안녕하세요 여러분, 내 채널 Ndev tuts에 오신 것을 환영합니다 이 자습서의 오늘 bootstrap 4 part-2의 소개에 대해 배우게 될 것입니다

여기에서 우리는 논의 할 것입니다 주제 아래 : 1 "헬로우 월드" 시작 템플릿을 사용하는 응용 프로그램 2what의 새로운 기능 부트 스트랩에 4

이것은 부트 스트랩 학습의 공식 링크입니다 웹 사이트 : getbootstrapcom 아래 동영상 설명에서이 링크를 찾을 수 있습니다 브라우저에서이 링크를여십시오 여기를 보러 부트 스트랩 학습의 공식 웹 사이트 시작하기 링크를 클릭하십시오

여기서 부트 스트랩에 대한 시작 템플릿을 찾을 수 있습니다 "헬로우 월드" 시작 템플릿을 사용하는 응용 프로그램 첫째, 문서 안에 하나의 폴더를 만드는 것입니다 오픈 비주얼 스튜디오 코드보다 여기에 폴더를 열려면 내부 문서 작성 새로운 html 파일을 만드는 것보다 indexhtml 이 코드를 복사하십시오

여기에 붙여 넣으세요 이 파일을 저장하십시오 이 초보 템플릿 코드를 실행하기 전에 시작 템플릿 코드를 이해해 봅시다 부트 스트랩은 html 5 doctype을 사용합니다 html 5 doctype없이 부트 스트랩, 불완전하거나 부적절한 것을 볼 수있다

스타일링 더 많은 오버 헤드가 발생하지 않습니다 적절한 렌더링을위한 메타 태그 모든 기기의 터치 확대 / 축소 부트 스트랩 CSS가 필요합니다 선택적 JavaScriptthe 자바 스크립트의 순서는 첫 번째 jquery popper

js보다 부트 스트랩 js보다 경량을위한 jquery jquery의 버전 제외 아약스, 효과 현재 사용되지 않는 코드 popperjs 드롭 다운, 툴팁 및 팝업 표시 및 위치 지정 용 부트 스트랩 경고를위한 부트 스트랩 js , 회전 목마, 모달, 탭, 드롭 다운 등 우리는 위의 주제를 살펴볼 것입니다 내 자습서에서 이 초보 템플릿 코드를 실행하는 것보다 낫다 이것이 출력 화면입니다 그 때, 나는 토론 할 것이다

부트 스트랩 4의 새로운 기능은 무엇입니까? 1Flexbox 보다 단순한 플렉스 박스 및 더 유연한 레이아웃에 따라 다른 화면 크기 및 다른 디스플레이 장치 2 그리드 시스템의 새로운 클래스 및 뷰포트 너비 수정 새로운 XL 클래스가 그리드 시스템에 추가되었습니다 최소 및 최대 뷰포트 크기가 3에서 4로 변경되었습니다

pixelwe에서 부트 스트랩으로 살펴볼 것입니다 그리드 부분 튜토리얼 3Reboot

css 부트 스트랩 3은 Normalizecss를 사용합니다 브라우저 기본 CSS를 재설정하는 방법 하지만 그것은 rebootcss로 대체됩니다 부트 스트랩에서 4

resets 브라우저 일관성있는 크로스 브라우저를위한 스타일 개발 4 카드 부트 스트랩 버전 4의 지원 중단 패널, 축소판 및 우물 클래스 새로운 "카드"구성 요소로 대체되었습니다 flexbox로 제작되었습니다 5

브라우저 지원 부트 스트랩 버전 4가 공식적으로 중단되었습니다 인터넷 익스플로러 지원 8,9 및 6입니다 부트 스트랩 웹 사이트 만 지원할 것입니다 IE 10+ 및 IOS 7+ 6

REM 부트 스트랩 버전 4가 삭제되었습니다 친척을위한 픽셀 rems 같은 측정 단위 7 작별 인사, Hello Sass 부트 스트랩 4는 sass로 다시 작성됩니다 8

Drop : Glyphicons 부트 스트랩에 웹 글꼴이 없습니다 4 9 향상된 툴팁 자동 배치 지원하다 부트 스트랩 4 지원 중단 Tetherjs가 유리하다

좋은 직업을하는 popperjs 적극적으로 유지 관리됩니다 10 유틸리티 클래스 공간 및 타이포그래피의 변화 마진과 패딩을위한 새로운 클래스 flexbox16px는 의미하는 새로운 기본 글꼴 크기 텍스트의 크기가 더 크고 더 눈에니다

How to Create Responsive HTML Email Template Using Bootstrap

안녕하세요, 모두가 매일 수업료를 다시받을 수 있습니다 이 자습서에서는 부트 스트랩을 사용하여 간단한 HTML 전자 메일 템플릿 디자인을 만듭니다

이 비디오에서는 최신 부트 스트랩 프레임 워크를 사용하고 CSS를 사용합니다 이 템플릿은 모바일 및 테이블에도 반응합니다 이 튜토리얼을 시작하기 전에 우리를 구독하고 벨 아이콘을 눌러 내 모든 새로운 비디오를 알리고 아무것도 찾으면 버튼을 누르십시오 이 비디오에서 유용합니다 그래서 항상 늦게 시작하기 전에 let 's가 시작됩니다

먼저 폴더 응답 전자 메일을 만들어 코드 편집기에서 엽니 다 이 폴더에서 이미 스톡 폴더를 만들고 이미지를 주식 내부에 넣습니다 폴더 이 자습서에서는이 이미지를 사용하고 있습니다 그래서 우리가 할 일은 index

html과 stylecss라는 새로운 파일을 만드는 것입니다 indexhtml 파일에서 간단히 html5 코드 조각을 만들고 페이지 제목을 변경합니다 그런 다음 getbootstrap 웹 사이트에서 bootstrap

css 파일 cdn을 복사하고 여기에 붙여 넣으세요 그런 다음 글꼴 굉장 아이콘 cdn을 복사하여 여기에 붙여 넣어 계획 마지막으로 custom style을위한 stylecss 파일을 링크 할 것입니다 이제 우리는 페이지를 디자인 할 것입니다

본문에서는 부트 스트랩 컨테이너 클래스를 만듭니다 이 클래스에서는 외부 패널 텍스트 센터와 둥근 클래스를 배치합니다 외부 패널은 맞춤 클래스입니다 텍스트 센터는 테두리를 추가하기 위해 텍스트 중심에 둥근 클래스를 사용하는 부트 스트랩 클래스입니다 반지름

따라서이 클래스에서는 아이콘을 삽입하고 패딩 2를 추가합니다 그런 다음 라이브 서버를 사용하여이 프로젝트를 실행하십시오 라이브 서버는 비주얼 코드 편집기에 설치해야하는 확장 프로그램입니다 프로젝트를 마우스 오른쪽 버튼으로 클릭하고 라이브 서버 열기를 선택하십시오 그래서 이것은 아이콘입니다

외부 패널에서는 반올림 된 부트 스트랩 클래스를 사용하여 내부 패널 클래스를 만듭니다 이 클래스에서는 col-md-12를 사용하여 행을 만들고 열을 만듭니다 이 칼럼에서는 여백 위쪽에 h6 제목 태그를 만들고 여기에 텍스트를 삽입합니다 그런 다음 단락을 만들고 여기에 텍스트를 추가하십시오 그런 다음 새 열을 만들고 이미지 태그를 넣고 소스 속성 이미지 태그의 이미지 이미지 경로를 지정합니다

그런 다음 alt 텍스트를 지정하고 스타일을 추가하고 너비와 높이를 지정합니다 그래서 이것은 이렇게 보일 것입니다 그 후에 stylecss 파일에서 body 태그를 만들고 여백과 패딩을 제거합니다 html 요소

그런 다음 외부 패널 클래스를 만들고 폭을 60 %로 지정하고 패딩을 지정합니다 및 배경색 rgb 알파 색상을 사용하여 배경색을 지정합니다 이제 우리는 컨테이너 클래스를 생성하고 디스플레이를 지정하기 위해 이러한 요소를 중심에 배치하려고했습니다 콘텐츠 속성 센터를 수정하고 정당화합니다

그런 다음 내부 패널 클래스를 만들고 배경색과 상자 그림자를 지정합니다 재산 그런 다음 단락에 대해 글꼴 크기를 지정합니다 그 후 indexhtml 파일에서 다른 컬럼을 만들고 몇 개의 데모와 함께 단락을 삽입합니다

본문 데모 텍스트를 지정하려면 lorem 웹 사이트를 사용하고이 텍스트를 복사하십시오 여기에 붙여 넣으세요 그런 다음 버튼을 만들고 클래스 btn btn-warning을 지정합니다 여기에 다운로드 템플릿 텍스트를 삽입하십시오

그러면이 단추가 여기에 표시됩니다 그런 다음 닫는 행 div 다음에 가로 행을 만듭니다 그 후 우리는 또 다른 행을 만듭니다 이 행에서는 부트 스트랩 그리드 시스템의 두 열을 만듭니다 먼저 col-md-2 클래스를 만듭니다

이 클래스의 내부에는 패딩 4를 추가하고 아이콘을 삽입합니다 글꼴 멋진 웹 사이트에서 자신의 아이콘을 선택할 수 있습니다 먼저 아이콘의 이름을 지정하고 fa-2x 클래스를 사용하여 크기를 지정한 다음 패딩 y와 패딩 x를 지정하십시오 그런 다음이 아이콘의 스타일을 만들고 배경색을 지정하십시오 그래서이 아이콘은 이렇게 보입니다

그런 다음 col-md-10을 사용하여 두 번째 열을 만들고 여기에 여백 4를 지정합니다 이 열에는 h6 제목 태그를 삽입하고 텍스트를 삽입합니다 그리고 단락을 추가하고 데모 텍스트를 여기에 삽입하십시오 이제이 디자인을 보게 될 것입니다 그런 다음 col-md-2를 사용하여 새 열을 만들고이 열에 대해 패딩 x 4를 지정합니다

기둥 그런 다음 여기에 배경색으로 아이콘을 삽입하십시오 그런 다음 col-md-10의 두 번째 열을 만들고 그것에 패딩 x를 지정하십시오 이 열에 h6 제목 태그에 텍스트를 삽입하고 단락을 데모 텍스트 그런 다음이 유형의 디자인을 보게됩니다

그런 다음 col-md-12를 사용하여 새 열을 만들고 패딩 4를 지정하십시오 이 열에 h6 제목 태그를 삽입하고 텍스트를 지정하십시오 그런 다음 앵커 태그를 만들고 여기에 이메일을 지정하십시오 그런 다음이 단락의 스타일을 작성하여 글꼴 크기와 텍스트 장식 특성을 지정합니다 완벽 해

inner div를 닫으면 새로운 행을 만들고이 행 안에 열을 삽입합니다 이 열에서 꼬리말 탭을 만들고이 꼬리말 태그에 패딩을 지정합니다 이 바닥 글 태그에서 우리는 d 플렉스 플렉스 행과 패딩 x 클래스를 만듭니다 flex 행 클래스를 사용하여 단일 행에 html 요소를 만듭니다 여기에 삽입 한 내용은 단일 행으로 정렬됩니다

여기에서 우리는 사교적 인 아이콘을 삽입 할 것입니다 먼저 서클 클래스로 facebook 아이콘을 삽입합니다 이 아이콘에 스타일을 지정하기 위해 여기에서 circle 클래스를 만듭니다 여기에 아이콘을 몇 개 만듭니다 아이콘을 만든 후에는 다음과 같이 보입니다

그런 다음 데모 텍스트가있는 단락을 삽입합니다 그거야 그 후 stylecss 파일에서 버튼을 만들고 글꼴 크기를 지정합니다 그런 다음 원 클래스를 만들고 폭 40px 높이 40px 테두리 지정 반경 100px 및 여백 2 % 다음 테두리 1px 단색을 지정하고 색상, 텍스트 맞춤 중심 지정 패딩 상단 12 픽셀

그 후에 당신은이 결과를 볼 수 있습니다 이제 우리의 디자인이 준비되었습니다 그러나 이제 우리는 그것이 반응하는지 아닌지 확인해야합니다 그래서 우리는 그것을 점검 할 것입니다 이 프로젝트가 완전히 반응하지는 않습니다

이제 우리는이 프로젝트를 반응 적으로 만들 수있는 몇 가지 코드를 만들 것입니다 따라서 stylecss 파일에서 미디어 쿼리를 추가하고 장치 너비를 425px로 지정합니다 여기서 우리는이 화면 크기에 도달 할 때 몇 가지 클래스를 변경하려고합니다 여기서는 외부 패널 클래스를 만들고 너비를 100 %로 지정합니다

패딩 3 % 그런 다음 제목 텍스트 클래스를 만들고이 클래스를 두 번째 제목으로 지정합니다 이리 미디어 쿼리에이 클래스를 만듭니다 그래서 여기에 패딩 탑 속성을 지정하여 이렇게 보입니다

그 후 우리는 원 클래스에서 경계선을 제거합니다 그거야 이제 템플릿이 준비되었습니다 이 템플릿은 이제 모바일 장치에 완벽하게 반응합니다 따라서이 단원에서 유용한 것을 찾으면 같은 버튼을 눌러야합니다

이 채널에서 새 소식을 듣고 구독 버튼을 누릅니다 일단 그게 전부 야 우리는 다음 강연에서 당신을 보게 될 때까지 행복하게 지켜보고 있습니다

[#24] Bootstrap Modals zum Hinzufügen/Ändern von Kundendaten

안녕하세요! 나는이 비디오에서 소위 모달을 만드는 방법을 보여주고 싶다 부트 스트랩은 PHP 및 Ajax와 함께 사용할 수 있습니다

Ajax는 비동기 Javascript를 나타냅니다 즉, HTML이 있음을 의미합니다 기반 페이지를 변경할 수 있습니다 백그라운드에서 PHP 파일을 사용하여 예를 들어 그리고 페이지를 다시로드하지 않고 이 예제를 살펴 보겠습니다

여기에 작은 ERP 시스템을 구축하고 싶습니다 즉, 고객, 기사 및 데이터를 관리 할 수 ​​있습니다 합니다 고객 측에서 고객 개요가 표 형식으로 표시됩니다 나는 데이터베이스에 고객이 없어서 아직 비어있다

더하기 기호에 관해서는 고객을 추가 할 수있는 가능성이 있습니다 그런 다음 상기 모달을 엽니 다 이렇게하면 페이지 공간을 절약하고 더 명확하게 볼 수 있습니다 나는 고객을 추가 할 것이다 여기서 인사말을 선택할 수 있습니다

제목 음과 이름을 줄 수 있습니다 보시다시피 고객이 추가되었습니다 그 중 하나는 오른쪽에 "행동"에 대한 가능성이 핀 위에 고객이있다 편집하거나 삭제할 수 있습니다 삭제할 때 확인 메시지가 나타납니다

편집 할 때 모달로 돌아갑니다 그에 따라 값을 변경할 수 있습니다 고객을 한 명 더 추가하겠습니다 열을 클릭하면 그들은 그에 따라 분류됩니다 소개를 위해 너무 좋아

소스 코드를 살펴 보겠습니다 이 섹션은 고객을 추가하는 모달입니다 부트 스트랩 페이지에서 복사 할 수 있습니다 링크 찾기 그녀의 비디오 설명 모달 – 몸체 간단히 두 개의 선택 필드와 세 개의 입력 필드를 추가했습니다

우리가 양식을 사용하지 않는 것이 눈에니다 이것은 여기에서 그렇게 쉽게 작동하지 않습니다 데이터는 자바 스크립트로 처리되며 PHP로 전송됩니다 파일을 보냈습니다

이제 살펴 보겠습니다 또한, 모달은 고유 한 ID를 가지고 있다고 말해야 만합니다 Save (저장) 버튼에는 고유 한 ID가 있습니다 출력되는 모든 텍스트 각각의 언어 파일에서 되돌아옵니다 이미 비디오가 있습니다 고객 개요는 위에 작성되었습니다

이를 위해 모든 고객을 생략하는 선택 쿼리가 있습니다 $ stmt-> fetch ()에 대하여 $ row 변수에 고객을 지정합니다 모든 고객이 소비 될 때까지 이것이 while 루프가 된 이유입니다 while 루프 내에서 매번 새로운 테이블 행이 생성되고 여기에 내용으로 가득 차있다

덧붙여서, 여기에서도 볼 수 있습니다 삭제할 때 보안 쿼리가 작동하는 방식 이 작업은 onClick () 이벤트를 통해 수행 할 수 있습니다 이것은 확인 상자로 해결할 수 있습니다 그것은 자바 스크립트 문법이기도합니다 "확인"을 눌러이 상자를 선택하면 링크가된다

고객 / 삭제 / #each ID #가 호출되었습니다 ID는 각 고객 ID이며, 그래서 스크립트는 어떤 고객이 그것을 삭제해야 하는지를 안다 URL 개념 하나는 htaccess 파일에 있습니다 나는 뭔가를 확장해야했다 이 규칙이 추가되었습니다

예를 들어, 링크에 적용됩니다 고객 / 삭제 / ID도 괄호 안의 각 패키지 여기서 뒤에있는 변수에 할당됩니다 첫 번째 패키지는 $ 1에서 끝납니다 2 분의 2 초 그리고 3의 세 번째

그래서 "고객 / 삭제 / 아이디"라고 부를 때 백그라운드에서 s = customer & action =로 리디렉션됩니다 삭제 & ID = 각각의 ID 중요 함 그 규칙 옛 규칙 위에서야한다 대괄호 안에있는 "L"은 그것은 마지막 규칙이다 적용되는 경우 아래 규칙은 무시됩니다

QSA는 "Query String append"의 약자입니다 따라서 $ _GET 매개 변수를 사용할 수 있습니다 또한, 위의 몇 가지 디렉토리를 명시 적으로 다시 작성했습니다 금지 글꼴, CSS, JavaScript, 이미지 PHP 파일 용으로도 사용할 수 있습니다

이를 "ajaxphp"라고합니다 왜 이렇게 중요한지, 우리는 똑같이 보게 될 것입니다 그래서 간단히 명령을 삭제하십시오 물론 모달 및 JavaScript 지원도 제공합니다

할 수 있습니다 하지만 여기서 PHP 방식을 보여주고 싶습니다 두 가지 방금 언급 된 GET 매개 변수 ID 및 조치가 요청되었습니다 설정되어 있고 조치가 실제로 "삭제"된 경우 단순히 삭제 쿼리를 실행하십시오 사용자는 이에 대한 DELETE 권한도 가지고 있어야합니다

그런 다음 페이지를 완전히 다시로드하여 변경 사항을 적용해야합니다 본다 나는 여기 JavaScript로 그렇게한다 링크가 여기 슬래시로 시작되면 루트 디렉토리에서 시작한다고합니다 이 경우 "c : xampp htdocs"입니다

아래에서 "tablesorterjs"파일을 볼 수 있습니다 나는 코멘트에 대한 링크를 쓴다 이 파일은 테이블을 정렬 가능하게 만듭니다 이 파일이 포함 된 경우 정렬 할 테이블에 고유 한 ID를 지정하십시오

이 경우 나는 그들을 "tbl_kunden"이라고 불렀다 또한 CSS 클래스 "tablesorter"를 제공하는 것이 중요합니다 정말로 "thead" "tbody"가 작동하지 않으면 작동하지 않습니다 자, 이제 jquery 부로 가자 먼저 테이블 정렬을 시작합니다

이 명령으로 가능합니다 그 아래의 줄은 고객을 추가하기위한 것입니다 그것은 그것보다 더 복잡해 보입니다 "고객 추가"모달 이 ID가있는 버튼이 있습니다 그리고 그걸 클릭하면 모든 것이 끝났다

중괄호 사이에 무엇이 있는가 우선 입력 필드의 값은 변수에 저장됩니다 이 작업은 val () 함수를 통해 수행됩니다 그런 다음 Ajax 요청이 시작됩니다 이 파일로 연결되어야합니다

나 또한이 아약스 파일을 htaccess 파일에서 재 작성했다 제외 데이터는 우편 방법으로 보내야합니다 "데이터"를 통해 게시물 변수를 직접 정의 할 수 있습니다 나는 그들에게 변수를 할당한다

대문자로 표시된 변수 게시 JavaScript 변수는 작습니다 Ajax 파일은 여러 경우에 사용되기 때문에 나는 또한 변수 "행동"을 불렀다 이 경우, 나는 "고객 추가"라는 가치를 부여했습니다 곧 다시 보자 데이터 유형으로, 나는 단순히 "텍스트"를 사용합니다

그 후에는 두 가지 가능성이 있습니다 어느 쪽이든 작동합니다 (성공) 또는 아닙니다 (오류) 작동하면 모달이 사라집니다 이것은 함수에 관한 것입니다

"숨기기" 페이지가 다시로드됩니다 짧은 표기법은 다시 쓰기 규칙 때문에 만 작동합니다 오류가 발생하면 오류 메시지가 출력됩니다 Ajax 파일을 살펴 보겠습니다 여기있어

그리고 그것은 포스트 배열을 질의했다 몇 가지 사례가 있음을 알 수 있습니다 첫 번째는 '고객 추가' 그러나 나중에 "고객 데이터 확보"및 "고객 편집"도 있습니다 그래서 우리는이 블록에서 처음입니다 먼저, 현재 정의 된 포스트 변수 PHP 변수에서

그런 다음 INSERT 쿼리에 추가됩니다 execute ()에 의해 실행됩니다 그게 효과가 있다면 우리는 성공 영역에서 여기서 끝납니다 실제 실행은 백그라운드에서 거의 발생합니다 좋습니다, 모달은 일반적인 링크와 같은 방식으로 호출됩니다

글리 phicons에 링크를 적응 그게 큰거야 더하기 기호 지정해야합니다 data-toggle = "modal" 및 데이터 – 타겟 = = "Modal_kunde_hinzufuegen" 그래서 그것은이 것입니다 링크를 통해 전화 걸기 불행히도, 모달 프로세스는 그렇게 쉽지 않습니다

불행히도 여기에 여분의 링크를 추가 할 수 없습니다 그렇지 않으면 열립니다 모달 아닙니다 링크가 없다면 나는 가능성이 없다 "action"과 같은 변수를 얻는다 "ID"를 사용합니다

그래서 다른 방식으로 신분증을 제시해야합니다 다시 한 번 링크에 모달 속성을 매달았습니다 그러나 나는 "데이터 ID" 이름 여기에 각 고객 ID가 주어집니다 이 ID는 JavaScript로 처리 할 수 ​​있습니다 모달이 열릴 때 이미 존재하는 데이터가 표시되어 모든 것을 수행하지 않아야합니다

예를 들어 작은 변화 만 만들고 싶다면 new를 입력해야합니다 첫째, 각 고객 데이터를 읽어야합니다 그래서 지금이 ID가 필요합니다 왼쪽에서 ID를 검색하려면 부트 스트랩이있다 이벤트는 "show

bsmodal"입니다 그런 다음이 구문을 가져옵니다 속성 "data-id"에서 각 고객 ID 이 ID 나는 숨겨진 필드에 글을 씁니다 이것은 여기에 편집 모달에 있습니다

그게 여기있어 그리고 아래에서는 입력 필드에 숨김을 추가했습니다 이것은 현재 아무런 가치가 없다 "type = hidden"이라고 쓰면 표시되지 않습니다 그것은 단지 안에있다

배경 사용 가능 Javascript가 바로 여기 있습니다 ID를 전달하십시오 여기에 신분증을 붙이세요 이 값 필드에 그 후 기본적으로 고객과 동일한 구문을 따릅니다 추가합니다

이번에는 "고객 데이터 검색"이라고합니다 데이터를 표시하려면 먼저 어딘가에 가져와야합니다 읽어 보시기 바랍니다 이 경우에는 게시물 변수로 읽는 ID 만 필요합니다 이번에는 데이터 유형이 JSON입니다

JSON은 텍스트 형식의 간단한 데이터 형식입니다 의견에 대한 자세한 내용 ajaxphp 파일을 살펴 보겠습니다 여기에 "고객 데이터 얻기"가 있습니다

먼저 ID를 변수에 넣습니다 그런 다음 SELECT 쿼리를 실행하기 만하면됩니다 ID를 SELECT 쿼리에 전달합니다 질의가 실행된다 결과는 변수 $ row에 저장됩니다

echo 명령을 통해 모든 것이 반환됩니다 실제로 JSON으로 인코딩됩니다 즉, 결과를 간단한 텍스트가 아닌 텍스트를 JSON 형식으로 되돌립니다 반환 된 데이터는 결국 변수 "data"로 끝납니다 나는 그것을 여기에서 다르게 부를 수 있었다

val () 함수를 통해 개별 필드를 할당합니다 각각의 데이터 SELECT 쿼리가 배열을 반환했기 때문에 나는 여기있다 항목을 통해 "데이터"의 각 속성에 액세스하십시오 인사말, 직위, 이름 이들은 모두 데이터베이스 테이블의 열입니다

고객을 편집 할 준비를하는 것이 좋습니다 수정 버튼이 실제로 눌려진 경우 우리는이 블록에 있습니다 구문은 고객 추가와 거의 완전히 같습니다 이번에는 ID가 필요합니다 정확하게 알고 있어야하기 때문에 고객을 처리해야합니다

여기 숨겨진 필드에서 가져올 게 방금 내가 그들을 쓴 곳 "Customer_process"작업이 실행됩니다 여기에서 "Kunden_bearbeiten"을 볼 수 있습니다 순수한 UPDATE 쿼리 일뿐입니다

그게 전부 야 이 예제는 비교적 복잡합니다 당신이 그것을 완전히 이해할 때까지, 아마도 조금 걸립니다 그래서 내가 좀 더 빨리 설명했다 대략적인 개요를 얻습니다

Ajax는 현재 매우 자주 사용됩니다 예를 들어 누군가가 당신에게 메시지를 쓰는지 또는 페이스 북을 생각하는지 상태는 geliket입니다 화면에 메시지가 자동으로 나타납니다 페이지를 다시로드하지 않아도됩니다 다음에 봐요!

Bootstrap – How to edit a bootstrap template

안녕 얘들 아 이것은 http://wwwsystem22

net에서 제이미이며 http://wwwgreat-webdesigncom/ 여기에 작은 비디오 우리는 부트 스트랩 템플릿을 편집하는 방법을 알려줄 것입니다 당신이 원하는 멋진 부트 스트랩 템플릿을 다운로드했거나 찾았습니다 편집하고 압축을 푼 다음 여기에 작업을 수행 한 폴더에 있습니다

너는 그걸 한번 보러 가라 나는 네가 그렇게 생각한다고 생각한다 우리는 이것을 어떻게 편집하고 내 자신의 필요를 위해 그것을 어떻게 사용합니까? 글쎄, 어려운 일이 아니다 먼저 텍스트를 얻으려고한다 편집기와 저는 브래킷을 사용하는 것이 좋습니다

브래킷은 IO이고 나는 그것을 사용합니다 모든 종류의 편집을 위해 HTML CSS JavaScript를 사용합니다 그것을 정말로 가볍게 편집해라 그래서 당신은 계속 나아갈 수있다 무료라고 말하면서 다운로드 한 번 한 번 설치하십시오

indexhtml 파일을 보면 거기에 실제로 설치됩니다 그것을 클릭하십시오 지금 당신은 괄호가 설치되어있어 당신에게 옵션을 줄 것입니다 브래킷으로 열어 다른 모든 것과 마찬가지로 당연히 해보십시오 프로그램 괄호를 열려면 먼저 파일을 열고 파일을 열고 index

html 파일 또는 여러 페이지로 구성된 사이트 인 경우 멀리있는 곳까지 indexhtml HTML 연락처 HTML 등에 대한 파일 etc 기타 동일한 프로세스 이 모든 것이 여기에 우리 사이트의 메인 페이지입니다 간단히 말해서 나는 너무 깊이 들어 가지 않을거야 템플릿을 편집 할 수있을만큼 충분히 변경하면됩니다 당신의 제목이 무엇이든 당신이 아는 제목으로 여기에 당신의 이름을 바꾸십시오

그것은 어떤 것과도 같아야한다 그냥 당신이 원하는 것을 입력하십시오 끝 부분에있는 태그는 엉망이되어서 여기에있는 설명은 스타일 시트에 대한 링크 일뿐입니다 우리가 조금씩 조금씩 갈 것 인 모든 스타일을 바꿔라 이러한 다양한 장치 애플 장치에 대한 찬성 죄수보다 브라우저 탭에 표시되는 작은 기호뿐 아니라 실제 첫 번째 바로 가기 아이콘보다 그곳에있는 패브릭 '그래서 우리가 계속하자면 마지막 사이트를 다시보고, 우리가 먼저 바꾸고 싶은 것을 보아라

okay 분명히 우리가 바꾸고 싶은 첫 번째 일은 바로 로고입니다 고객에게 새로운 로고를 만들어야합니다 분명히 그들은 이미 당신을 보내고, 내가 가지고있는 것을 보자 이미 여기 어딘가에 새로운 로고가 있습니다 이미지가 바로 여기에 있습니다

원래 로고가 있습니다 여기에 광산을 넣으십시오 새 로고라고 부릅니다 그래서 우리가 대괄호와 당신은 당신이 걱정하는 경우에 nav의 밑에 당신의 로고를 보통 여기에서 찾아 낼 것이다 당신은 Ctrl 키를 누른 채로 F를 찾을 수없고 로고를 입력하면 강조 표시됩니다 때로는 쉽게 찾을 수있는 첫 번째 로고 단어 우리는 단지 코드를 변경하는 데 익숙하지 않다

새 로고가 새 로고라고 생각했던 새 이미지 이름에 그 이름이 붙었습니다 PNG 그래서 그것은 단지 새로운 그것이 사실 우리가 거기에 그것을 할 것을 촉구 그래서 내가 갈거야 해당 방문 횟수를 클릭하여 저장하고 다시 방문하면 우리의 사이트는 우리의 로고를 여기에서 바꿔야합니다 우리는 거기에 우리의 새로운 로고를 넣어야하고 우리가하고 싶은 것은 다음과 같습니다 그것이 단지 이미지이기 때문에 여기에 몇 가지 슬라이더 이미지를 넣으십시오 내가 폴더로 돌아 가면 우리가 거기에 계속 가고있는 자리 표시 자 나는 두 개의 이미지를 준비했다

분명히 자신의 이미지를 만들어야한다 나는 그것들을 가져 가면서 복사 할 것이고 슬라이더 폴더에 여기에 넣을 것이다 그곳에는 원본이있는 곳이 있습니다 그들이 실제로 입는 URL은 지금은별로 중요하지 않습니다 다시 우리가 우리의 괄호로 돌아 가면 슬라이더로 내려 가고 싶습니다

여기에 슬라이더 텍스트가 멋지게 표시되어 매우 유용합니다 이미지 배경을 다시 찾으면 찾을 수 없습니다 내가 너를 보았으니 너는이 모든 것들에 익숙해 져서 우리는 ~하고 싶다 우리가 믿는 새로운 슬라이드로이 0 제트 JPG를 하나의 점으로 바꾸십시오 jpg 이미지 타입을 거기에 넣으려면 작동하지 않을 것입니다

Ctrl 키를 사용하여 저장하거나 원하는 곳에 저장합니다 우리 사이트에 다시로드하거나 새로 고침하고 거기에 우리는 우리의 새로운 이미지를 넣었습니다 분명히 당신이 넣고 싶은 모든 슬라이드에 대해 반복합니다 여기에서 우리는 하나 더 할 것입니다 두 번째 슬라이드는 여기 아래 슬라이드 2와 Ctrl 키를 눌러 저장하고 사이트에 다시 돌아와서 다음 버튼을 누르면 다시로드됩니다

거기에 다음에 새로운 이미지가 있으므로 아이디어를 얻습니다 이미지 또는 원하는 슬라이더를 선택하십시오 이 텍스트를 변경하거나 슬라이드에있는 텍스트를 분명히 사용자 정의하십시오 만약 우리가 우리의 괄호로 돌아 가면 여기에 텍스트 섹션이 있습니다 각각은 표제어이며 h2는 표제어의 H 태그를 향하고 있습니다

가장 큰 2 개는 약간 작고 6 개로 내려 가면 얻을 수 있습니다 당신이 내려갈 때 더 작아서 우리가해야 할 일은 여기에 새로운 제목을 쓰는 것입니다 그 괄호를 처음부터 끝내고 거기에서 끝내지 않도록하십시오 새로운 제목을 올바르게 표시하지 않으며 새로운 설명을 자막으로 표시합니다 우리는 비슷한 길이로 유지할 것입니다

미적 목적을 위해 슬라이더에서 작동하므로 비슷한 모양으로 유지합니다 길이를 늘리거나 줄일 수 있지만 CSS 코드로 조정해야 할 수도 있습니다 그래서 저장하고 우리의 사이트 등을 맞댄 저 ctrls를 보자 자 우리는 거기에 새로 고침 할게 우리의 새로운 제목과 우리의 새로운 부제와 하단에 새로운 설명이 있으므로 아래로 스크롤하면 서비스를받을 수 있습니다 섹션 분명히 우리는 텍스트를 같은 방식으로 편집하므로 나는 가지 않을 것입니다

다시 말하지만 우리가 여기서 내려 간다면 우리의 서비스 섹션에서 새로운 서비스를 사용하면 슬라이더에서 요점을 하나 더 얻을 수 있습니다 if 너무 많은 슬라이드가 하나만 삭제할 수 있고, 클릭하면됩니다 상단의 div 태그를 보면 해당 닫기가 강조 표시됩니다 이들을 인식하기 시작해야하는 태그는 모두 거의 설정되지 않았습니다 여기와 각 슬라이드가 하나의 새 슬라이드에 해당하므로 닫는 div 태그의 시작 부분에 div 태그의 시작 부분이 나옵니다

태그에 작은 슬래시가있어서 그걸 닫을거야 그 히트 저장을 삭제하고 그 마지막 슬라이드가 사라지고 싶지 않은 경우 그게 Ctrl Z를 치면 다시 돌아올거야 그리고 네가 잘 결정하면 더 많이 원해 당신이 그 섹션을 복사 할 수 슬라이드 ctrl C는 그냥 반환하고 밑줄을 그것을 아래에 붙여 넣으면 밑에 슬라이드를 붙여 넣기 만하면됩니다 새로운 그림을 넣고 새 텍스트를 그 자리에 넣으면됩니다

그냥 내가 어쨌든 당신이 어떻게 알 수있는 서비스 섹션으로 다시 커버 할 줄 알았는데 우리가 방금 끝낸 새로운 서비스를 아무 문제없이 편집해라 그저 다른 사이트에 저장해 두었다가 다시 사이트에 저장하면됩니다 그리고 다시로드하고 지금은 새로운 서비스를 말한다 이것은 모든 텍스트이다

이것은 모든 텍스트이다 여기에 작은 아이콘을 글꼴 굉장히 바꿔서 매우 쉽게 바꿀 수 있습니다 글쎄 만약 당신이 멋진 깡통 시트 또는 글꼴 굉장 글꼴에 가서 내가 보여 줄께 여기 글꼴 굉장한 점 IO 유사 주소 및 치트 시트 또는 그냥 구글 치트 속임수 여기에 우리의 모든 글꼴 awesomes의 목록이있어 당신이 바꿀 수있는 아이콘을 보여주고 필요에 따라 필요한 것을하십시오 그것을하기 위해 우리는 당신이 단지 거기에서 이름을 클릭하는 것을 보여주기 위해 하나를 바꿀 것입니다 그것의 끝까지 fa의 시작은 그것을 복사한다 지금 우리는 우리 괄호 당신은 FAS를 찾고 싶습니다

그리고 그것은 당신의 폰트가 당신처럼 멋진 곳이 될 것입니다 그것이 굉장한 굉장한 재미를 위해 거기에서 FA를 말하는 것을 본다 이제는 이걸 놓아주는 것이 중요합니다 첫 번째 것을 잊어 버리는 것이 중요합니다 그것의 끝까지 단지 두 번째 것입니다 그리고 거기에 새로운 것을 붙여 넣기 만하면됩니다

우리 사이트는 다시 원래의 것입니다 이제 우리는이 새로운 것을 바꿔야합니다 그곳에는 화살이 있었고 나는 왼쪽을 믿고 다시 짐을 싣습니다 너는 그것을 바꾸었고 너는 무엇이든지 넣으면서 갈 수있다 당신이 이것을 편집 할 때 기억하고 싶은 것을 다시 당신에게 감지하십시오

CSS와 최소 높이 및 최대 높이에 대해 알지 못하면 작은 상자를 여기에 넣으십시오 선택한 비슷한 수의 줄을 3 개 유지하고 싶다고 선택했습니다 4 줄의 선이 선이 좋지만 얼마나 많은지는 중요하지 않지만 계속 유지하고 싶습니다 그들 모두 똑같은 RS 박스가 정렬에서 약간 벗어날 것이다 우리가 내려 가면 다시 새로운 사진을 추가하는 법을 오버레이가 있습니다

바로 아래 라인의 텍스트입니다 거기에 오버레이 또는 새 제목이 표시됩니다 당신은 그 오버레이 텍스트를 이제 웹 개발에서 내가 방금 빠른 새로 고침에 입력 한 것은 새로운 제목인데 모두 매우 간단한 가격입니다 똑같은 내용은 그림 텍스트를 변경하려는 모든 텍스트입니다 문제는 버튼 텍스트 버튼이 분명히 여기에있는 곳입니다

어쨌든 가버 리지 않을 순간에 다시 정상으로 돌아온다 나는 너에게 보여줄거야 링크를 추가하는 방법 -이 버튼과이 버튼도 여기로 돌아가려면 여기를 클릭하십시오 우리의 괄호 그래서 가격 내려 갈거야 가격 1cu BTN 거기에 버튼을 할거야 그건 부트 스트랩의 클래스에 관한 것이고 당신은 href를 본다 그곳에 두 개의 거꾸로 된 쉼표가 있었는데 그곳에 링크 여기에 가기를 보면 링크를 원한다

메뉴 구조는 CSS 링크를 사용하는 곳입니다 ID가 있으므로 연락처 섹션으로 보내면 그냥 붙여 넣기 만하면됩니다 두 개의 거꾸로 된 쉼표 ctrl V 사이에 있고 분명히 알 수 있습니다 텍스트를 변경하는 방법 그래서 ctrl 우리 사이트에 말을하고 지금은 내가 새로 고침 이것은 이제 우리가 접촉 섹션으로 이동해야합니다 당신이 무엇을하고 싶은지 분명히 어떤 링크 버튼 링크라도 당신은 어떤 링크를 넣을 수 있습니다

거기 또는 거기에있는 각각의 심판 예를 들어 내 사이트 또는 이것에 의한 외부 링크 나는 그냥 가서 우리가 돌아갈 링크를 복사한다 브래킷을 다시 붙이면 해당 링크를 붙여 넣지 않도록하십시오 거기에 빗댄 쉼표를 넣거나 다시 넣으면 ctrl이 다시 저장됩니다 우리 사이트는 빠른 재 장전을 위해 일단 우리가 다시로드해야합니다 우리 사이트에 우리가 간다

우리 사이트에 그것을 가져 갔다 그것은 우리가 원했던 것이다 그것은 실제로 내 사이트에 동일한 창에서 우리를 데려 간 빠른 팁을 할 경우 당신은 그들이 당신이 새로운 탭에서 열어보고 싶었던이 사이트를 떠나는 것을 원치 않았습니다 당신은 단지 포도 나무 속성을 추가하는 것입니다 add target ta car를 사용하면 목표물을 알려주고 있습니다

우리에게 물어 봤고 그냥 공백으로 쳤다 차는 그것을 발견 할 것이지만 목표물은 공란이며 그 속성은 그 링크가 우리 사이트에 다시 저장 지금 우리가 때 이건 새 탭의 링크를 열어야합니다 여기에 문제가 없습니다 전혀 그럴 필요가 없습니다 다시 시작하기가 쉽습니다

시차 이미지 오른쪽 시차 의미 그것은 다른시 거기서 당신은 할 수있는 모든 일을 쉽게 할 수있는 이미지 텍스트를 어떻게 바꿀 수 있는지 알고 있습니다 거기에 다시 텍스트 여기에 글꼴이 두려운 지금은 여기에 귀하의 문의 양식을 작성하고 라이브 서버에 도착할 때까지 작동하지 않게하십시오 PHP 스크립트라고 부르는 것을 사용하기 때문에 필요한 것은 변경은이 양식을 보내고 자하는 주소입니다 여기에 우리 사이트가있는 폴더에 희망적인 PHP 폼이 있습니다 PHP를 가끔 여기에 루트 폴더에 풀어 놓고 있습니다

이것은 당신이 거기에 폴더를 가지고 있다는 것입니다 우리의 괄호로 열어 줄 것이고 여기에 10 행에 도메인 comm 그래서 당신이 개혁을 원하는 주소를 넣어야합니다 yahoocom의 John Smith 또는 내 비즈니스의 John Smith 일 수있는 곳으로 보내야합니다 일단 도메인을 바꾸고 양식이 전송할 사이트를 업로드하면 여기에이 주소로 보내 드리겠습니다 확인 확인입니다

양식을 보내면 팝업 메시지가 표시되어 변경할 수 있습니다 if 너는 그러고 싶어하지만 그게 깔끔해 보인다 그건 당신이 바꿀 필요가있는 전부입니다 일단 저장을 마치면 라이브 서버에 업로드됩니다 나는 그것이 절대적으로 잘 작동 할 것이고, 물론 당신이 할 수있는 다른 것 이 사이트에서 변경하고 싶습니다 그리고 이것은 조금 더 파고 당신이 원하는 약간의 CSS를 알기 위해이 작업을 수행 할 수 있어야합니다

이 색을 다른 색으로 변경하려는 배경색을 변경하십시오 우리가 밝은 파란색으로 바꾸고 싶다고하자 검사 탭이 뭔가있는 것 같아 여기에 Google 크롬 사용하기 나는 당신이 그렇게하면 그냥 마우스 오른쪽 버튼으로 클릭하여 검사하거나 F12 키를 치면 필요한 정보가 표시됩니다 당신이 그것을 바꾸고 싶은 지역에 다시 한번 조사하십시오

여기에 색상이 있습니다 편집하기에 좋은 방법입니다 비파괴적인 일을 바꿀 수 있고 한번 새로 고침하면 갈 것입니다 어떻게 돌아 갔는지를 알 수 있었지만 어떻게하면 좋을지에 대한 좋은 아이디어를 얻을 수 있습니다 실제로 괄호 안의 편집을하기 전에보기 만하면됩니다

저기있는 새로운 색은 내가 한 것뿐입니다 color 나는 그것을 클릭하고 그냥 거기에 내 새로운 색을 붙여 넣었습니다 그 배경색을 바꾸면이 모든 것들로 모든 것을 할 수 있습니다 거기에 배경색이있어 실제 마우스를 가져 가면 당신이 그것을 바꿀 수있게 해주는 것은 당신이가는 길입니다 그러나 물론 우리가 이것을 새롭게하면 그 변경 사항을 영구히 원한다면 어떻게 될지 다시 돌아갑니다

CSS로 그렇게 할 필요가 있습니다 따라서 우리 폴더로 돌아 가면 여기에 CSS 폴더가 있습니다 일반적으로 메인 또는 스타일이라고 불리는 부분에 있습니다 이것들은 부트 스트랩의 것들입니다 스타일이나 메인 폴더를 가지고 있지만 사실 우리가 사이트를 방문하고 다시 그 점에 대한 경위를 치면 그것이 어디에 있는지 말해야합니다

스타일을 CSS로 변경하면 편집 할 수 있습니다 이 영구적 인 곳으로 다시 돌아가서 마우스 오른쪽 버튼으로 클릭하고 대괄호 및 여기에 우리의 스타일 괜찮아요 그래서 당신이 원한다면 이렇게 쉬운 방법이야 모든 섹션을 변경하는 것은 해당 사이트로 다시 돌아가서 보도록하겠습니다 내가 할 일을 바꿀 색은 그 컨트롤 C를 다시 우리 편집자가 지금 Ctrl 키를 누르거나 우리가하고있는 일은 우리 모두 괜찮아졌고 우리는 전체 로트를 대체 할 수 있고 교체하러 가야합니다 원본으로 입력하겠습니다

하나는 거기에 내가 그것을 대체하고 싶은 것은 밝은 파란색 색상 그래서 만약 내가 가면 앞으로 거기에 그것의 모든 인스턴스를 우리의 것으로 대체 할 것입니다 거기에 새로운 색상이있어서 일괄 처리를했습니다 지금 교체하면 Ctrl + F를 누르면됩니다 새로 고침하면 Google 사이트로 돌아갑니다 이 모든 작은 회색 영역은 색상이 바뀌어야한다고 생각합니다

밝은 파란색의 종류가 있습니다 우리는 그것을 바꾸기 위해갑니다 영구적입니다 그런 식으로 머물러있어 이제 그 색으로 변화 시키거나 모든 것이 바뀌었다

새로운 밝은 푸른 색 평면에 정말 당신이 파고 들어갈 수 있습니다 CSS를 사용하여 모든 종류의 색상을 표현할 수 있습니다 자신이하는 일을 잘 모르는 경우 다운로드 한 사이트의 사본을 만드십시오 나는이 작은 것을 편집 한 적이있는 것을 눈치 채지 못한다 그 작은 점이 보통 당신이 그것을 만들었다는 것을 의미하면 점이 여기에 나타납니다 편집하고 저장하지 않으므로 Ctrl 키를 누른 상태로 저장하면 저장됩니다

if 저장하지 않으면 변경되지 않으므로 간단한 개요입니다 부트 스트랩 사이트에서 HTML과 CSS를 편집하는 방법은 물론 가능합니다 모든 HTML 사이트에 대해 동일한 방식으로이 기능이 도움이 되었기를 바랍니다 이 시스템에서 제이미 22보고 좋은 하루 보내 주셔서 감사합니다 안녕히 가세요

Bootstrap Consultant Website Template Design – Part-2

안녕하세요, 모두들 akshay이고 일일 수업료를 다시받을 수 있습니다 이전 부분에서 우리는 회전 목마를 사용하여 홈페이지를 만들었습니다

이제 우리는 더 나아갈 것입니다 그래서 항상 우리가 말하기 전에 우리는 let 's을 시작하게했습니다 홈페이지를 생성 한 후 메인 섹션을 만듭니다 메인 태그를 생성하고 컨테이너 유체 클래스로 div를 삽입하십시오 그런 다음 행 클래스가있는 다른 div를 만들고 텍스트 센터 클래스를 적용하여 모든 본문

그 후에 우리는 3 열 3 열을 생성 할 것입니다 첫 번째 열에서 이미지 소스가있는 이미지 태그를 추가합니다 alt 텍스트를 추가하고 img-fluid 클래스를 지정하십시오 그런 다음 패딩 2와 마진 4를 사용하여 제목을 만들고 텍스트 중개를 추가하십시오 그런 다음 단락 태그에 설명을 작성합니다

이 단락에 테두리 위쪽, 테두리 아래쪽 및 패딩 3을 추가합니다 이 단락에서 데모 텍스트를 추가 할 것입니다 단락에서이 여분의 텍스트를 제거하려고했습니다 이제 좋습니다 그 다음에는 두 번째 열을 만듭니다

따라서 두 번째 열에서는 img 태그에 이미지 소스를 추가합니다 그리고 img 유체 클래스를 추가하십시오 그런 다음 패딩 2와 마진 4를 사용하여 h5 헤딩 태그를 만듭니다 그리고 두 번째 칼럼 제목에 중요한 서비스를 작성하십시오 그리고 데모 텍스트로 단락을 만듭니다

경계 상단과 경계 하단 클래스를 추가합니다 또한 패딩 3을 추가하십시오 이 코드를 반복해서 입력하는 것을 제외하고이 코드를 복사하여 세 번째 열 그리고 다른 이미지로 이미지 소스 값을 변경하고 제목을 변경하십시오 우리는 세 번째 칼럼에서도 이것을 할 것입니다

이미지 소스 및 제목을 변경하십시오 이제 우리는 컨테이너 유체와 행에 약간의 마진을 추가하려고합니다 이제는 완벽합니다 그 다음에는 콘텐츠 2 클래스로 div를 생성합니다 이 div에서 우리는 텍스트 센터가있는 행 클래스를 추가 할 것입니다

그리고 6 열 2 열을 만듭니다 첫 번째 열에서 h2 제목 태그에 텍스트를 추가합니다 그리고 데모 텍스트로 단락을 만듭니다 그런 다음 행을 만들고 두 개의 열을 만듭니다 첫 번째 열에이 두 개의 열을 생성한다는 것을 명심하십시오

이제 첫 번째 열에서 h4 태그에 비전 텍스트를 추가합니다 그리고 데모 텍스트로 단락을 추가하십시오 이제이 h4 및 단락 태그를 복사하여 두 번째 열에 붙여 넣습니다 그리고 표제를 바꾸십시오 그거야

이제 두 번째 열의 내용을 만듭니다 두 번째 열에서는 img 태그에 이미지 소스를 추가합니다 대체 텍스트 및 클래스 img 유체를 지정하십시오 이제 첫 번째 행에 패딩을 추가하려고합니다 그런 다음 첫 번째 열에 여백을 지정하십시오

stylecss 클래스 내용 2를 만듭니다 배경색을 지정하십시오 그거야 두 번째 콘텐츠가 생성됩니다

이제 우리는 세 번째 내용을 만들 것입니다 따라서 우리는 div 클래스를 3 클래스로 추가하고 행 클래스를 padding 4 행으로 추가 할 것입니다 이 행에 열 여섯 열 두 개를 만듭니다 첫 번째 열에서는 이미지를 슬라이드하는 용도로만 사용되는 작은 회전식 컨베이어를 만듭니다 캐 러셀을 생성하려면 id 캐 루셀 예제 2로 div를 생성하고 클래스 캐 러셀을 지정하십시오 및 슬라이드

그런 다음 데이터 회전 장치를 추가하십시오 그런 다음 코르 셀 내부 클래스로 div를 만듭니다 그리고 슬라이드를 추가하십시오 첫 번째 슬라이드를 추가하려면 회전 목마 항목 클래스로 div를 만듭니다 이 div에서 img 태그에 이미지를 추가합니다

폭 550과 높이 350을 지정하십시오 그런 다음 d-block 클래스를 추가하십시오 그런 다음 다른 회전식 항목을 만들고 이미지 소스가있는 이미지 태그를 삽입하십시오 너비 300 및 높이 350을 지정하고 d-block 및 sec-img 클래스를 추가하십시오 두 번째 이미지가 왼쪽에 표시됩니다

우리는이 이미지를 중심에두고 싶습니다 따라서 stylecss 파일에서 우리는 먼저 콘텐츠 클래스 3을 만들고 배경을 적용 할 것입니다 색상 마진 상단 및 여백 하단 그런 다음 두 번째 슬라이딩 이미지에 클래스 이미지 클래스를 추가하고 여백을 30 %로 지정합니다

그거야 이제 두 번째 이미지가 보입니다 이제 두 번째 열에서 텍스트 센터와 패딩 4로 div를 만듭니다 그리고 h5 제목 태그에 클래스 텍스트 white을 추가하십시오 그리고 그 안에 데모 텍스트를 삽입하십시오

이 후 padding 4와 text white로 다른 div를 만듭니다 그리고 h5 태그에 사람 이름을 추가하십시오 p 태그의 an은 자신의 직업 게시물을 지정합니다 완벽 해 이제 웹 사이트의 절반이 완성 된 것을 볼 수 있습니다

그리고 정말 멋져 보이네요 세 번째와 마지막 부분에서 우리는이 웹 사이트를 완성 할 것입니다 유용한 정보를 찾으면이 비디오를 좋아하고 코멘트 섹션에 댓글을 달아야합니다 이 튜토리얼의 다음 부분에서 보게 될 것이다