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는 의미하는 새로운 기본 글꼴 크기 텍스트의 크기가 더 크고 더 눈에니다

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은 자신의 직업 게시물을 지정합니다 완벽 해 이제 웹 사이트의 절반이 완성 된 것을 볼 수 있습니다

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

Cr8Code – Creating Stick Navigation Bar with JQuery Part.2

안녕하세요, Cr8CodeCo에 오신 것을 환영합니다

이전 튜토리얼에서는 우리의 헤더와 네비게이션 바 이제 어떻게 행동 할 것인지 결정할 것입니다 첫 번째 부분을 보지 않았다면 링크를 클릭하고 먼저 살펴보십시오 우선, 우리는 네비게이션 바를 고수 할 CSS 클래스를 시작합니다 정상에

이를 위해 위치를 고정 된 0 위 및 0으로 설정했습니다 Javascript와 JQuery에 들어가기 전에 나는 당신이 그들에 대한 기본적인 이해가 필요함을 당신이 알기를 바랍니다 계속 나아 갑시다 우리는 문서 준비 함수를 만드는 것으로 시작하여 우리의 스크립트가 준비가 끝날 때까지 대기하도록 지시합니다 자체 준비가되었습니다

그러면 우리가해야 할 일은 탐색 바 높이를 얻는 것입니다 50 픽셀이지만 탐색 바가 다를 수 있습니다 따라서 JQuery로 얻고 그것에 대해 신경 쓰지 않는 것이 좋습니다 우리는 네비게이션 바를 우리의 페이지에서 유일하기 때문에 그것을 요소 이름으로 사용합니다 우리는 그것을 클래스 나 ID를 부여 할 것이고, 우리는 해쉬를 그 다음 id로 놓거나 클래스를 점령 할 것입니다

타겟팅 이제 페이지가 스크롤되면 캡처 할 것입니다 그렇다면 우리는 우리의 기능을 해고 할 것입니다 이제 탐색 막대의 높이와 일치하도록 스크롤 크기를 가져옵니다 탐색 막대의 높이가 스크롤 크기에서 150을 뺀 값보다 작은 경우 즉, 우리의 탐색 바는 페이지 밖에 있습니다 여기서 150은 헤더의 높이입니다

스크립트를 삽입하지 않으면 탐색 모음이 아직 페이지에있는 동안 스크립트가 작동합니다 애니메이션 아래로 슬라이드를 추가하여 탐색 모음의 높이를 설정하는 이유 0으로 설정합니다 그런 다음 우리가 처음 만들었던 fixnav 클래스를 nav 요소에 추가합니다 그 직후, 우리는 네비게이션 바의 높이를 500 픽셀 안에 다시 애니메이션으로 만들 것입니다 밀리 초로 설정하면 슬라이드 다운 효과가 생성됩니다

정지 기능은 애니메이션이 쌓이지 않도록합니다 우리가 가진 것을 보자 우리의 기능은 잘 작동하고 브라우저에 fixnav 클래스 추가, nav 요소 추가, 탐색 막대의 높이가 스크롤 크기에서 150을 뺀 값보다 작은 경우 탐색 막대가 끈적 거리지 않는 것을 제외하고는 예상대로 작동합니다 이 문제를 해결하기 위해 else 함수를 만들고 브라우저에 fixnav를 제거하라고 지시합니다 탐색 막대의 높이가 스크롤 크기보다 작지 않은 경우 클래스입니다 다시 확인합시다

그것은 훌륭하게 작동하지만 또 다른 문제가 있습니다 스크롤 기능은 탐색 막대가 윗쪽에 붙어 있어도 스크롤 할 때마다 반복해서 실행됩니다 이 버그를 방지하려면 우리는 부울 값을 가진 다른 변수를 생성하고 다른 if 함수를 생성 할 것입니다 'checker'인 새 변수가 true인지 확인합니다 sticky 함수를 실행하고 'checker'변수를 false로 변경하십시오

이것은 체커가 맞지 않는 한 다시 발사하는 것을 막을 것입니다 이거 야 마지막으로 'checker'변수를 다시 true로 변경합니다 사용자가 길 그리고 우리는 잘 가게된다

우리의 스티키 네비게이션 바를 사용할 준비가되었습니다