Bootstrap 4 Show And Hide Div With JS

안녕 얘들 아, 다른 부트 스트랩 4 비디오에 오신 것을 환영합니다 시스템 22의 Jamie입니다

웹 디자이너 기술 팁 진정 우리는이 작은 작업을하고 있습니다 여기의 부트 스트랩 사이트는 CSS와 가져 오기로 일부 애니메이션을 수행합니다 몇 가지 Java 스크립트와 what-have-you이 비디오에서 div를 만들 것입니다 우리는 꽤 많은 자바 스크립트를 사용하여 버튼으로 보여 주거나 숨길 수 있습니다 간단하지만 사이트를 구축 할 때 매우 유용 할 수 있습니다

저것을 얻자 나는 우리가 그 회전을 멈추게 할 것이다 내 신경을 쓰는 그런 종류의 것을 먼저 없애자 여기에 우리의 폴더가있다 우리의 웹 사이트 파일에 나는 색인을 괄호 안에 열 것입니다

괄호 안의 HTML은 이미 실제로 열었습니다 실제로 여기에 가서 오, 우리는 그 커스텀 CSS 스타일 시트를 사용하여 그것을 열 필요가있다 그 로고에 회전을 멈추고 지금 짖는 소리입니다 브라이언이 여기 있습니다 거기에 회전이없는 로고가 있습니다

바로 그 권리를 제거하는 것입니다 슬래시 스타와 나는 내가 그 회전을 다른 어떤 것에 사용하고 있다고 생각하지 않는다고 확신한다 그래서 나는 단지 우리는 브라우저가 더 이상 읽을 수 없을 정도로 잘 간다 그 부분을 저장하고 그것을 저장하고 사이트로 돌아가서 새로 고침과 희망을 갖고 지금 멈춰야합니다 더 이상 잘 돌아 가지 않습니다

내가 할 수있는 일은 손에 맡기고 내가 다른 데이브를 여기서 만들거야 작은 버튼 우리는 그것을 숨기고 사슴을 다시 우리에게 괄호로 보여줄 것입니다 index dot HTML 및이 대괄호는 다운로드 할 수있는 자유 텍스트 편집기입니다 이 비디오 아래의 링크에서 계속 진행하자 대괄호로 알기도 전에 내 비디오를 본 적이 있습니다

확장 프로그램이 확장 프로그램 관리자를 열면 짧게 사용할 것입니다 CH 부트 스트랩 스 니펫의 코드가 검색을 부트 스트랩하여 사용 가능한 탭은 무료 확장이며 계속 진행하면됩니다 자동으로 설치하거나 조금 걸릴 것입니다 당신은 그들의 페이지에 당신과 Zip 파일을 다운로드 할 것이고 당신은 당신의 zip 거기에 파일을 설치하면됩니다 첫째로 어디에 넣고 싶습니까?이 용기에 여기 넣으십시오

이 다른 것들 나는 그것을 잘주지 않을거야 나는 그것을 더 잘 주겠지 깊은 나는 조금의 스타일을하고 싶을지도 모른다 롤빵에 대한 BT의 수업은 지금 내 안에 거기에 우리의 작은 버튼을 누르면 PS4 BTN의 짧은 코드를 사용하게됩니다 제발 성공 버튼을 눌러주세요

거기에 코드를 넣었습니다 그래서 우리는 이제 버튼을 가져야하고 우리가 처리 할 순간에 아무 것도하지 않습니다 그 순간에 다른 div를 만들자 이 div는 실제로 우리가 목표로 할 IDCUZ를 약간 줄 것입니다 자바 스크립트와 우리는 그것을 수업을주지

그녀는 ID를 줄 것이다 그걸 자본과 함께 숨어있는 것처럼 부르 자 나를 숨겨라 그 div를 닫으 려구 그러면 우리가 숨기고 싶은 div가 될거야

위의 버튼을 사용하여 그 안에 표시하면됩니다 작은 목록 내가 여기에있어 거기는 조금만 더 가볍게 두들 기고 다시 잡아서 깔끔하게 정리하십시오 잘이 열 12 그래서 뻗어 만들 것입니다 전체 너비 그래서 그것은 나를 숨기려하고 그 안에 우리가 생각하고있는 div입니다

여기에 약간의 목록이 있습니다 안에 넣을 수있는 것의 예를 들어주세요 당신이 원하는 모든 것의 내부는 모달처럼 조금 끝날 것입니다 물론 우리는 관례대로하고 있습니다 그래서 그냥 저장하면됩니다

우리가 가진 것을 보아라 친애하는 새로워 거기에 우리 버튼이있어 꽤 사소한 사슴입니다 이 순간에 약간의 스타일링 만하십시오 그래서 나는 모든 사람들을 중심에 두겠다

이것들을 대괄호로 다시 가져 가라 당신 글쎄 그 중심은 텍스트 센터를하는 것만으로 나는 그렇게하지 않을 것입니다 그 센터 실제로 또는 아 모양 우리가 우주에 가고 싶어서 텍사스 인 이니까 텍사스가 안될거야 그것을 입력하면 우리는 새로운 부트 스크랩을 사용하기 때문에 이것들에 약간의 패딩이 필요합니다 부트 스트랩 클래스 실제로 마진을 사용할 것이므로 마진 최고를 말할 것입니다 마진 5를 말하면 모든 마진이 될 것이고 우리는 비슷하게 할 것입니다

너와 함께 이걸 빨리해라 나는 우리가 너무 많은 시간을 할애하지 않을거야 그 배경색이나 뭐 그런 것 같아요 새로 고침을 한 번 더 해보면 마우스 오른쪽 버튼을 클릭하고 검사하면 여기에 크롬 관리자가 나타납니다

Google 크롬 브라우저 거기에 바로 버튼이 있습니다 그것에게 폭과 높이 물건을 줘 보자 73 또는 75 pix는 그 버튼들이었다 상단에서 버튼을 일으키는 것과 유사하게 여기에서 보자 이미지는 실제 버튼이며 50 %의 테두리 반경을 지정합니다

그것을 주변에서 만들어라 좋아, 내가 대문자로 써도 될 것 같은데 그래서 우리가 가서 텍스트 변환을하고 나서 우리는 손에 어떤 패딩 볼지 우리가 가기에 더 좋았 기 때문입니다이 위아래를 조정하십시오 이것은 좌우입니다

그리고 거기에 텍스트를 그곳에 가져올 수 있는지 확인하십시오 진짜로 꼭대기와 밑면에 가지 마라 우리가 그 높이 속성을 부여했기 때문에 순전히 많은 차이를 만들어라 좋아, 그럼 내가 할게 그거에 충분한 시간을 보냈다 이제 복사 해 보겠습니다

이미 존재하는 것이 필요하지 않습니다 이걸 복사해라 우리는 거기에 넣지 않았다 그래서이 모든 것을 복사 해 보자 우리 스타일 시트에 괄호에 붙어있다

나는 그것을 아래에 내려 놓을 것이다 나는 빠른 제목 슬래시를 줄 것이다 스타 스타일의 슬래시를 사용하면 잠시 후에 할 일이 더 많아 질 것입니다 우리가하지 않았기 때문에이 세가지를 남겨 두지 마십시오 이제는 컨트롤이 우리의 사이트를 방문하여 트릭을 완료했는지 확인하십시오

그것은 올바르게 작동합니다 절대적으로 좋았습니다 그래서 우리는 버튼을 가지고 있습니다 우리는 우리 div를 숨기고 싶습니다 우리가이 버튼을 누르면 우리는 너무 잘 시작해서 숨겨진 상태로 시작할 것이고 버튼을 눌렀을 때 우리는 보여주기 위해 여기에 약간의 자바 스크립트를 작성해 보겠습니다

나는 다른 파일보다는 페이지에서 계속 해보겠습니다 그래서 열어 보겠습니다 오, HTML과 우리가 내려 줄께 맨 아래에 우리의 스크립트가 열려있는 닫힌 양식이나 스크립트 태그 STL IPT 그것을 철자하는 법을 몰랐다 그 안에 우리가 자바 스크립트를 쓰고 내가 할 일은 그것을 쓰고 난 다음 잠시 그것을 확대해서 복사 할 수 있습니다 물론 동영상을 일시 중지하여 물론 알 수 없으면 복사 할 수 있습니다

정확히 무엇이 이미 괜찮습니까? 그래서 우리는 함수를 만들 것입니다 내 기능이라고하고 그냥 열어 보면 이제 우리는 중괄호를 열어야하고 그 중괄호 안에 괄호 그 함수가 무엇인지, 변수가 X인지 말해야합니다 그리고 우리가 할 일은 동등 해지기를 원한다는 것입니다 이렇게하면 X가 뒤죽박죽이 될 수 있습니다 문서와 우리가하고 싶은 것은 ID로 문서를 가져와 공간이 없기 때문입니다

거기에 그것의 점은 얻는다 ID로 요소를 실제로 처리하는 것이 중요합니다 원하는 대문자인지 여부에 따라 ID로 요소를 가져옵니다 거기에 수도가 있는지 확인하십시오 그렇지 않으면 작동하지 않습니다

이제 우리가 얻고 자하는 요소는 방금 만든 요소입니다 그리고 그것은 ID에 의한 ID 요소이며 그것은 나를 숨기고 그래서 그것을 두자 거기에 우리는 몇 개의 둥근 괄호 안에 그리고 어떤 거꾸로 된 것들을 넣을 것입니다 나는 자본 M을 사용했기 때문에 자본 M으로 나를 숨겨야한다 괜찮은 제목이므로 그 요소를 얻고 우리는 만들고 싶습니다

인수 if와 it 주위에 괄호에 좀 더 돌아 다니는 중입니다 괄호 X 다른 스타일과 우리가 잠시 후에 CSS 스타일을 조금 만들 것입니다 표시 : 블록 우리는 디스플레이에 몇 개의 등호를 넣어야합니다 거기에있는 거꾸로 쉼표 안에 불어 라 우리는 다른 중괄호를 원하고 우리가 블록을 표시하는지 말하고 싶습니다

표시하도록 말하고 싶습니다 전 스타일로 동등한 남성을 표시 할 수 있습니다 물론 우리는 그것을 제공해야합니다 그렇지 않으면 우리는 그것을 다른 사람에게 주어야합니다 인수의 일부로, 만약 블록을 표시하고 있다면 그것을 표시하고 싶습니다

아니요, 그렇지 않으면 블록을 표시하지 않으므로 그 아래에 세미콜론을 넣으십시오 우리는 괜찮은 우리의 닫는 곱슬을 얻었고 우리는 당신이 알고 있다면 그것을 원한다 그렇지 않다면 우리는 새로운 것을 만들어서 우리가 끝내기를 바라는 몇 가지 curlies를 열어 보겠습니다 : block it 's 그 (것)들을 노는 것은 우리가 전시가 아니 었습니다 이 광고를 표시하고 싶습니다 : 클릭 할 때마다 없음 이 일에 이론에서 하나에서 다른 갈거야 지금은 잘 작동합니다 괜찮아 XX 스타일 그리고 우리는 그것을 표시 싶어요 이번에는 블록을 차단하고 그 끝에 또 다른 세미콜론을 넣을 것입니다 그걸해야 해 우리는 단지 하나의 둥근 괄호를 넣고 싶다

거기에 많은 중괄호 잠깐 나를 곰곰이 살펴 보도록하겠습니다 내가 스크립트 기능을 갖기 전에 줌인하고 복사하기 전에 작동합니다 내 함수가 매달려있는 것 같아요 Curly는 변수 변수 X가 있습니다 ID로 요소 가져 오기 문서 더블 체크 숨기기 나는 그 정확한 영역을 가졌다는 것을 숨기고 그것이 같은 대문자 M이면 지금 X라면 스타일 표시가 블록과 같습니다

그 다음에 나는 아무 것도 표시하지 않을 것입니다 그래서 우리가 원하는 블록을 표시하고 있다면 스프레이 없음 그리고 그것이 뇌를 의미하는 블록을 표시하지 않는 경우 없음 우리는 형제를 표시하고 거기에 마지막으로 닫는 태그를 남겼습니다 정말로 중요합니다 태그 나 세미콜론 등을 놓치지 마십시오 그렇게하거나 실제로 작동하지 않습니다 나는 세미콜론의 끝에해야합니다 거기에이 다음 부분을 읽지 않을 것이므로 그걸 저장하자

그렇지 않으면 우리는이 실제 요소에 CSS를 추가해야합니다 처음에는 숨겨져있다 버튼을 클릭 할 때만 표시되므로 저장하면됩니다 어쨌든 물론 우리는 사용자 정의 CSS 파일을 가지고 있습니다 여기에 우리는 그것을 넣어야 할 것입니다

그래서 여기에 우리의 CSS를 내려갑니다 나는 거기에 또 다른 것을 넣을거야 그냥 숨겨 놓을거야 좋아, 이제 우리 신분증은 나를 숨 겼어 그리고 신분증이 아니야

그래서 해시 태그 그는 수도 였고 그는 몇 가지 curlies를 열고 지 웁니다 시작을위한 배경색을 지정해 보자 우리는 녹색이라고 부를거야 우리는 실제로 그것을 원한다 아무 것도 표시하지 않기 때문에 실제로 시작할 때 우리가 숨길 수 있습니다

불투명도를 사용하는 CSS와 실제로 갭을 차지하는 부동산 여전히 거기에있을 것이므로 그 배경에 녹색 display : none 저장하자 이제 우리 사이트로 돌아가서 이것이 실제로 일한다 오케이 당신이 볼 수 있듯이 거기에 있지 않습니다 오 우리는이 버튼에 아직 무엇을해야하는지 말하지 않았습니다 그래서 클릭하지 않으면 아무 일도 일어나지 않을거야

그래서 돌아 가자 나는 아주 똑똑하지 않았습니다 우리 단추가 어디 있는지 압니다 색인 도트 HTML을 알아요 그리고 그 버튼에있어 우리는이 버튼에 우리가 무엇을 말해야하는지 알고 있습니다

클래스 이름 뒤에 버튼 성공을 넣으려고합니다 당신 클릭 할 때 우리의 기능을 수행하기를 원하기 때문에 우리의 기능을 수행하고자합니다 클릭하면 다른 사람이 클릭하면 그 비트를 실행하고 싶어 스크립트의 작은 부분을 우리가 두 번 확인해 본다 사촌 다시 사실 내 기능을 작동하지 않습니다 그냥 복사 할거야 그래서 클릭을 원한다 내 기능 이제 괜찮 았어

이제해야 할 일을 말해 줬어 돌아가서 그것이 코드를 읽는 새로 고침을하는지 봅시다 한 번 더 클릭하고 거기를 클릭하자 자네가 짐을 내리고 나면 토글하는거야 우리가 말했기 때문에 거기에 표시해야합니다 : none 우리는 여기 custom

css를 보았습니다 우리는 그것을 숨기려했습니다 요소 디스플레이 : none과 우리는 배경 인사말을 거기에주었습니다 이제 우리가 그것을 클릭하면 표시 블록이 표시됩니다 아래쪽 스크립트는 index

html에 나와 있지 않습니다 블록을 표시하고 있으면 아무 것도 표시하지 않으면 아무 것도 표시하지 않습니다 블록 및 디스플레이 블록은 기본적으로 정상적으로 표시된다는 의미이므로 여기에 표시됩니다 모든 작업이 절대적으로 훌륭합니다 여기에 텍스트를 채우기 만하면됩니다

그것은 약간 바보 같아 보이고, 우리는 그것을 모든 항목을 텍스트로 표시하고 텍스트 라이트가 눈에 띄게합니다 그곳에 또 하나의 멋진 부트 스트랩 클래스가 있습니다 네 마진이 하나도 잘 패딩 5 잘해야합니다 여기에서해야 할 일을 돌보십시오이 새로운 패딩 및 여백 클래스를 사용하십시오 5 명 중 가장 작은 사람이 1 명에서 5 명으로 가장 크고 내가 기본적으로 잘못 생각할 수있는 16 명의 사진이라고 생각하는 M 개의 요인에 그래서 사이트에 다시 저장하자 새로 고침 사라져라

이제 버튼을 클릭하면 패딩이 보이지 않습니다 조금만 더 가면 좋아질 것입니다 더 많은 정보 버튼은 특별히 원하지 않는 내용을 더 많이 또는 더 읽습니다 사이트가로드 될 때 표시되지만 사람들이 필요로하는 정보가 있습니다 거기에 다시 스크립트로 돌아가서 내가 뭘 할거야? 내가이 비디오를 편집 할 때이 특정 비트를 확대하여 볼 수 있습니다

그래서 내가 잠시 그 ​​자리에두고 가서 내가 말하는 것처럼 그것을 복사 할 수 있습니다 동영상을 일시 중지하고 복사하는 것이 중요하기 때문에 동영상을 일시 중지 할 수 있습니다 분명히 네가 할 수있는대로 거기에 모든 것을 넣었다 요소의 이름을 변경하면 여러 가지를 가질 수 있습니다 페이지의 이것들은 그냥 내 함수를 호출하고 또 다른 하나는 내 기능 두 가지를 숨기고 다른 요소를 표시하지만 위대한 작은 도구 나는 결코 JavaScript 달걀 전문가가 아니다

나는 HTML과 CSS 생각 만하지 않고도 할 수 있지만 JavaScript는 실제로 넣어야합니다 모든 것이 정확히 맞다 당신 그래서 거기에 div 나 요소를 보여주고 숨기는 방법이 있습니다 자바 스크립트는 꽤 간단하지만 환상적인 효과와 정말 유용 할 수 있습니다 그래서 다시 한번 이것이 시스템 22와 웹 디자인을 가진 Jamie였습니다

기술 팁을 공유하십시오 공유하고 싶다면이 비디오를 즐기기를 바랍니다 웹 개발에 관심이 있다면 YouTube 채널에 가입하십시오 아래를 내려다 보아라 우리는 또한 우리가 가지고있는 위대한 무료 코스를 가지고있다 프리미엄 코스는 YouTube에 큰 할인 혜택을 제공합니다

구독자는 멋진 하루를 보내고있어 주셔서 감사합니다