Twitter 부트 스트랩을 기반으로 반응 형 디자인의 유동 또는 고정 그리드 시스템

트위터 부트 스트랩 그리드 의 다양한 옵션 과 이들이 어떻게 상호 작용 하는지 혼란 스럽 습니다.

먼저 일반 고정 container또는을 가질 수 있습니다 container-fluid.

그런 다음 일반 row행이나 유체 행 중 하나를 포함 할 수 있습니다 row-fluid. 즉, 유체 행이있는 고정 컨테이너 또는 고정 유체 행이있는 컨테이너 유체를 가질 수 있습니까?

그런 다음 '응답 성'미디어 쿼리를 포함하거나 포함하지 않을 수 있습니다.

이러한 것들이 어떻게 상호 작용하는지 혼란스러워지고 있습니다. 그러나 하나의 명백한 예부터 시작합시다.

에 예제 페이지 자신, 그 둘의 예로 제시 무슨 거기에 고정 그리드 와 유체 그리드

그러나 브라우저의 예제 페이지에서는 두 그리드가 동일하게 동작합니다. 아마도 예제 페이지가 선택적 반응 형 미디어 쿼리를 사용하기 때문일까요? 에서 모두 내가 점차적으로 브라우저 창을 축소하기 시작하면 그리드 예, 그리드 요소는 할 수 없습니다 점차 좁아 - 특정 (반응) 경계 폭에 도달하면, 그들은 더 경계 폭에 다시 작은 크기로 스냅합니다. 그러나 일반적인 '고정'예와 '유체'예는 모두 정확히 동일하게 작동합니다. 그렇다면 차이점은 무엇입니까?

고정 너비와 유체 너비를 결정할 때는 전체 페이지를 고려해야합니다. 일반적으로 둘 중 하나를 선택하려고합니다. 귀하의 질문에 나열된 예는 실제로 동일한 고정 너비 페이지에 있습니다. 즉, 스캐 폴딩 페이지는 고정 너비 레이아웃을 사용하고 있습니다. 스캐 폴딩 페이지 의 고정 그리드 및 유체 그리드 는 예제가 아니라 고정 및 유체 너비 레이아웃을 구현하기위한 문서입니다.

적절한 고정 너비 예제는 여기에 있습니다 . 적절한 유체 폭 예는 여기에 있습니다 .

고정 너비 예제를 관찰 할 때 브라우저 너비가 960px보다 큰 경우 컨텐츠 크기가 변경되지 않아야합니다. 이것은 페이지의 최대 (고정) 너비입니다. 고정 너비 디자인의 미디어 쿼리는 특정 스타일의 최소 너비를 지정합니다. 브라우저 창을 축소하면 레이아웃이 다른 크기로 바뀌는 것을 확인할 수 있습니다.

반대로 유동 너비 레이아웃은 브라우저 너비에 상관없이 항상 브라우저 창에 맞게 확장됩니다. 미디어 쿼리는 스타일이 변경되는시기를 나타내지 만 컨테이너 너비는 항상 고정 된 픽셀 수가 아니라 브라우저 창의 백분율입니다.

'응답 성'미디어 쿼리가 모두 준비되었습니다. 페이지에 고정 너비 또는 유동 너비 레이아웃을 사용할지 결정하기 만하면됩니다.

이전에는 부트 스트랩 2에서 row-fluid유체 컨테이너 row내부와 고정 컨테이너 내부 를 사용해야했습니다 . 부트 스트랩 3의 도입으로 row-fluid제거되지 않았다 더 이상 할 사용 .

편집 : 의견에 따라 일부 jsFiddles 는 다음을 수행합니다.

• 유동적 인 비 응답 레이아웃 ,
• 유동적 인 반응 형 레이아웃 ,
• 고정 무응답 레이아웃 ,
• 반응 형 레이아웃 수정 .

이 바이올린은 순수한 CSS 미디어 쿼리를 기반으로 완전히 부트 스트랩이 없으므로 트위터 부트 스트랩을 사용하지 않고 유사한 솔루션을 만들려는 사람에게 좋은 출발점이됩니다.

흥미로운 토론. 나도이 질문을하고 있었다. 유동과 고정의 주요 차이점은 고정 레이아웃이 웹 사이트의 전체 레이아웃 (뷰포트) 측면에서 고정 너비를 갖는다는 것입니다. 너비가 960px 인 뷰포트가있는 경우 각 열의 고정 너비는 변하지 않습니다.

유동적 레이아웃은 다르게 동작합니다. 기본 레이아웃의 너비를 100 % 너비로 설정했다고 가정하십시오. 이제 각 열은 브라우저의 크기가 조정될 때 상대 크기 (예 : 25 %) 및 줄무늬 만 계산됩니다. 따라서 레이아웃 목적에 따라 레이아웃 작동 방식을 선택할 수 있습니다.

다음은 fluid와 flex에 대한 좋은 기사 입니다.

출처-http: //coding.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

찬성

• 고정 너비 레이아웃은 디자인 측면에서 훨씬 사용하기 쉽고 사용자 정의하기 쉽습니다.
• 너비는 모든 브라우저에서 동일하므로 이미지, 양식, 비디오 및 기타 너비가 고정 된 컨텐츠의 번거 로움이 줄어 듭니다.
• 모든 브라우저에서 지원하지 않는 최소 너비 또는 최대 너비가 필요하지 않습니다.
• 웹 사이트가 800x600의 가장 작은 화면 해상도와 호환되도록 디자인 되었더라도 내용을 쉽게 읽을 수있을 정도로 더 큰 해상도로 충분히 넓습니다.

단점

• 고정 너비 레이아웃은 더 큰 화면 해상도를 가진 사용자에게 과도한 공백을 만들어서“신성한 비율”,“3의 규칙”, 전체 균형 및 기타 디자인 원칙을 어지럽 힐 수 있습니다.
• 작은 화면 해상도에서는 고정 레이아웃의 너비에 따라 가로 스크롤 막대가 필요할 수 있습니다.
• 더 높은 해상도의 이미지를 수용하려면 매끄러운 질감, 패턴 및 이미지 연속성이 필요합니다.
• 고정 너비 레이아웃은 일반적으로 유용성과 관련하여 전체 점수가 낮습니다.

부트 스트랩 3의 유체 레이아웃

Boostrap 2와 달리 Bootstrap 3에는 유체 컨테이너를 만들기위한 컨테이너 유체 믹스 인이 없습니다. 컨테이너는 고정 너비 반응 형 그리드 레이아웃입니다. 큰 화면에서 웹 페이지 내용의 양쪽에 과도한 공백이 있습니다.

container-fluid Bootstrap 3.1에서 다시 추가되었습니다.

유동 격자 레이아웃은 모든 화면 너비를 사용하며 큰 화면에서 더 잘 작동합니다. Bootstrap 3 믹스 인을 사용하여 유동 격자 레이아웃을 쉽게 만들 수 있습니다. 다음 줄은 유동적 인 반응 형 그리드 레이아웃을 만듭니다.

. 컨테이너 고정;

컨테이너 고정 믹스 인은 컨텐츠를 화면 중앙으로 설정하고 패딩을 추가합니다. 고정 된 페이지 너비를 지정하지 않습니다.

또 다른 접근법은 Eric Flowers의 CSS 스타일 을 사용하는 것 입니다

.my-fluid-container {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

- 당신이 사용할 수 https://github.com/chanakyachatterjee/JSLightGrid ..JSLightGrid을. 보라 .. 나는 이것이 매우 유용하다는 것을 알았다. 좋은 성능, 매우 가벼운 무게, 모든 중요한 브라우저 친화적이고 유동적이므로 그리드를위한 부트 스트랩이 실제로 필요하지 않습니다.