웹 프론트엔드 부트스트랩 튜토리얼 부트스트랩에서 요소를 숨기는 방법

부트스트랩에서 요소를 숨기는 방법

Jan 19, 2021 am 09:21 AM
bootstrap

부트스트랩에서 요소를 숨기는 방법: 1. 해당 코드 파일을 엽니다. 2. 요소에 "display:none;" 또는 "visibility:hidden;"을 추가하여 요소를 숨깁니다.

부트스트랩에서 요소를 숨기는 방법

이 튜토리얼의 운영 환경: windows7 시스템, bootstrap3 버전, Dell G3 컴퓨터.

DIV 표시 및 숨기기 팁

부트스트랩의 12포인트 그리드를 사용하여 시연

style="display: none;" 숨긴 후 점유된 페이지 공간 해제

document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示
로그인 후 복사

방법:

<div class="form-group">
              <div class="col-lg-3 col-sm-6">
                  <label class="col-sm-4 control-label">{{taskId}}</label>
                  <div class="col-md-8">
                      <input type="text" id="xxx" class="form-control">
                  </div>
              </div>
              <div class="col-lg-3 col-sm-6"  style="display:none;">
                  <label class="col-sm-4 control-label">{{msgId}} </label>
                  <div class="col-sm-8"   >
                      <input type="text" id="xxx" class="form-control">
                  </div>
              </div>
              <div class="col-lg-3 col-sm-6">
                  <label class="col-sm-4 control-label">{{createTime}}</label>
                  <div class="xxx   input-group col-sm-8" >
                      <input type="text" id="xxx" class="xxx">
                      <span class="input-group-addon">
                          <i class="fa fa-clock-o bigger-110"></i>
                      </span>
                  </div>
          </div>
          <div class="col-lg-3 col-sm-6">
              <label class="col-sm-4 control-label">{{to}}</label>
              <div  class="xxxe input-group col-sm-8">
                  <input id="xxx"
                      class="xxx">
                  <span class="input-group-addon"> <i
                      class="fa fa-clock-o bigger-110"></i>
                  </span>
              </div>
          </div>
     </div>
로그인 후 복사

부트스트랩에서 요소를 숨기는 방법

  style="max-width:90%" 隐藏后不释放空间
document.getElementById("typediv1").style.visibility="hidden";//隐藏
document.getElementById("typediv1").style.visibility="visible";//显示
로그인 후 복사

Code :

<div class="form-group">
                                <div class="col-lg-3 col-sm-6">
                                    <label class="col-sm-4 control-label">{{taskId}}</label>
                                    <div class="col-md-8">
                                        <input type="text" id="xxx" class="form-control">
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6"  style="visibility:hidden;">
                                    <label class="col-sm-4 control-label">{{msgId}} </label>
                                    <div class="col-sm-8"   >
                                        <input type="text" id="xxx" class="form-control">
                                    </div>
                                </div>
                                <div class="col-lg-3 col-sm-6">
                                    <label class="col-sm-4 control-label">{{createTime}}</label>
                                    <div class="xxx input-group col-sm-8" >
                                        <input type="text" id="xxx" class="form-control xxx">
                                        <span class="input-group-addon">
                                            <i class="fa fa-clock-o bigger-110"></i>
                                        </span>
                                    </div>
                            </div>
                            <div class="col-lg-3 col-sm-6">
                                <label class="col-sm-4 control-label">{{to}}</label>
                                <div  class="xxx input-group col-sm-8">
                                    <input id="xxx"
                                        class="form-control xxx">
                                    <span class="input-group-addon"> <i
                                        class="fa fa-clock-o bigger-110"></i>
                                    </span>
                                </div>
                            </div>
                       </div>
로그인 후 복사

부트스트랩에서 요소를 숨기는 방법

추천 관련 튜토리얼: "부트스트랩 튜토리얼"

위 내용은 부트스트랩에서 요소를 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

Eclipse에 부트스트랩을 도입하는 방법 Eclipse에 부트스트랩을 도입하는 방법 Apr 05, 2024 am 02:30 AM

Eclipse에 부트스트랩을 도입하는 방법

부트스트랩에 아이디어를 도입하는 방법 부트스트랩에 아이디어를 도입하는 방법 Apr 05, 2024 am 02:33 AM

부트스트랩에 아이디어를 도입하는 방법

부트스트랩 매개 효과 테스트 결과를 Stata에서 읽는 방법 부트스트랩 매개 효과 테스트 결과를 Stata에서 읽는 방법 Apr 05, 2024 am 01:48 AM

부트스트랩 매개 효과 테스트 결과를 Stata에서 읽는 방법

대형모델간 75만 라운드 1대1 대결, GPT-4가 우승, 라마3가 5위 대형모델간 75만 라운드 1대1 대결, GPT-4가 우승, 라마3가 5위 Apr 23, 2024 pm 03:28 PM

대형모델간 75만 라운드 1대1 대결, GPT-4가 우승, 라마3가 5위

부트스트랩 조정 테스트 결과를 읽는 방법 부트스트랩 조정 테스트 결과를 읽는 방법 Apr 05, 2024 am 03:30 AM

부트스트랩 조정 테스트 결과를 읽는 방법

부트스트랩을 사용하여 중재 효과를 테스트하는 방법 부트스트랩을 사용하여 중재 효과를 테스트하는 방법 Apr 05, 2024 am 03:57 AM

부트스트랩을 사용하여 중재 효과를 테스트하는 방법

부트스트랩과 스프링부트의 차이점은 무엇입니까 부트스트랩과 스프링부트의 차이점은 무엇입니까 Apr 05, 2024 am 04:00 AM

부트스트랩과 스프링부트의 차이점은 무엇입니까

부트스트랩 테스트 조정 효과 stata 명령의 결과를 내보내는 방법 부트스트랩 테스트 조정 효과 stata 명령의 결과를 내보내는 방법 Apr 05, 2024 am 03:39 AM

부트스트랩 테스트 조정 효과 stata 명령의 결과를 내보내는 방법

See all articles