Bootstrap 4 Tutorial: Create Responsive Web Design With Bootstrap Grid System

귀하의 웹 사이트는 대형 장치, 매체 장치, 소형 장치 및 극히 작은 장치까지 모두 부트 스트랩 그리드 시스템 사용 그래서 우리가 실제로 이것으로 시작하기 전에 튜토리얼 내가 먼저 설명하고 싶다 이해해야 할 기초, 그리고 나서 우리는 암호

부트 스트랩에는 당신이 필요로하는 몇 가지 배우고 나서 당신은 할 수있을 것입니다 거의 모든 디자인을 만들 수 있습니다 장치의 크기 그래서, 이것이 우리의 행과 같은 우리의 웹 사이트는 이제 괜찮습니다 처음으로 필요한 부트 스트랩 만들려면 몇 가지 컨테이너이며 당신이 할 수있는 용기 안에 모든 행과 열을 넣는다

그 부트 스트랩은 우리가 당신이 입력해야하는 웹 사이트 컨테이너를 갖고 싶다면 걸릴 컨테이너 이 브라우저의 전체 너비 당신은 괜찮아요 컨테이너 유체를 사용하려고합니다 그리고 나서 당신이 어떤 고정 된 것을 가지고 싶다면 너비는 이렇게 좋아 이것은 귀하의 웹 사이트가 될 것입니다 당신은 오직 일단 우리가 무엇을 시작하면 컨테이너 이 코드를 작성하면 처음에는 이해해 주시길 바랍니다 이렇게 그리고 나서 당신이 가지고있는 다음 일은 부트 스트랩 그리드 시스템은 행입니다 좋아, 그럼이 줄은 괜찮아

그럼 나 여기 괜찮을거야 우리가 좋아 ro 좋아, 그 다음엔 우리가 컬럼이 있으니 우리가 가지고 있다고 해봅시다 여기에 세 개의 열이 있습니다 그러면 여기 우리가 원하는만큼 가질 수 있습니다

최대 12 개까지 열이 있으므로 이제 우리가 이것에 관해 생각한다면 우리는 할 수 있습니다 이해하기 위해서는 기본적으로 먼저 필요한 레이아웃을 만드십시오 그 안에 컨테이너를 정의하십시오 컨테이너를 정의 할 필요가있는 컨테이너 행을 작성한 다음 각 행의 내부에 넣어야합니다 이제는 열을 정의하십시오

해당 열은 최대 12 자까지 가능하며 if 너는 각 열을 12 이상 가지고있다 스태킹에 그냥 갈 것입니다 그러나 그것이 우리가 원한다면 지금은 문제입니다 그 3 개의 똑같은 빗을 만들려면 이것이 지금 4 4 4 일 것이라고 말할 것입니다 우리가 갖고 싶다면 합계 12입니다

그 둘은 6과 6이 될 것이고 그러면 당신은 지금 우리가 그 다섯 개의 기둥을 가지고 있어야했습니다 그것들을 동일하게 만들 수 있기 때문에 그것은 5이지만 우리가 할 수있는 것은 말할 수 있습니다 좋아,이게 2 같아 지길 바래 1이므로 이제는 총 5 개이지만 좋아, 다시 1이 될거야 이것은 6입니다

그러면 우리는 이것을 가질 수 있습니다 6 좋아, 이제 우리가 이걸 그릴 때 대칭처럼 보이지 않는다 숫자로 볼 수 있듯이 12 12 12 12 괜찮습니다 우리가 놓을 열의 콘텐츠와 이제 레이아웃이 유지됩니다 너 같은 요소에 기초해서 여기에 여기 넣어주세요

그래서 여기에 우리가 가질 수 있습니다 우리는 우리가 가질 수있는 작은 매우 작고 괜찮은 다음 여기에 당신은 그 번호를 지정할 필요가 있습니다 너는 듣고 싶다 그래서 우리가 이것을 6 개로 만들고 싶다면 우리는 이것을 만들려합니다 열 및 다음 크기에 따라 너는 작게 말하기를 원한다

네 번째 숫자는 괜찮습니다 알 필요가있어 이제 너에게 어떻게 보여줄지 코드를 쓰려면 지금 여기에 있습니다 PHP 폭풍과 우리가 제일 먼저하는 일 우리가 만들 것입니다

기본 HTML 문서 어쩌면 내가 제목을 그리드 시스템은 괜찮아 이제 우리는 부팅 라이브러리를 포함 시키십시오 getbootstrapcom 내가 다운로드하고 다음 여기에 우리는 여러 가지 옵션이 있습니다 소스 파일을 다운로드 할 수있다

링크에서 CD를 사용하거나 패키지 관리자가 너무 많습니다 우리가 사용할 수 있지만 우리의 나는 괜찮은 링크에서 CD를 사용할 것이다 나는 제목 바로 뒤에 올 것이다 그래서 지금 우리가 먼저 말하기 전에 우리가 먼저 필요합니다 하나의 컨테이너에 다음 행이 있어야합니다

처음부터 열 싶습니다 컨테이너 하나를 만들 수 있습니다 단지 용기 용기 또는 용기이어야한다 유체는 이제 우리는 단지 컨테이너를 사용합니다 차이점을 보여 드리겠습니다

조금 후에 우리는에 있어야합니다 적어도 하나의 행과이 행의 내부 우리는 단지 다른 것을 추가 할 수 있습니다 열이 지금은 단지 열이라고 말할 것입니다 내가 여기서 말하는 칼럼 1과이 열 2가됩니다 이제 우리 브라우저에 가서 보시면 우리가 가진 것은 우리가 가지고있는 것을 볼 수 있습니다

두 개의 기둥이 있지만 지금은 매우 그들의 크기를보기가 힘들어서 어쩌면 내가 약간 다른 것을 적용 할 것이다 처음에는 부트 스트랩 클래스가 필요하다 첫 번째 collum 배경은 어둡고 텍스트는 흰색을 말한 다음 우리가 배경을 말할 수있는 열 도구 정보 알았어, 이제 알았어 이제 알았어 우리는 두 개의 기둥이있는 것을 볼 수 있습니다

정확히 같은 크기이고 크기를 조정하면 항상 움직일 것입니다 우리가 여기 있기 때문에 그 크기를 유지하십시오 장치 유형을 정의하지 않았습니다 우리가 이것을 창조하고 우리는하지 않았다 우리가 말하고 싶다면 크기를 정의하십시오

이 크기는 4이고 이것은 하나가 될 것입니다 우리가 말했듯이 크기 8은 괜찮을거야 이제 우리가 새로 고침을하면 이 것은 현재보다 훨씬 큽니다 하나, 크기를 계속 유지하면 이 크기를 유지하지만 일은 우리가 정의 할 때 괜찮을 때 변화한다 우리가 만드는 장치의 유형 어쩌면 우리는 이것을 말할 수 있습니다

중간 장치 용으로 알았으니 보자 무슨 일이 일어날 것 그래서 매체를 위해 그것은 같은 크기이고 당신은 크기를 계속 유지할 수 있다는 것을 알 수 있습니다 어떤 점과 당신은 여기에서 알 수있다 우리가 간다면 768 픽셀 이후에 지금 붐이 일어난다 쌓아 올리면 이제 알 수 있습니다

769는 이것이고 우리가 조금 움직이면 조금만 가면 쌓아서 귀하의 웹 사이트가 당신이 창조하는 경우에 이렇게 낙관 될 것이다 지금 매체 장치를위한 모든 것 모바일 일 때 모든 것을 압축합니다 그 깡통은 그냥 이제 우리가 이것을 바꿔도 괜찮아 예를 들어 대형 장치에 훨씬 더 일찍 볼 수 있었을 때 우리는 지금이 큰 것을 좋아합니다 더 일찍 쌓기로 갈 것이므로 추측 992 알았어 여기 괜찮아

하나 둘 셋 좋아, 이제 우리가 가면 충분 해 스태킹 괜찮아, 이제 볼 수있어 그렇게 잘 어울릴 것입니다 당신이 이것을 볼 수 있도록 우리가 복제한다면 어쩌면 아마 3 번 괜찮아

이게 행 하나만 괜찮다고 말할거야 하나는 두 번째 행을 말하게 될 것입니다 하나는 3 번째 행이 될 것입니다 소형 장치의 경우 두 번째는 매체를위한 것입니다 세 번째 것은 큰 것입니다

이제 우리가 새로 고침을하면 지금 볼 수 있습니다 3 행 모두가 한 줄에 있지만 크기 조정을 시작하면 지금 볼 수 있습니다 그 후 992 그냥 행 3을 볼 수 있습니다 스태킹에 들어가고 이제 행 3 열과 열 2는 이제 하나의 구식입니다 우리가 크기를 768로 유지하면 지금 여기있어

Row 2가 스태킹 중임을 알 수 있습니다 행 1은 여전히 크기 그래서 만약 우리가 더 많은 크기를 조정하면 지금 모든 그들 중 한 명은 지금 거기에있는 다른 하나입니다 극도의 장치가 몇 개 더 있습니다 작고 매우 큽니다 당신이 정말로 드문 경우 시나리오 보통 때 때문에 그들을 사용하려고 너는 그것을 위해 무언가를 디자인한다

매우 큰 당신이 뭔가를 만들 때 작은 당신은 같은 것을 갖고 싶어 할 것입니다 레이아웃이 매우 작아서 두 가지 경우가 거의 없습니다 너는 여기에있는 것들을 사용하려고한다 다양한 순서에 따른 다양한 옵션 우리는 내용을 조작하려고합니다 오른쪽에서 왼쪽으로 옮기고 싶다

그리고 그런 것들이 나는 그런 것 같아요 이 튜토리얼의 전반적인 내용은 이것을 이해할 수있을 것입니다 당신이 부스터를 이해하기에 충분할만큼 그리드 시스템을 선택하고 원하는 경우 정말 깊이 잠수하고 더 많이 배웁니다 부트 스트랩에 대해서 내가 초대하고 싶다 너 내가 보여주는 내 코스를 방문해

부트 스트랩에 관한 모든 것 또한 나는 너에게 자바 스크립트를 가르치고있어 jQuery MySQL PHP 그리고 우리는 결국 전체 콘텐츠를 만들 예정입니다 관리 시스템 워드 프레스 그래서 당신이 그 과정에 갈 때 당신은 기본적으로 이해하고 모든 것을 창조하라 방문하고 싶으면 웹 사이트를 만드십시오 이 링크를 이용하십시오

너는이 비디오가 마음에 든다 친구에게 면도해라 물론 질문이 있거나 아무 것도 자유롭게 아래의 의견을 말씀 드리면 그들 모두에게 대답하십시오 돌보다

What is a grid system & responsive mobile & tablet design – Adobe Illustrator CC 2017 [10/45]

안녕하세요, 제 이름은 댄입니다 이 비디오에서 우리는 Illustrator를 사용할 것입니다

UI 및 웹 그래픽을 제작할 수 있습니다 내 채널에는 많은 무료 콘텐츠가 있습니다 구독 해주세요

알림을 받으려면이 구독 버튼 옆에있는 작은 종소리를 치십시오 더 많이 원하면 더 많이로드하십시오 bringyourownlaptopcom을 확인하거나 설명의 링크를 확인하십시오 안녕하세요,이 비디오에서 우리는 이야기 할 것입니다

그리드 시스템 및 반응 형 웹 디자인 그래서 사람들이 반응에 대해 이야기 할 때 그것이 의미하는 전부는 내가 사이트를 디자인 할 예정이다 내가 사용하는 다른 기기에 응답합니다

여기이 사이트를보고있는 경우 내 사이트, bringyourownlaptopcom 데스크톱에, 그것은 다음과 같습니다

그러나 그것이 모바일 크기로 내려갈 때, 이런 식으로 당신은 사이트 변경, 그들은 최고의 화면 부동산을 사용하는 것을 볼 수 있습니다 또는이보기의 화면 크기 이 사람들은 커다란 변화라는 것을 알 수 있습니다 이것들은 나란히 있습니다 그러나 데스크톱에있을 때는 연속 2 개가 아닌 연속 4 개가 있습니다 그리고 모바일로 내려 가면 다시 바뀝니다

큰 변화는 모바일에서 내가 그 큰 이미지를 상단에 결정했습니다 저기있는 웃고있는 잘 생긴 남자가 사라진다 그는 모바일에서 유용하지 않습니다

화면이 많이 떨어졌습니다 그래서 저는 기본적인 것들을 이해하고 있습니다 여기서 미리보기 이미지 만 사용하면됩니다 그래서 그들은 하나의 열에 서로의 위에 겹쳐서 하지만 태블릿에서는 2로 설정되고, 바탕 화면에서는 4로 설정됩니다 그래서 그 조정, 화면 크기의 최고의 사용 반응 형 웹 디자인 (Responsive Web Design)입니다 Illustrator를 사용할 때 우리가하는 일은 그 세 가지 견해를 디자인 할 때입니다 – 그래서 스스로 또는 개발자가 빌드를 시작하면

그들은 그들이 크기를 조정하는 데 필요한 것을 알고 또는 웹 사이트가 다른 화면 크기처럼 보이게 할 수 있습니다 이제보아야 할 다음 것은 좋은 시스템입니다 이것이 사이트를 깨뜨리는 가장 일반적인 방법이기 때문입니다 무슨 일이 일어날 지, 밑에있는 12 개의 열 그리드가 있습니다 모든 웹 페이지에서 실행됩니다 그리고 그게 당신이 콘텐츠를 나누는 방법입니다 무슨 일이 일어나는가는 인쇄물이나 잡지 디자인에 있다면 매우 유사합니다 신문에 12 열 그리드가 익숙해 져서

다양한 페이지에서 일관성을 유지하는 데 도움이됩니다 웹 디자인에서도 마찬가지입니다 그것을 보는 가장 쉬운 방법은 최종 버전입니다

이것이 우리의 최종 디자인입니다 데스크톱 버전, 태블릿 버전 및 모바일이 있습니다 그리고 무슨 일이 일어나는가는 이것을 보아라 내가 가지고있는 그리드를 켜면 당신은 내가 데스크톱을 나눈 것을 볼 수 있습니다 심지어이 12 개의 기둥을 명심해야합니다

나는이 칼럼을 통해 절반을 가지지 않을 것이다 모두 12에 이릅니다 그래서이 남자는 여기에 4 명이 있습니다

그들 모두는 12를 더한다 여기 상단에 선이 있다는 것을 의미합니다 실제로 12 개에 걸쳐 있습니다

괜찮습니다 여기이 사람들은 조금 조정해야합니다 내 디자인은이 두 열을 여기에 걸쳐 있습니다 그들을 좀 더 잘 조율 해 줘야 겠어 그리고이 사람은 여기

그는 여기에 아무것도 없기 때문에 모든 것을 포괄합니다 이제 우리가 한 일을 살펴보고 태블릿을 다시 디자인 해 봅시다 이제 우리가하는 일은 12 열을 넣을 수 있습니다

하지만이 열 12 개를 여기로 눌러 주면 상상할 수 있습니다 비록 그들이 기술적으로 모두 거기에 있어도 수 백 줄의 디자인으로 약간 더 어려워집니다

모바일에 도달하면 악화되는 것을 알 수 있습니까? 그래서 내가 한 일을 볼 수 있고, 디자이너로서 당신이 할 일은 – 나는 12 모두를 필요로하지 않는다 그런 종류의 최종 조정은 나를 위해 너무 많이 필요하다 여러분은 그것을 좋아할 것입니다 여러분은 그것을 12 열로 유지할 수 있습니다, 저는 여기에 6을 넣었습니다 그리고 나는 그들을 균등하게 나눠 썼다

이 하나는 3에 걸쳐 있으며 그 중 하나는 3에 걸쳐 있습니다 여전히 12로 나눌 수 있습니다 범위를 볼 수 있습니다 그것의 절반은 6이 될 것이고 그것은 6이 될 것입니다 그래서 우리는 여전히 12 열 그리드를 사용하고 있습니다 그러나 시각적으로 볼 때 너무 많은 것을 보는 것은 너무 어렵습니다

우리가 여기에서 결정한 것은 가이드를 끄겠습니까 그것이 태블릿 기기에있을 때처럼 보이기를 원하는 방식입니다 모바일로 내려 가면 다시 변경하고 싶습니다 우리는 이것을 꽤 바꿨습니다 내비게이션이 여기로 바뀌 었어 우리는 전체적으로 꽤 많이 사용했습니다 우리는 전체 너비를 사용했습니다 전체 12 열입니다

가이드를 다시 켜 겠어 모바일에서 작업 할 때 종종 2 열만 처리합니다 그쪽에는 6 명이 있고 그쪽에는 6 명이 있습니다 난 그냥 2를 사용하여 좀 더 쉽게 만들 수 있습니다 거기에 모두 12 개를 넣을 수 있습니다

그것이 그리드 시스템이며, 그것이 어떻게 반대편에있는 웹 디자이너가 콘텐츠를 나눕니다 중간을 나눌 수 없기 때문에 13을 할 수 없습니다

홀수이기 때문에 숫자도 대부분 12 열입니다 그래서 다음 비디오에서 살펴 봅시다

이 열을 만들어서 디자인 할 수있는 방법 그게 얼마나 좋은가요? 더 원한다면 bringyourownlaptopcom을 확인하십시오

또는 설명의 링크를 확인하십시오

The Grid | AI Websites That Design Themselves

귀하의 웹 사이트는 귀하의 인터넷 코너입니다 집에 전화 할 수있는 곳

당신을 위해 비즈니스, 포트폴리오, 취미 당신이 원하는 것을 말하기위한 자신 만의 공간 웹 사이트를 만드는 방법은 많습니다 그러나 템플릿은 당신을위한 것이 아닙니다 페이스 북 페이지는 당신을위한 것이 아닙니다

귀하의 사이트는 귀하가 누구인지를 반영해야합니다 그리고 그 일을 잘해야합니다 물론, 당신은 자신을 만들 수 있습니다 그러나 설계, 개발, 드래그 및 드롭 – 이러한 모두 풀 타임 직업입니다 네가 걱정하는 것을 할 수 있다면 더 좋지 않을까? 그 다른 모든 것들을 단지

일어날 수 있을까요? 웹 사이트가 방금 만든다면 더 좋지 않겠습니까? 이제 그들은 그렇게합니다 그것은 그리드라고 불립니다 템플릿이 없습니다

코딩이 없습니다 벽으로 둘러싸인 정원 없음 The Grid에게 원하는대로 인공 지능을 사용하여 콘텐츠에 맞는 맞춤형 홈을 만들 수 있습니다 전문가가 보이기 위해 사이트가 필요하십니까? 끝난 아니면 좀 더 캐주얼 해 보일까? 쉬운

그리드에게 당신이 원하는 것을 알려주십시오 더 많은 고객, 더 많은 추종자, 매출 증가? 선택을하면 사이트가 그 목적에 맞게 최적화됩니다 더 많은 콘텐츠가 필요하십니까? 한 번의 클릭으로 웹 어디에서나 무엇이든 캡처하고 게시 할 수 있습니다 그리고 여기에 더 많은 것을 추가함에 따라 귀하의 사이트가 진화 할 것입니다 레이아웃은 다음에 맞게 조정됩니다

귀하의 콘텐츠 최대 효과를 위해 이미지가 잘리고 색상이 보정됩니다 디자인은 다음으로 조정됩니다 모든 브라우저와 모든 기기에서 잘 어울립니다 자동으로

그것만큼 쉽습니다 사실 그것은 엄청나게 복잡합니다 그러나 그리드는 그렇게 생각합니다 당신은 필요가 없습니다 그리고 우리 각자가 우리 자신 만의 웹 코너, 우리 고유의 공간을 가지고있을 때

그것이 더 아름다운 인터넷의 시작입니다 내용은 힘입니다 The Grid에서 컨텐츠를 강화하십시오