CSS NAV BAR BOOTSTRAP 4 MODAL

안녕하세요 Skyler와의 협력을 환영합니다

내 시리즈 빌딩에 오신 것을 환영합니다 PHP 프레임 워크로 부트 스트랩 4 웹 사이트 수정하기 이것은 두 번째 비디오입니다 이 비디오의 제 시리즈에서 저는 기능이없는 navbar를 넣을 것입니다 그러면 점보트론 (Jumbotron)을 실행하고 그 다음에 우리 페이지를 일부 CSS는 여기에서 볼 수 있듯이 <div class = "container-flex"> 이제는 div가 페이지 전체에 걸쳐 있음을 알리는 것은 무엇입니까? 계속해서 내 navbar를 시작하겠습니다 <ul class = "navi"> 그럼 나는 <li class = "navli"> 그런 다음 <a class="nava"> 중간에 넣을 것입니다

그럼 내가 여기서 나가서자를거야 나는 그것을 만들기 위해 자르고 싶다 클립 보드에 있는지 확인한 후 다시 붙여 넣으십시오 하나 둘 셋 그들 중 4 명은 이제 마지막 두 가지를 바꿀거야 <li class = "navliri"> 그리고 나는 그들에게주고 그들에게 아이디를 주겠다 <li id ​​= "flt-rt> 그리고 내가 이것을하고있는 이유는 내가 원하기 때문이다

전진하고 그 마지막 두 개를 오른쪽으로 띄우겠습니다 클래스를 사용하지만 ID를 통해이 작업을 수행하는 것을 선호합니다이 경우에도 <a class="nava" id="flt-rt"> 그리고 나서 이것 다음에 나는 가서 registerphp 두 번째 href에 마지막으로 설정할 것입니다 등록 할 링크 및 여기에 로그인을 설정하고 이 중 하나를 참조하십시오 나는이 href를 너무 실제로 소문자에 넣을 것입니다

href = "loginModal"그리고 나서 나는 data-toggle = "모달"이며 이것은 우리가 수행 할 로그인 모달을위한 것입니다 나중의 튜토리얼 이제부터 끝내야겠다 앞으로와 헤더 작품 태그를 삭제 그리고 나서 우리는 그것을 볼 것이고 당신은 당신이 볼만한 것을 볼 수 있습니다 네비게이션 바처럼 우리가 갈 다음 일은 링크 다 do는 우리의 index

php 파일로 가서 헤더를 저장하는 것을 잊지 마라 그러면 우리는 <div class = "container"> 이제 컨테이너가 확장되지 않습니다 container-flex가 이것을하는 반면 전체 페이지는 부트 스트랩 4의 특징이다 우리는 <div class = "jumbotron">에 추가 할 것입니다 우리 웹 사이트 이름과 h1을 h1에 추가하려면 건설 중이다

이제 우리는 그것을 보게 될 것입니다 거기 Jumbotron 그래서 지금 우리가 가서 우리 스타일을 열거야 CSS 파일 그리고 나서 우리는 앞으로 나아갈 것이고 단지 단어 몸체를 대괄호로여십시오 배경색을 검정색으로 변경하면됩니다 우리는 그것을 살펴볼 것입니다

그리고 이제 여러분은 점보트론을 다음으로 볼 수 있습니다 우리가 할 일은 우리가 놓을 내비게이션 막대 작업을 시작하는거야 거기에있는 우리 navi 클래스는 대괄호를 열고 우리는 목록 스타일 유형을 none으로 설정하면 알 수 있듯이이 목록에 다음 스타일이 표시됩니다 우리가 할 일은 여백을 0으로 설정하는 것입니다 패딩을 0으로 설정하면 패딩이 0으로 설정됩니다

그것들을 끝까지 움직일 것이고 모든 패딩을 말로 빼낼 것입니다 이제 오버 플로우를 숨김으로 설정하고 이것이 제어하는 ​​것은 무엇인가? 내용이 너무 커서 숨겨진 부분에 맞게 너무 커지면 어떻게 될까요? 오버플로가 잘리고 콘텐츠의 나머지 부분이 보이지 않게되며 변경됩니다 우리의 배경색이 회색으로 변하면 다음으로 할 일은 우리가 할 일입니다 우리의 nav 목록에서 작업하게 될 것입니다 그리고 우리는이 왼쪽을 떠 다니고 우리는 그 (것)들에게 1px 단단한 백색의 국경을주기 위하여려고하고 이제 우리가 할 다음 일은 우리가 제공 할 형식의 navliri입니다

그것의 국경 권리 없음 그리고 나서 우리는 1px solid white의 border-left를 다음 줄에 넣을 것입니다 우리가 할 일은 우리가 가고있는 스타일이나 목록 아이템 링크에 있다는 것입니다 그 (것)들에게 백색을 착색하기 위하여려고하고있는 구획을 전시하십시오 텍스트를 가운데에 맞춘 다음 패딩을 지정합니다 1em 1em의 왼쪽과 오른쪽에 1em이 될 것입니다 그리고 바닥은 1em이 될 것입니다

그리고 나서 우리는 텍스트 장식을 none으로 변경하려고합니다 그래서 당신이 갈 때 그 위에 올려 놓고 선을 긋지 않는 색을 바꾸지 않는다 그 다음에 우리는 앞으로 나아갈 것이고, 우리는 그것을 잘라서 붙여 넣을 것입니다 우리는 그것을 navliri로 바꿀거야 우리는 똑같이 남겨두고 이제는 펑키하게 보일 것입니다

지금은 그렇지 않습니다 우리가해야 할 일은 #flt-rt 우리가이 일을 할 때 우리는 그들을 바로 부유시킬거야 오, 이제 좋아 보인다 우리가 할 마지막 일은 앞으로 나아가고 우리의 점보트론을 스타일 짓는 것입니다 우리가 그것을 꺼낼 수 있도록 2시 방향으로 여백을 둡니다

navbars 엉덩이의 그때 우리는 그것에게 배경색을 회색으로 줄 것이다 그래서 우리는 몸과 별개로 말할 수 있습니다 그러면 텍스트를 다음과 같이 정렬 할 것입니다 센터는 단지보기 좋고 거기에서 볼 수 있습니다 내가 망 쳤어 navi의 경계를 경계 오른쪽으로 변경해야하고 그것은 맨 아래쪽과 왼쪽 테두리를 버리고 난 그냥 가고 싶다

내가 OCD이기 때문에 내 등록기와 로그인 링크를 전환하면된다고 생각합니다 그런 식으로 나아 보인다 이제 너는 그것을 볼 수있다 튜토리얼 2를 시청 해 주셔서 감사합니다 구독하는 것을 잊지 마세요 우리 웹 사이트에서 우리를 확인하십시오 wwwlearnwithskyler

com

Cr8Code – Creating Stick Navigation Bar with JQuery Part.1

안녕하세요 여러분, 오늘 우리는 헤더를 만들 것입니다 그리고 그것과 함께 끈적 거리는 탐색 바는 우리가 가고있는 누구나의 안에서 첫번째로 시작해도 우리 몸의 요구 조건을 정하다

페이지를 스크롤 할 수 있도록 높이를 300 뷰포트 높이로 설정하여 if 끈적 거리는 탐색 바가 이제 우리가 HTML 헤더를 만들려고 노력하고 있습니다 요소와 헤더 이미지 헤더를 시작해 보겠습니다 당신 색상 선택 도구에서 배경색을 선택하여 복사하고 붙여 넣습니다 당신 헤더 표시를 인라인 블록으로 설정해야합니다 이미지 마진을 최고의 가치로 만들기 위해 마진 상위를 재배치해야합니다

여백이 지나면 브라우저는 먼저 10 픽셀을 렌더링합니다 여백 다음 autovalue하고 모든 여백을 만들 것입니다 이제 자동으로 가자 네비게이션 요소를 만든 다음 ul 및 Li 요소를 만드는 탐색 모음 내부 그것들을 정리하고 스타일링하러 가자 다시 색상 선택 도구를 열어 색상을 얻습니다 우리는 마진과 패딩을 0으로 설정하려고합니다 자동으로 여백과 패딩이 생깁니다

숫자 나 점들이 나타날 것이므로 list-style은 none이어야합니다 그렇지 않은 경우 4 개가 있기 때문에 Li 폭을 25 %로 설정합니다 당신이 더 많거나 적다면 100을 당신의 일라이어스 수로 나눈 다음 그들에게 왼쪽에있는 것들은 수평으로 배열 할 수있게 해준다 요소와 스타일은 우리가 다른 색상을 얻기를 원한다는 호버 효과입니다 전환 효용으로 마우스를 가져갈 때 당신

How to Make Bar Chart in PDF | PHP FPDF Tutorial #6

PHP FPDF 튜토리얼 시리즈의 여섯 번째 장에 오신 것을 환영합니다 이 장에서는 PHP FPDF 라이브러리를 사용하여 pdf 문서에서 차트를 만드는 방법을 보여 드리려고합니다

이 장에서는 일차원 데이터 계열을 나타내는 막 대형 차트에 대해서만 다룹니다 이 장에서는 위치를 설정하고 pdf로 도형을 그린 방법을 배웁니다 이것은 우리가하려고하는 것을 미리 보여줍니다 먼저 차트 속성을 정의합니다 제가 부분별로 설명하겠습니다

이것은 차트 경계의 x 및 y 위치입니다 이것은 차트 경계의 차원입니다 이는 차트 경계와 차트 상자 사이의 패딩입니다 이는 차트 상자의 위치와 크기를 나타냅니다 차트 상자의 x 및 y 위치는 차트 위치 및 각각의 패딩에 의해 설정됩니다

차트 상자의 크기는 채우기로 뺀 차트의 경계 크기에서 결정됩니다 차트 데이터 시리즈는이 이미지에서 설명하는 구조로 2 차원 배열로 정의됩니다 dataMax 변수는 각 데이터를 루핑하고 비교하여 결정되는 데이터 시리즈에서 가장 높은 값을 포함합니다 dataStep은 세로 축 레이블의 간격을 정의하는 것입니다 먼저 경계를 보이게하기 위해 직사각형을 그려 봅시다

이렇게하려면이 이미지에서 설명한대로 FPDF Rect () 함수에 매개 변수를 사용하십시오 Output ()을 사용하여 pdf 파일을 출력하는 것을 잊지 마십시오 이제 선에서 시작하여 차트 축을 그려 보겠습니다 이 이미지에서 설명한대로 FPDF Line 함수를 사용하여 매개 변수가있는 선을 그립니다 데이터를 막대 높이로 스케일하는 스케일 인자가 필요합니다

저는이를 스케일 단위라고 부릅니다 이제 각 세로 축 레이블을 그려 보겠습니다 이제 수평축으로 계속하고 막대를 그립니다 상자 너비를 똑같이 데이터의 수로 나눌 필요가 있습니다 셀로 테스트 해 봅시다

이제 각 데이터 계열을 반복 해 보겠습니다 이제 막대를 그려 봅시다 마지막으로 축 캡션 레이블을 추가하십시오 이것으로이 장의 튜토리얼을 마칩니다 이 튜토리얼이 도움이된다면이 비디오를 좋아하십시오

튜토리얼 업데이트를 위해 내 채널을 구독하십시오 질문이 있거나 소스 코드가 필요한 경우, 코멘트 섹션에서 무엇이든 물어보십시오 다음에 보자

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로 변경합니다 사용자가 길 그리고 우리는 잘 가게된다

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