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