반응형 레이아웃에 요소를 숨깁니까?

programing

반응형 레이아웃에 요소를 숨깁니까?

telecom 2023. 7. 29. 08:10

반응형 레이아웃에 요소를 숨깁니까?

부트스트랩을 살펴보니 작은 화면에 대한 메뉴 모음 항목 축소를 지원하는 것 같습니다.페이지에 있는 다른 항목과 비슷한 것이 있습니까?

예를 들어, 나는 nav-pills를 제대로 띄웠습니다.작은 화면에서 문제가 발생합니다.저는 적어도 비슷한 클릭 투 쇼 더 드롭다운에 넣고 싶습니다.

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

표시되는 새 클래스가 부트스트랩에 추가되었습니다.

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

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

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

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

자세한 내용은 http://getbootstrap.com/css/ #response-message

다음은 v3.2.0에서 더 이상 사용되지 않습니다.

전화 초소형전기화장치<(7기 (<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뷰포트가 지정된 중단점 이하에 있을 때 요소를 숨깁니다.

또한, 운로새.xlviewport는 1200ppm 이상의 장치에 대해 추가되었습니다.자세한 내용은 여기를 클릭하십시오.

부트스트랩 4 베타 답변:

d-block d-md-none 중간, 대형 및 초대형 장치에 숨깁니다.

d-none d-md-block 소형 및 초소형 장치에 숨깁니다.

대신 인라인을 사용할 수도 있습니다.d-*-block와 함께d-*-inline-block

오래된 대답: 부트스트랩 4 알파

할 수 ..hidden-*-up 및 더 큰에 숨깁니다.

.hidden-md-up 중간, 대형 및 초대형 장치에 숨깁니다.
▁goes도 입니다..hidden-*-down 및 .

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

hidden-sm-down 그리고

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

xs 모드(<34em)
sm가로 모드의 전화기(44034em)
md 블릿용태 (48em 이상)
lg데스크톱용(≥62em)
xl데스크톱용(75em 이상)

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

부트스트랩 4.3.x: https://getbootstrap.com/docs/4.3/utilities/display/

부트스트랩 4.x 응답

hidden-*클래스가 부트스트랩 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>

화면 크기 및 클래스 차트

화면 크기	학급
모두 숨김	.d-syslogin
xs에만 숨김	.d-module .d-sm-block
sm에만 숨김	.d-sm-md-block
md에서만 숨김	.d-md-md-md.d-lg-block
lg에만 숨겨져 있음	.d-lg-lg-lig .d-lig-lig-block
xl에만 숨김	.d-discovery-discovery
모두에 표시됨	.d-블록
xs에만 표시됨	.d-block .d-sm-message
SM에만 표시됨	.d-vmd.d-sm-block.d-md-vmd-vmd
md에만 표시됨	.d-vmd-md-block.d-lg-vlock
lg에서만 볼 수 있음	.d-vlan .d-lg-block .d-vlan-vlan-vlan-vlan
xl에만 표시됨	.d-vlan.d-vlan-block

명시적으로 사용하기 보다는.visible-*클래스를 사용하면 해당 화면 크기에서 요소를 숨기지 않고 볼 수 있습니다.하나를 결합할 수 있습니다..d-*-none 의 수업으로.d-*-block 화크기지간예요표소클래는시스하를만에격).d-none.d-md-block.d-xl-none는 중형 및 대형 장치에서만 요소를 보여줍니다.

문서화

Bootstrap 5.x 문서에서(링크)

클래스의 이름은 다음 형식을 사용합니다.

.d-{value}을 위하여

.d-{breakpoint}-{value}, , , , 및 에 대해.

에▁where디value다음 중 하나입니다.

없음.
인라인의
인라인 블록
블록
격자무늬
테이블
탁상 전지
식탁의 줄
굴곡이 있는
인라인 플렉스의

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

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

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

여기에 몇 가지 설명을 추가합니다.

표시된 목록(보이는 전화기, 보이는 태블릿 등)은 부트스트랩 3에서 더 이상 사용되지 않습니다.새 값은 다음과 같습니다.

가시-점-점-*
visible-sm-*
visible-md-*
visible-lg-*
숨김-슬립-*
hidden-sm-*
hidden-md-*
hidden-lg-*

별표는 각각 다음으로 변환됩니다(아래에는 visible-xs-*만 표시됨).

눈에 보이는 블록
가시광선에 의한
눈에 보이는, 눈에 보이는, 눈에 보이는, 눈에 보이는

이러한 클래스를 사용할 때 앞에 마침표를 추가하지 않습니다(위 답변의 일부에 혼동스럽게 표시됨).

예:

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

visible-* 및 hidden-*(예: visible-xs 및 hidden-xs)를 사용할 수 있지만 이러한 기능은 Bootstrap 3.2.0에서 더 이상 사용되지 않습니다.

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

부트스트랩 4.0 베타의 경우(그리고 이것은 최종적으로 유지될 것으로 예상됨) 변경 사항이 있습니다. 숨겨진 클래스가 제거되었음을 유의하십시오.

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

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

d-none d-sm-block

첫 번째 클래스 세트는 장치 전체에 걸쳐 모두 표시되지 않으며 두 번째 클래스 세트는 장치 "sm" up에 대해 표시됩니다(다른 장치에 표시하려면 sm 대신 md, lg 등을 사용할 수 있습니다).

마이그레이션 전에 이에 대해 읽어보는 것이 좋습니다.

https://getbootstrap.com/docs/4.0/migration/ #응답형-메시지

모든.hidden-*-up,hidden-*수업은 저에게 효과가 없기 때문에, 저는 자체 제작을 추가하고 있습니다.hidden앞의 클래스visible-*(현재 부트스트랩 버전에서 작동함).한 화면에서만 div를 표시하고 다른 모든 화면에서는 div를 표시해야 할 경우에 매우 유용합니다.

CSS:

.hidden {display:none;}

HTML:

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

추가 CSS 모바일 보기의 모든 페이지에서 사이드바 제거:

@media only screen and (max-width:767px)
{
#secondary {
display: none;
}
}

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/ #http://-

언급URL : https://stackoverflow.com/questions/14207109/hiding-elements-in-responsive-layout

'programing' 카테고리의 다른 글

판다 데이터 프레임의 열 순서 설정 (0)	2023.07.29
Angular 4 오류: HttpClient에 대한 공급자 없음 (0)	2023.07.29
하위 구성 요소의 메서드 호출 (0)	2023.07.29
Spring과 Spring MVC 프레임워크의 차이점은 무엇입니까? (0)	2023.07.29
루트 장치에서 실행 중인지 확인 (0)	2023.07.29

현재글반응형 레이아웃에 요소를 숨깁니까?

각종 프로그래밍 정보를 다루는 블로그입니다.

ASP.NET, Reactjs, Excel, swift, sql-server, Python, Wordpress, MySQL, MongoDB, json, PowerShell, WPF, git, mariadb, angularJs, spring-boot, C, Ajax, oracle, jQuery,

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

telecom

반응형 레이아웃에 요소를 숨깁니까?

반응형 레이아웃에 요소를 숨깁니까?

표시되는 새 클래스가 부트스트랩에 추가되었습니다.

자세한 내용은 http://getbootstrap.com/css/ #response-message

부트스트랩 4 베타 답변:

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

반응형 레이아웃에 요소를 숨깁니까?

반응형 레이아웃에 요소를 숨깁니까?

표시되는 새 클래스가 부트스트랩에 추가되었습니다.

자세한 내용은 http://getbootstrap.com/css/ #response-message

부트스트랩 4 베타 답변:

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바