twitter bootstrap - 스크롤 - 부트 스트랩에서 레이블 크기를 설정하는 방법



부트스트랩 스크롤 (2)

Bootstrap의 현재 버전 인 Bootstrap 3에서는 레이블 스타일이 서로 다른 별도의 클래스가 없습니다.

http://getbootstrap.com/components/

그러나 그런 식으로 부트 스트랩 클래스를 사용자 정의 할 수 있습니다. 귀하의 CSS 파일

.lb-sm {
  font-size: 12px;
}

.lb-md {
  font-size: 16px;
}

.lb-lg {
  font-size: 20px;
}

또는 머리글 태그를 사용하여 크기를 변경할 수 있습니다. 예를 들어, 중간 크기의 레이블과 작은 크기의 레이블이 있습니다.

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<h3>Example heading <span class="label label-default">New</span></h3>
<h6>Example heading <span class="label label-default">New</span></h6>

향후 부트 스트랩 버전에서 레이블에 크기 클래스를 추가 할 수 있습니다.

레이블 크기를 화면 크기와 동일하게 설정하고 싶습니다.

큰 화면 대형 레이블, 작은 화면 작은 레이블 용.


Answer #1

부트 스트랩 레이블 (또는 실제로는 무엇이든)을 만들기 위해 화면 크기에 따라 크기를 조정하려면 2 가지 작업을 수행해야합니다.

  • 디스플레이 크기 범위마다 미디어 쿼리를 사용하여 CSS를 조정하십시오.
  • 부트 스트랩에 의해 설정된 CSS 크기를 재정의하십시오. 이렇게하려면 CSS 규칙을 Bootstrap의 규칙보다 더 구체적으로 지정하십시오. 기본적으로 부트 스트랩은 .label { font-size: 75% } 합니다. 따라서 CSS 규칙의 추가 선택기를 사용하면 더 구체적으로 지정할 수 있습니다.

다음은 Bootstrap의 기본 4 크기를 사용하여 사용자가 원하는 것을 달성하는 CSS 목록의 예입니다.

@media (max-width: 767) {
    /* your custom css class on a parent will increase specificity */
    /* so this rule will override Bootstrap's font size setting */
    .autosized .label { font-size: 14px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .autosized .label { font-size: 16px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .autosized .label { font-size: 18px; }
}

@media (min-width: 1200px) {
    .autosized .label { font-size: 20px; }
}

다음은 HTML에서 사용되는 방법입니다.

<!-- any ancestor could be set to autosized -->
<div class="autosized">
    ...
        ...
            <span class="label label-primary">Label 1</span>
</div>




size