반응 형 레이아웃에서 요소를 숨기시겠습니까?

lottoking 2020. 3. 19. 08:28

반응 형 레이아웃에서 요소를 숨기시겠습니까?

부트 스트랩을 살펴보면 더 작은 화면의 메뉴 막대 항목 축소를 지원하는 것처럼 보입니다. 페이지의 다른 항목과 비슷한 것이 있습니까?

예를 들어, 나는 떠 다니는 네비게이션 필과 함께 있습니다. 작은 화면에서 문제가 발생합니다. 적어도 비슷한 클릭 투 쇼 추가 드롭 다운에 넣고 싶습니다.

기존 부트 스트랩 프레임 워크 내에서 가능합니까?

부트 스트랩에 새로운 보이는 클래스 추가

초소형 휴대 전화 (<768px)(Class names : .visible-xs-block, hidden-xs)

소형 장치 태블릿 (≥768px)(Class names : .visible-sm-block, hidden-sm)

중형 장치 데스크톱 (≥992px)(Class names : .visible-md-block, hidden-md)

대형 장치 데스크톱 (≥1200px)(Class names : .visible-lg-block, hidden-lg)

자세한 정보 : http://getbootstrap.com/css/#responsive-utilities

아래는 v3.2.0부터 더 이상 사용되지 않습니다.

초소형 휴대 전화 (<768px) (Class names : .visible-xs, hidden-xs)

소형 장치 태블릿 (≥768px) (Class names : .visible-sm, hidden-sm)

중형 장치 데스크톱 (≥992px) (Class names : .visible-md, hidden-md)

대형 장치 데스크톱 (≥1200px) (Class names : .visible-lg, hidden-lg)

훨씬 더 오래된 부트 스트랩

.hidden-phone, .hidden-tablet 등은 지원되지 않거나 사용되지 않습니다.

최신 정보:

부트 스트랩 4에는 두 가지 유형의 클래스가 있습니다.

hidden-*-up뷰포트가 지정된 중지 점 또는 넓은 일 때 요소를 숨길 수있다.
hidden-*-down 뷰포트가 지정된 중단 점 이하일 때 요소를 숨 깁니다.

또한 새로운 xl뷰포트는 너비가 1200px 이상인 장치에 추가됩니다. 자세한 내용은 여기를 클릭하십시오 .

부트 스트랩 4 베타 답변 :

d-block d-md-none중형, 초대형 및 초대형 장치 에 숨길 수 있습니다.

d-none d-md-block에 작은 초소형에 숨기기 장치.

로 교체 d-*-block하여 인라인 할 수도 있습니다.d-*-inline-block

기존 답변 : Bootstrap 4 Alpha

클래스 .hidden-*-up를 사용하여 주어진 크기와 더 큰 장치에서 숨길 수 있습니다

.hidden-md-up중형, 초대형 및 초대형 장치 에 숨길 수 있습니다.
.hidden-*-down주어진 크기와 더 작은 장치에서 숨기기도 마찬가지입니다.

.hidden-md-down중소형 및 초소형 장치 에 숨기려면
visible- *는 더 이상 부트 스트랩 4에서 옵션이 아닙니다.
중간 크기의 장치에만 표시하려면 다음 두 가지를 결합하면됩니다.

hidden-sm-down 과 hidden-xl-up

유효한 크기는 다음과 같습니다.

xs 세로 모드의 전화기 (<34em)
sm 가로 모드의 전화기 (≥34em)
md 태블릿 용 (≥48em)

lg 데스크탑 용 (≥62em)
xl 데스크탑 용 (≥75em)

이것은 부트 스트랩 4, 알파 5 (2017 년 1 월)입니다. 자세한 내용은 여기 : http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Bootstrap 4.3.x : https://getbootstrap.com/docs/4.3/utilities/display/

부트 스트랩 4.x 답변

hidden-* 수업은 Bootstrap 4 베타에서 제거됩니다.

중간 이상으로 표시하려면 다음 d-*과 같은 클래스를 사용하십시오 .

<div class="d-none d-md-block">This will show in medium and up</div>

작고 아래로만 표시하려면 다음을 사용하십시오.

<div class="d-block d-md-none"> This will show only in below medium form factors</div>

화면 크기 및 클래스 차트

| Screen Size        | Class                          |
|--------------------|--------------------------------|
| Hidden on all      | .d-none                        |
| Hidden only on xs  | .d-none .d-sm-block            |
| Hidden only on sm  | .d-sm-none .d-md-block         |
| Hidden only on md  | .d-md-none .d-lg-block         |
| Hidden only on lg  | .d-lg-none .d-xl-block         |
| Hidden only on xl  | .d-xl-none                     |
| Visible on all     | .d-block                       |
| Visible only on xs | .d-block .d-sm-none            |
| Visible only on sm | .d-none .d-sm-block .d-md-none |
| Visible only on md | .d-none .d-md-block .d-lg-none |
| Visible only on lg | .d-none .d-lg-block .d-xl-none |
| Visible only on xl | .d-none .d-xl-block            |

명시 적 .visible-*클래스를 사용하는 대신 해당 화면 크기에서 요소를 숨기지 않고 요소를 표시합니다. 한 .d-*-none클래스를 하나의 클래스와 결합 .d-*-block하여 주어진 화면 크기 간격에서만 요소를 표시 할 수 있습니다 (예 : .d-none.d-md-block.d-xl-none중간 및 큰 장치에서만 요소를 표시).

선적 서류 비치

모든 모듈에 대해 이러한 모듈 클래스 접미사를 입력하면 표시되거나 숨길 위치를 더 잘 제어 할 수 있습니다.

.visible-phone  
.visible-tablet     
.visible-desktop    
.hidden-phone   
.hidden-tablet  
.hidden-desktop

http://twitter.github.com/bootstrap/scaffolding.html 맨 아래로 스크롤

여기에 추가 할 몇 가지 설명이 있습니다.

1) 표시된 목록 (가시 전화 번호, 표시 태블릿 등)은 Bootstrap 3에서 더 이상 사용되지 않습니다. 새로운 값은 다음과 같습니다.

visible-xs- *
visible-sm- *
visible-md- *
visible-lg- *
숨겨진 xs- *
숨겨진 SM- *
숨겨진 -md- *
숨겨진 LG- *

별표는 각각에 대해 다음과 같이 번역됩니다 (아래에 visible-xs- * 만 표시됨).

보이는 xs 블록
visible-xs-inline
보이는 xs 인라인 블록

2)이 클래스를 사용할 때 앞에 답변을 혼동하여 마침표를 추가하지 마십시오.

예를 들면 다음과 같습니다.

<div class="visible-md-block col-md-6 text-right text-muted">
   <h5>Copyright &copy; 2014 Jazimov</h5>
</div>

3) visible- * 및 hidden-* (예 : visible-xs 및 hidden-xs)을 사용할 수 있지만 Bootstrap 3.2.0에서는 더 이상 사용되지 않습니다.

자세한 내용과 최신 사양을 보려면 여기를 방문하여 "visible"을 검색하십시오. http://getbootstrap.com/css/

모든 hidden-*-up, hidden-*나는 자수성가 추가 해요, 그래서 클래스는, 나를 위해 작동하지 않는 hidden이전 클래스 visible-*(현재 부트 스트랩 버전 작동). 한 화면에만 div를 표시하고 다른 모든 화면에는 숨겨야하는 경우 매우 유용합니다.

CSS :

.hidden {display:none;}

HTML :

<div class="col-xs-12 hidden visible-xs visible-sm">
   <img src="photo.png" style="width:100%">
</div>

Bootstrap 4.0 베타의 경우 (그리고 최종적으로 유지 될 것이라고 가정합니다) 숨겨진 클래스가 제거되었다는 점에 유의하십시오.

문서를 참조하십시오 : https://getbootstrap.com/docs/4.0/utilities/display/

모바일에서 콘텐츠를 숨기고 더 큰 장치에 표시하려면 다음 클래스를 사용해야합니다.

d-none d-sm-block

첫 번째 클래스 세트는 모든 장치에 표시되지 않으며 두 번째 클래스는 장치 "sm"에 대해 표시합니다 (다른 장치에 표시하려는 경우 sm 대신 md, lg 등을 사용할 수 있음).

마이그레이션하기 전에 이에 대해 읽어보십시오.

https://getbootstrap.com/docs/4.0/migration/#responsive-utilities

boostrap 4.1에서 (Bootstrap 문서에서 전체 테이블 코드를 복사했기 때문에 코드 조각 실행) :

.fixed_headers {
  width: 750px;
  table-layout: fixed;
  border-collapse: collapse;
}
.fixed_headers th {
  text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
  padding: 5px;
  text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
  min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
  min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
  width: 350px;
}
.fixed_headers thead {
  background-color: #333;
  color: #FDFDFD;
}
.fixed_headers thead tr {
  display: block;
  position: relative;
}
.fixed_headers tbody {
  display: block;
  overflow: auto;
  width: 100%;
  height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
  background-color: #DDD;
}
.old_ie_wrapper {
  height: 300px;
  width: 750px;
  overflow-x: hidden;
  overflow-y: auto;
}
.old_ie_wrapper tbody {
  height: auto;
}

<table class="fixed_headers">
  <thead>
    <tr>
      <th>Screen Size</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Hidden on all</td>
      <td><code class="highlighter-rouge">.d-none</code></td>
    </tr>
    <tr>
      <td>Hidden only on xs</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on sm</td>
      <td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on md</td>
      <td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on lg</td>
      <td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
    </tr>
    <tr>
      <td>Hidden only on xl</td>
      <td><code class="highlighter-rouge">.d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible on all</td>
      <td><code class="highlighter-rouge">.d-block</code></td>
    </tr>
    <tr>
      <td>Visible only on xs</td>
      <td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
    </tr>
    <tr>
      <td>Visible only on sm</td>
      <td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
    </tr>
    <tr>
      <td>Visible only on md</td>
      <td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
    </tr>
    <tr>
      <td>Visible only on lg</td>
      <td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
    </tr>
    <tr>
      <td>Visible only on xl</td>
      <td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
    </tr>
  </tbody>
</table>

https://getbootstrap.com/docs/4.1/utilities/display/#hiding-elements

참고 URL : https://stackoverflow.com/questions/14207109/hiding-elements-in-responsive-layout

'IT' 카테고리의 다른 글

LINQ를 사용하여 "not in"쿼리를 어떻게 수행 하시겠습니까? (0)	2020.03.19
Visual Studio Code에서 구문 강조를위한 언어를 수동으로 설정하는 방법 (0)	2020.03.19
오류 2006 (HY000) : MySQL 서버가 사라졌습니다 (0)	2020.03.19
덱스를 병합 할 수 없습니다 (0)	2020.03.19
응용 프로그램 식별자 권한으로 인해 앱 설치에 실패했습니다 (0)	2020.03.19

현재글반응 형 레이아웃에서 요소를 숨기시겠습니까?

내가 바로 로또왕!

jquery, 연극, spring, 볼거리, DVD순위, 영화순위, javascript, Java, 여행, 자바, spring3, 무비순위, 놀거리, 뮤지컬, 관광, 행사, C#, 공연, 축제, c++,

Today :
Yesterday :

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

lottoking