부트 스트랩 기본

Question

부트 스트랩에 익숙하지 않으며이 기본 상황과 매우 혼동되어 그리드 시스템을 이해하지 않고 앞으로 나아갈 수 없었습니다.

질문 1 : 특정 장치의 해당 클래스 접두사를 다른 장치에 알리는 방법은 무엇입니까? 예 : col-md-6 작은 장치에 표시하려면 동등한 항목, col-sm은 무엇이 될까요? -X 또는 col-xs-X? 나는 그리드 시스템과 정말로 혼란 스럽다.

질문 2 : 부트 스트랩 튜토리얼을 보았습니다. 그리고 나는 왜 그가 col-sm-10을 가게에 놓았는지 혼란 스럽습니다. 배너는 960 그리드에서 6 개의 칼럼 만 사용합니다. 대신 col-sm-6이 아닌 이유는 무엇입니까? 첨부 된 이미지를 참조하십시오. 내가 버튼 영역

<div class="container top-description-app"> 
     <div class="row"> 
      <div class="col-sm-6 top-description-text"> 
       <h1>Hello</h1> 
       <h3>We take mobile photography to a brand new level.</h3> 
       <p>With our free app you can take amazing photos straigh your phone.</p> 
       <div class="col-sm-10 stores-banners"> 
        <a href="#" class="btn btn-success">Get the free app</a> 
        </br> 
        <a href="#"><img src="img/apple-banner.png" alt="App Store"></a> 
        <a href="#"><img src="img/google-banner.png" alt="Google Store"></a> 
       </div> 
      </div> 
      <div class="col-sm-6 top-iphone-wrapper">     
       <img src="img/iphone-header.png" alt="iPhone app"> 
      </div> 
     </div> 
    </div> 

말하는 겁니다 이미지를 다음에서

는 guyx 나를 도울 수 있기를 바랍니다. 미리 감사드립니다.

Answer 1

COL-MD-6는 무엇 동등한 동등한가 없습니다

는, 당신이 그런 식으로 보지한다는 의미는, 각각의 부트 스트랩 그리드 (12)와 동일한 열으로 화면을 나눕니다. 우리는 lg 또는 대용량, md 또는 매체, sm 또는 작음 및 xs 또는 초소형이라고하는 부트 스트랩의 4 가지 화면 크기를 가지고 있습니다. 열 정의는 해당 화면 크기에서 사용자에게 표시하려는 내용을 기반으로해야합니다.

더 나은 개념을 이해하려면 this example을 살펴보십시오. 화면의 크기를 조정하여 실제 열을 확인하십시오. 어떻게 그렇게 부트 스트랩 그리드를 사용합니까

당신이 폭 1200px으로 화면을 가지고 있고 싶어 폭 500px과 열이 상상 :

그리고 두 번째 질문에 대한

, 내가 예와 함께 설명하자 체계? 상자 (화면) 크기를 1000px으로 가져 와서 2로 나누어야합니다. 어떻게 그걸합니까?

<div class="col-lg-10"> 
    <div class="row"> 
     <div class="col-lg-6"></div> 
     <div class="col-lg-6"></div> 
    </div> 
</div> 

그것은 간단한 :)

Answer 2

1. 그것은 당신이 당신의 웹 사이트가 다양한 화면 크기에처럼 보이게하는 방법에 달려 있다는 것입니다.

기본적으로, xs - 모바일, sm - 태블릿, md - 데스크탑, lg - 대형 데스크탑.

예 :

p { 
 
    height: 200px; 
 
    margin-bottom: 20px; 
 
    background: #ccc; 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6 col-md-12"><p></p></div> 
 
    <div class="col-sm-6 col-md-12"><p></p></div> 
 
    </div> 
 
</div>

이 코드는 당신이 의미 : tabletes (SM) 및 데스크톱 (MD)에 1 열에 모바일 (XS) 1 열, 2 열 및 대형 데스크탑 (lg).

2. 입력 한이 코드는 실제로 올바르지 않습니다.col- 클래스를 다른 col- 클래스 안에 중첩하면 다른 행을 만들어야합니다.

   <div class="container top-description-app"> 
       <div class="row"> 
       <div class="col-sm-6 top-description-text"> 
        <h1>Hello</h1> 
        <h3>We take mobile photography to a brand new level.</h3> 
        <p>With our free app you can take amazing photos straigh your phone.</p> 
        <div class="row"> 
        <div class="col-sm-10 stores-banners"> 
         <a href="#" class="btn btn-success">Get the free app</a> 
         </br> 
         <a href="#"><img src="img/apple-banner.png" alt="App Store"></a> 
         <a href="#"><img src="img/google-banner.png" alt="Google Store"></a> 
        </div> 
        </div> 
       </div> 
       <div class="col-sm-6 top-iphone-wrapper"> 
        <img src="img/iphone-header.png" alt="iPhone app"> 
       </div> 
       </div> 
   </div> 
   

는 그리고이 코드는이 col-sm-6 클래스 내부 col-sm-10있을 것이라는 점을 의미한다 (그래서 10 (12)의 열이 col-sm-6 열을 차지).

예 :

p { 
 
    display: block; 
 
    margin-bottom: 20px; 
 
    background: #ccc; 
 
    height: 150px; 
 
} 
 
span { 
 
    background: #333; 
 
    color: #fff; 
 
    display: block; 
 
    height: 100px; 
 
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <p>Column</p> 
 
     <div class="row"> 
 
     <div class="col-sm-6"> 
 
      <span>Column in another column</span> 
 
     </div> 
 
     <div class="col-sm-6"> 
 
      <span>Column in another column</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     <p>Column</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

부트 스트랩은 12 (12)에 의해 그리드 시스템을 사용하여, 당신은 그리드 내에서 그리드를 가지고있다.

위 예제에서 화면은 sm 브레이크 포인트 (기본값은 약 768px이지만 사용자 정의 할 수 있음)보다 큰 모든 장치에서 두 개의 col-sm-6으로 분할되고 sm보다 작은 장치 중단 점.

는 또한 10/12 반 화면의 폭 (또는 반 부모 인 col-sm-6)이다 컨테이너를 만드는 INSIDE the col-sm-6 요소 인 col-sm-10 요소에 대해 물었다.

<div class="row">에 col-sm-10을 입력하고 비어있는 <div class="col-sm-2"></div>을 추가하여 행을 완성했습니다. 이것은 sm보다 작은 화면의 경우 전체 공간을 차지하고 sm보다 큰 화면은 사용 가능한 공간의 10 분의 12를 차지합니다 (이 경우 중첩 된 요소로 인해 화면의 절반 인 경우). 당신은 항상 확인하고 싶었 경우 위의 텍스트는 다음과 같이

확인하는 버튼은 매우 넓은 않았다 : 당신이 원하는 경우 버튼의 오른쪽 가장자리가에서 설정해야합니다, 당신은 결코 말하지 않는다, col-xs-10 같은 col-sm-10 및 col-sm-2하지 않습니다 수 화면 크기에 관계없이이 div를 쌓으십시오.